Stellantis
Stellantis N.V. is a multinational automotive manufacturing corporation formed in 2021, and is a constellation of 14 automotive brands that aim to develop, engineer, manufacture, and scale the best breakthroughs in all facets of sustainable mobility.
OVERVIEW
In collaboration with Stellantis and working with another UX Designer/Researcher, we designed in-car infotainment interfaces for a 2030 vehicle, focusing on Smart Energy Management for EVs.
- TIMELINE
- Sep 2024 — Dec 2024
- ROLE
- UX Researcher and Designer
- TOOLS
- Figma, Miro
BACKGROUND
Working within Stellantis’s infotainment ecosystem, I designed an energy management experience for the Maserati Grecale Folgore by turning AI-driven predictions into clear, actionable interfaces that:
- Enhances battery efficiency and longevity
- Predicts energy consumption patterns
- Optimizes charging schedules and provide real-time feedback to drivers
This system aims to reduce range anxiety and improve overall vehicle performance by managing energy smartly and predictively. The screens that were designed include: driver display, center display, HVAC, and mobile app.
PROJECT OBJECTIVES
PROJECT OBJECTIVES
Predictive Battery Health
Help drivers easily monitor and preserve battery health through status displays, notifications, and Smart Recommendations
Anticipating Energy Needs
Anticipate individual energy needs based on driving habits and presenting consumption patterns and tips on how to preserve battery health
Charging Guidance
Reducing range anxiety by creating charging routines through a charging interface that allows for scheduling at real-time
PROCESS
Competitive Analysis
A competitive analysis was conducted on current battery charging and battery health screens. The findings will inform how we present information so users can understand how to optimize battery health and stay informed on their current charging status.
COMPARATORS
Insights following the competitive analysis revealed several important design considerations:
Information Hierarchy
- Including the most important information upfront, while allowing users to click into additional information at their own convenience. Information such as estimated distance and battery level, as well as allowing the driver to set a charging limit aids in helping drivers make informed charging decisions and maintain long-term battery health.
Visual Hierarchy
- Including a model of the vehicle and depicting what is currently open and whether the vehicle is currently charging. Using a rectangular progress bar with a green fill to represent battery percentage leverages familiar visual conventions (similar to a fuel gauge).
Research: Automotive UX Trends
To understand automotive infotainment systems, research was conducted on multimodal interactions, connectivity, AI voice assistants, and EV charging and route planning.
Multimodal Interactions
such as speech, gesture control, and ADAS adaptive cruise control to reduce cognitive load and let drivers interact in whatever way is safest and most intuitive in the moment
Connectivity
such as digital keys via smartphone, cross-device continuity, and over-the-air updates to keep the vehicle secure and allow for personalization
AI Voice Assistants
enhance situational awareness by providing proactively road and weather condition alerts, while allowing drivers to complete tasks through voice alone to minimize visual distraction from the infotainment screen
EV Charging and Route Planning
to simplify the charging experience by presenting battery health, real-time charging/discharging status, and efficiency-driven driving tips in order to reduce range anxiety and supporting long-term battery health
Design Iterations
LOW-FIDELITY
1 of 3 — slide
Center Display
The center display contains the navigation, entertainment (music, media, etc.), smartphone integration, vehicle status, camera feeds, and parking assist. These wireframes allow drivers to easily scan information, which is done through large font and icon sizes.
MID-FIDELITY
1 of 3 — slide
Charge Page
The charge page displays real-time charging status through a visual battery fill level, target charge, range, completion time, and charging speed, keeping important information upfront.
FINAL PRODUCT
The driver dashboard, center display, and HVAC screen utilize AI-driven energy management to deliver predictive insights on battery health and energy consumption, and to guide drivers toward optimized charging schedules, thus reducing range anxiety and improving overall vehicle performance.
1 of 4 — slide
Center Display
Similar to a touchscreen phone, drivers receive notifications regarding system alerts, calls and messages, and AI Suggestions. They are able to swipe down to view all notifications. On the Center Display, drivers are able to view all of the information they want upfront.
LEARNINGS
This was my first automotive UX project, and although I drive, I hadn’t thought too much about how the screens were designed. Drivers should spend no longer than 2 seconds at a time. As such, font and icon size need to be large enough to tap and view, while utilizing color. Similarly, alerts are best paired with haptics such as a vibration or sound.
Brands also design concept cars, such as the BMW i Vision Dee, that combines digital and physical features to create a vehicle with a personality. I personally love futuristic concepts and bright visuals, and it’s quite rare to see the steering wheel without a top and bottom part (aside from Tesla from my knowledge).
REFLECTIONS
I would love to design a concept car of my own! It would let me dive deeper into what creates a vehicle that is both safe and personalized for drivers.
