OEM Dashboard

An engineering tool for visualizing data collected from connected vehicles. It delivers real-time data to the vehicle manufacturer or service provider and the driver.

Client
Industry
Duration

Our role

Shield bullet

Discovery

Shield bullet

Wireframing

Shield bullet

Prototyping

Shield bullet

Design System

Shield bullet

User Testing

Project overview

The OEM Dashboard web application enables near real-time remote data analytics, remote vehicle configuration, and over-the-air vehicle software update. Some of its more prominent features include:

  • Historical data analytics - Entire vehicle's data history available for analysis
  • Live data analytics - Live data playground for near real-time remote vehicle analysis
  • Complex data analytics - In-depth analysis and overview of entire fleets of connected vehicles
  • Over-the-air software updates - Software update feature for entire fleets that delivers updates with a click of a button

We've inherited a legacy design

The initial design for the app was created in Adobe Illustrator by an in-house designer from Rimac Technology. Therefore, one of our first objectives was to document and migrate everything into Figma - a product design-focused tool.

Our goal was to create a robust design library for the project that would be easy to maintain and expand as the application grows. This would also make it easier to implement global changes in the future and work faster overall.

Legacy design in Adobe Illustrator

The new OEM Dashboard design system

Since we started our collaboration with the client, the design system has undergone many refactoring cycles. Our goal is to ensure system-wide UX and UI consistency, thereby lowering the learning curve for the users.

M2M design library

An overview of the app's main modules and features. User access is based on specific vehicle permissions that are authorized by admin users.

M2M information architecture
Quote

The amount of work the McKnight Media team put into understanding the topic is unbelievable. When we started, we had two months' worth of introduction and me telling them what was happening in the vehicle and what was happening in the cloud for them to understand what we were trying to do and build here to get the best delivery from their side.

This is something I was blown away by. In the end, it proved to be great. I can rely on everyone from McKnight Media, and I know that they’ll be able to understand everything we’re talking about, even if it is super technical in the automotive field. That was a huge help.

Product Owner,
Rimac Technology

OEM Dashboard components

Playground widgets

The Playground is an endless grid canvas that allows users to add data visualization widgets linking them to real-time vehicle data feeds. Some widget types include gauge, bar, led, map, a chart with one or two values. All widget variations come in several sizes and with value-based coloring.

Playground gauge widgetPlayground bar widget

Analytics charts

Charts enable detailed data comparison from various signal sources of a selected vehicle’s active sessions. In addition to charts, users can set up alerts that will also show up on charts. The Alerts feature allows users to create custom notifications triggered by complex conditionals.

Analytics chart
Fleet overview statistics

Fleet overview widgets

A sidebar that is shown on the Fleet Overview Screen. When tracking vehicles, fleet overview hosts important statistics that change depending on context - global overview, single vehicles, or single fleets.

Single vehicle overview

In addition to historical data viewing, more detailed real-time information can be tracked for a single vehicle in the Live tab of the Single Vehicle Overview screen.

Single vehicle overview

We regularly test with users

Gathering user feedback is an essential part of user-centered design and we strive to regularly test our assumptions and design decisions. To reduce bias, ideal candidates would not be part of the product development team.

With complex software, it can often prove challenging to recruit ideal users for testing because of their availability. Nevertheless, we believe testing with less-than-perfect users is better than not testing.

Building a prototype for user testing

To optimize time and effort, we carefully decide which design assumptions we want to test. These decisions will ultimately influence what we make clickable in the prototype.

We prepare a moderator’s script, task assignment descriptions, and a note-taking spreadsheet. Finally, we book meeting rooms, and send invites to test candidates.

User testing prototype

Conducting in-person, moderated testing

Our user testing session usually includes the test candidate, moderator, dedicated note-taker, and one or more observers. Only the test candidate and the moderator communicate throughout the session.

Be it in-person or remote test sessions, we like to record the audio, the screen, and the user's facial expressions for later reference and analysis.

User testing sessionUser testing session online recording

Analyzing user feedback

Positive user feedback notesNegative user feedback notes

We then color code the documented user feedback and notes and put them into context on the prototype screens.

Negative observations are grouped as we identify overbearing topics, for which we then brainstorm possible fixes.

Prioritizing changes for implementation

With input from the entire team, we place the suggested design fixes onto an effort-value matrix to determine and suggest priorities for the Rimac Technology development team to implement first.

Low effort & high value (4) or, as we call them, "low-hanging fruit items", are resolved first. High effort & high value (2) items are addressed second depending on the project timeline and budget.

Value-effort matrix

The OEM Dashboard in Action

Below is a video of the CEO of Rimac Technology, Mate Rimac, inside the Rimac Nevera. Mate demonstrates using the OEM Dashboard app to analyze performance after an acceleration test drive on an unused airstrip. (April 2021)

The Rimac Nevera is an all-electric hypercar designed and manufactured in Croatia and is potentially the fastest-accelerating all-electric production car globally, reaching 0–97 km/h or 0–60mph in 1.85 seconds.

Quote

McKnight Media has always been able to deliver everything even though they started with one designer and grew with our needs. We went from a basic product with a few users from our internal team and without any design to a complete product that’s sellable to the B2B space.

We’ve already sold it to a few other OEMs with hundreds of users in early January (2021) as well as hundreds of vehicles connected in one year. The design team from McKnight Media was able to support all of our issues from the product side.

Product Owner,
Rimac Technology

Ready to Discuss Your Project?

If you have a project that fits our niche, we’d love to chat and see how we can help.

Schedule a Meeting