Reimagining Nissan Leaf's In-Vehicle Experience
Redesigning the Nissan Leaf's cluster and infotainment screens to better align with both the company's identity and drivers' needs
person
role
UI Designer
access_time_filled
timeline
1 month (Apr. 2025)
work
skills
Auto UI/UX, Prototyping, Storytelling
brush
tools
Figma
overview
As part of an Advanced Automotive UI course (SI 611), we each redesigned a car brand's in-vehicle UI. Specifically, I chose to redesign the cluster and infotainment screens of the Nissan Leaf.
As a UI designer, I first gained insights into the challenges faced by Nissan Leaf drivers. Then, to address these challenges, I developed a generic and branded design system and utilized them to design prototypes of new cluster and infotainment screens. Throughout this project, I was eager to learn more about the Automotive UI/UX problem space.
context
background
The name "Leaf" stands for:
Leading
Environmentally-friendly
Affordable
Family car
the previous market segment…
When the Nissan Leaf was first produced in 2010, the company was mainly targeting:
early adopters of electric vehicles
environmentally-conscious drivers
…and the current market segment
Now, as more and more electric vehicles become available, the Leaf's target audience has shifted to focus on:
urban/suburban parents with young children
drivers who want a practical, everyday car for daily driving
money-conscious drivers who still care about investing in higher-end lifestyle choices
analysis of current UI (as of 2025)
Pros
driving info (speed, battery level, etc.) is clear and concise
info on infotainment screen is big and clear
physical buttons aid in navigating the screens
Cons
UI isn't visually modern
physical gauge limits the flexibility of the cluster screen
customers consider buying a Leaf an investment, but its cheap and outdated looks don't visually reflect this
synthesis
pain points
01
Weak Branding
The Leaf's in-vehicle experience doesn't match Nissan's brand image or mission
02
Outdated UI
Users want a clean, modern UI that reflects the investment that the Leaf is
03
Lack of Features
Since users are usually driving in urban environments, they'd want more features that cater to city driving
ideation
generic UI kit
First, I developed a generic, unbranded UI kit with display layouts and major components as the basis of later iterations.
components
I also started to build a set of common components. At this point, I wasn't sure what the branding would look like yet, so I stuck with a modern, minimalistic style with a monochromatic tone, rounded corners, and flat style.
branding & iterations
branding inspiration
I looked towards digital designs, real-world examples, and the Nissan Leaf's own exterior design for inspiration to modernize the Leaf's interior UI.
branded design system
Based on the inspiration, I catered the design system to the Nissan Leaf by using sharper corners and pops of blue against a dark backdrop.
iterations of gauges
exploring styles
I started by trying out different circular styles for the gauge. In general, I tried to keep them all more minimalistic.
Feedback:
good exploration of breath
try going in-depth for each style
depth of detail
Building off of the circular gauges, I also experimented with making them more detailed with additional tick marks and labels.
Feedback:
visually clean and traditional
doesn't look like it uniquely belongs to the Nissan Leaf
a new shape
I really liked the shape of the headlights on the Nissan Leaf, so I made some more designs where the power and battery gauges would emulate that shape.
Feedback:
having the power and battery gauges moving in opposite directions would be confusing to drivers
lack of balance between the speed and gauges
refining designs
I still liked the shape of the gauges, so I tried different layouts to make it clearer and easier to read.
final iteration with branding
I still liked the shape of the gauges, so I tried different layouts to make it clearer and easier to read.
iterations of infotainment screen
laying it out
I mapped out the system's architecture and mocked up different layouts for the console infotainment screen, prioritizing the driver's ease of use.
final iteration with branding
I still liked the shape of the gauges, so I tried different layouts to make it clearer and easier to read.
final designs
Simple, Sleek Cluster
Quickly glance at the most pertinent information while your driving with minimum distractions
Clusters for City Driving
Choose between different cluster modes to help you navigate more easily
Infotainment Screen's Navigation Feature
Search for and navigate to your destination with a minimalistic, easy-to-use interface
All Your Settings, All in One Place
Customize and access everything from one place
takeaways
take time to dig deep
Since this was my first project focused on automotive UI/UX and electric vehicles, I prioritized spending time combing through videos, posts, and car manuals to better understand current designs, as well as EVs in general. This gave me a better understanding of what types of information drivers want and need, guiding my designs.
form follows function
The cluster's gauge was the focal point of the design, so I dedicated a lot of time brainstorming and iterating various designs. While I tried a lot of designs that were aesthetically pleasing, my main focus was to make sure that key information was being communicated clearly. Ultimately, I landed on an angled gauge design that not only aligns with the brand's identity, but also allows drivers to quickly assess their power and fuel levels.