Infotainment Design System
The launch of JLR’s first-ever shared design system for the infotainment platform
Problem
Design teams working in silos with Adobe Illustrator made the collaboration and execution of the next generation infotainment system virtually impossible.
Opportunity
Drive greater consistency across infotainment features using a shared design system. Empower designers at all levels with access to the latest UI elements.
Outcome
A design system that allows Jaguar Land Rover to scale its design efforts across all infotainment features with guaranteed consistency.
FIXING WHAT’S BROKEN
With a broken process in place for designing and sharing the latest UI patterns, the next generation infotainment project was off to a rocky start. Design teams were spending too much time and resources designing infotainment features one by one with little consistency amongst each other.
Dumping Ground
Before the Infotainment Design System, the only way to get access to the latest high fidelity designs were to dig through a Google Drive folder and look for the latest release from a team in the UK.
overly robust
While Adobe Illustrator has its advantages, it’s hardly the right tool for building a design system. We found it difficult to use consistently across all the features. To build a system we’d need to use something else and start at the atomic level.
A case for SKETCH
With experience using Sketch, I demonstrated to my boss how easily we could make symbols out of all the known system components. These components could all live in a shared space and get updated as needed.
Ensuring consistency across our distributed teams is a great way to save time and money. I used Sketch to show how we could easily scale UI patterns across all features – something the current process was lacking.
Using the tools built into InVision as well as the Design System Manager (DSM), we brought developers into our process earlier and structured our workflow around their needs. With Sketch linked to projects in InVision, pushing the latest specs was a snap.
Structuring the Design system
When designing for the infotainment platform, there are numerous contextual variables to think about.
Designs need to adhere to language translations, left-hand and right-hand drive screen orientations, as well as day mode and night mode UI themes. I used these constraints to build a case for a design system that could easily support those needs in a quick manner.
Day Mode
Night Mode
Blue Line
To capitalize on the benefits of using Sketch, I centered the library of UI elements around the need to toggle through the different UI mode themes (Night Mode, Day Mode, and Blue Line).
Below is a video of how I organized symbols to drive greater efficiency and consistency. Notice how the symbol pathways are organized such that converting from one UI theme to another is just a simple swap.
START
Let’s build a search results view to demonstrate the flexibility and efficiency of the Infotainment Design System within Sketch.
0:01
With the library connected to my Sketch file, it’s easy to snap the approved UI pieces in place on the artboard.
2:03
Overrides allow designers to customize the content while keeping the correct properties.
02:35
Changing the UI theme is as simple as duplicating the screen and toggling each component.
End
Within a few minutes we’ve built a screen from scratch and shown how easily we can toggle the screen to the different UI modes with the Infotainment Design System.
What is Blue Line?
Blue Line is a wireframing visual language that strips away the aesthetics of our high fidelity designs and replaces them with a purely functional one. It’s useful in designing prototypes when what we want to know is if the user understands what they can do (which is most often the case!).
Blue Line is great for usability testing scenarios when the visual look and feel isn’t yet determined or not relevant to what we want to learn. Often times Blue Line gets used when we’re starting out with a new feature and still working out the flow.
When put to use in the right context, I’ve found participants react intuitively to its consistent use.
Connected Services Success
Due to organizational challenges and internal politics, The design system initiative had limited success in changing the way the company designs and develops core infotainment features. Its greatest success was in demonstrating a modern approach with the design and development of Connected Services applications.
Software Over the Air
The CX vision and strategy for empowering owners with over-the-air software updates.
Digital Transformation
A company-wide commitment to making impactful digital customer experiences.
rear seat INTERFACE
The research and design of a shared, rear seat climate and comfort touchscreen interface.