Project TomTom Digital Cockpit
Year 2022 - 2024
Company TomTom
TomTom Digital Cockpit is a scalable in-vehicle infotainment system to help automotive makers build highly customisable IVI platforms in the shortest possible time frame. As a senior UX designer, I was responsible for the end-to-end user experience design, conducting cross functional collaboration, and creating a flexible platform for a future use case based on very different driver types and client requirements.
User Driver needs
UX needs vary greatly by vehicle type — for example, the needs of someone driving a truck are vastly different than the needs of someone driving a compact car.
We defined vehicle-specific user journeys and interface logic around appropriate contextual functions – like for trucks, cargo status and route incidents were prioritized, whereas for consumer vehicles it was much more about navigation, media and personalisation.
UX Highlights
User Research
In order to ensure our design decisions were grounded in real user needs, we collaborated directly with our research team to understand the needs of a breadth of users, including everyday drivers, and commercial fleet operators. The sessions with each group of users first provided context-specific pain points and expectations. Specifically, we found that electric vehicle drivers wanted real-time range prediction, and charger availability, while long-haul truckers wanted ability to also plan routes including rest stops, and cargo monitoring.
We plotted user journeys for personas in various scenarios — commute, drive-out-of-town, delivery routes, and so on. By doing this, we were able to articulate user intent and friction points, as well as opportunities for UX contextual enhancements. We also designed usage scenarios around edge cases like poor network reception, low battery, active handover from driver to co-driver, etc., to consider the experience as safe and seamless for users across a range of situations.
Test drives
We executed multiple usability tests, both in-car usability tests and "test drive" scenarios, to verify that our designs performed well under typical driving conditions, including distraction, illumination changes and physical reach. In response to feedback received, we iterated interaction patterns and polished UX to reduce cognitive load and help drivers maintain focus.
Scenario design
Designing for safety
Safety was the top priority. We optimised the placement, sizing, and spacing of components to ensure usability during drive. We ensured key information - such as navigation or driving conditions - was located in the areas of the screen that were easiest for drivers to reach and glance at. We also eliminated all unnecessary UI elements to reduce the on-screen clutter and only show what was necessary in each context to allow drivers to complete key actions with minimal interruption to their view of the road.
Focused interaction
We designed every screen and every flow for the user's driving context; i.e. parked, in traffic, or on the highway. We minimized some actions like changing music or vehicle status by streamlining them to make the user flow more simple, thus reducing steps and cognitive load.
Cluster & centre display
We distributed content between the cluster and centre display. Important information that requires priority use of the cluster, as it is relevant to actual driving itself (i.e. speed, navigation prompts, alerts), was represented in the cluster. Information that is more informational or interactive (i.e. media, vehicle settings) was represented in the centre display, which made it less likely to distract the driver and assists in helping the driver focus on relevant important information while driving.
Customisation & scalability
Every automotive B2B client wants to customise their IVI experience in terms of interface architecture and visual styling. We contributed to the development of a modular UX framework and componentised UI so that we could build great products with scope for deep customisation, while being scalable. We created configurable templates and flexibility layers to allow our clients some freedom of choice, whilst maintaining technical feasibility.
Design system
One of the primary successes on this project was to create a scalable design system and technical ecosystem that allowed for deep brand customisation whilst maintaining consistency in UX design. This design system established the basis for a growing repository of reusable components and design templates to progress development speed whilst maintaining consistency amongst client implementations. it contained responsive layout patterns, colour tokens, iconography, motion principles and guidelines for safety.
3D integration
To achieve a high-end and unique appearance, we developed a flexible UI layer that can accommodate 3D engines like Unity. This enabled dynamic visuals, such as animated HVAC controls and an interactive 3D vehicle model that reflects the real-time status. This UI layer provides clients with the ability to provide branded immersive IVI experiences that extend well beyond basic flat UI design.
