Stellantis Infotainment

Stellantis project hero
Telenav, for Stellantis
UX Designer
  • 5 Designers
1.5 months
Pitched
Overview

A cockpit concept built over six weeks and pitched to Stellantis, bringing self-driving, navigation, entertainment, trip planning, voice and AI together on one edge-to-edge display.

Problem

One pitch to define the cockpit

Stellantis was deciding who would shape the next generation of its in-car experience. We had one opportunity to make the case. Fitting everything on one edge-to-edge screen was the easy part. Keeping it calm instead of crowded was the real work.

We were a team of five designers: a voice and conversation designer, a UI designer, a lead UI designer, a design manager and me. I did the reach study and owned the foundations: the interaction flows, the UX and the low-fidelity wireframes, before our UI designer and cartographer finished the UI and styling. I also did some of the motion design, copy and visual mockups, helped build the pitch presentation, and set the groundwork for how the map looks.

Context

Ultrawide canvas in the car

The canvas was a 3840 by 720 display running pillar to pillar across the dashboard, the widest screen a car has offered. That scale was the opportunity and the problem at once. Three constraints shaped every decision.

01

A screen too big to treat like a screen

At pillar-to-pillar width, no one can physically reach across the display, and scattering apps across it just reads as clutter. Occupants needed a structure they could read at a glance.

02

Two people, one surface

Driver and passenger share the same glass but want different things at the same time. Each needed their own space, controls, and audio, without splitting into two separate systems.

03

It is still a car

Everything on screen competes with the driver's attention. Driving-critical information had to stay glanceable, anchored where the driver already looks.

Challenge

Turn a screen into a system

The hardest constraint, safety, turned out to be the answer. I started from what the driver can actually reach and glance at, and let that define the zones. Ergonomics first, which made this an information architecture problem before a visual one.

Let safety define the structure, and the rest can be flexible.

The principle behind the cockpit
Information architecture

A system built from the driver outward

With the reach study as the foundation, the architecture is a handful of rules. The canvas divides into zones by function and by who they serve. Windows layer in a fixed priority, so urgent alerts always surface on top. Every element snaps to one of four sizes. And every function maps to a region for each vehicle state: parked, driving, or driving itself. These rules let a screen this large stay calm while it recomposes around the drive.

Driver reach and sightline analysis: the panoramic screen mapped into tiers, comfortable reach near the driver, edge of reach in the middle, and out of reach toward the passenger
Before any zone was drawn, a driver reach and sightline study mapped the panoramic screen into tiers: comfortable reach near the driver, edge of reach in the middle, and out of reach toward the passenger. The zoning that followed was derived from this, not from layout preference.
Screen division diagram mapping functions to regions of the panoramic display, from the driver cluster across to passenger content
Dividing the canvas by function, from the driver cluster on the left across to passenger content on the right.
Z-index layering diagram showing how windows stack across five levels and how alerts push elements to the right
The layering model: ambient content at the base, the driver cluster above it, and alerts and voice surfacing higher, with the layout reflowing to the right when an alert or call arrives.
Zone diagram labeling the cluster instrument, primary app stages, and secondary app companions
The zones: a fixed driver cluster, plus two flexible app stages that each pair a primary app with a secondary companion.
What the reach study changed

Giving every app a home zone wasn't enough on a screen this wide. People needed to move apps within reach, and the driver and passenger needed to hand apps to each other. So each side got an app menu within reach: a control hub to pull any app back, or pass it across.

Four standard window sizes on a 3840 by 720 pixel canvas: full, two-thirds, one-third, and one-twelfth
Four standard window sizes on a 3840 by 720 canvas. Every element snaps to one of them, which keeps the layout coherent as it rearranges.
Park mode function map: cluster, center stack and passenger display content, including a god-mode top-down cluster and a passenger who can take over the center stack
ParkWith the structure set, every function was mapped to a region for each vehicle state. In park, the cluster runs a god-mode top-down view with no speedometer, the center stack opens fully, and a passenger can extend content and take it over.
Manual drive function map: speedometer and driver-safety alerts appear in the cluster, communication is audio only, passenger keeps fuller access
Manual driveIn manual drive the model tightens for safety: the speedometer, speed limit, and driver-safety alerts (following distance, drowsy) appear, and communication drops to audio only. The passenger, not driving, keeps fuller access.
Self-driving function map: similar to manual drive with leisure and planning content, and reservations added to the passenger experience
Self-drivingIn self-driving the instruments and safety rules stay in place, but the experience leans toward leisure and planning, with reservations added for the passenger.
The experience

The end-to-end driver experience

To pressure-test the architecture, I designed one continuous drive rather than disconnected screens, following a driver and passenger through a long EV trip to Hearst Castle and back. It exercises every state the system has to handle: welcome, park, reverse, manual drive, and self-driving.

System boot screen: the brand emblem resolving on a dark canvas as the user enters the car, before the cockpit assembles
1The moment you get in. The system wakes, the brand mark resolving on a dark canvas before the cockpit assembles around you.
Charging complete screen with the vehicle model, range and battery, prompting the occupants to position their face in front of the camera
2Charging finished overnight. As you get in, the camera recognizes who is aboard, the key to everything personalized that follows.
Welcome Back screen: each occupant identified, with climate, audio and phone settings setting themselves per person
3Welcome back. With each occupant identified, their space starts setting itself, climate, audio, and their own phone connecting, tailored per person.
Cinematic 3D trip preview with the route, a charge stop, current battery and arrival times before departure
4Then the day's drive is previewed on a cinematic map: the route, the charge stop, and the timeline, with battery and arrival times laid out before you pull away.
Hi-fi parked cockpit with the trip planned: vehicle controls and range at left, route and charge stop in the center, weather, markets and a suggested hotel at right
5The trip begins parked and planned. The driver sees the vehicle and its controls while the route and its charge stop are laid out, and the passenger has weather, markets, and a suggested place to stay.
Vacation Mode running: lights off, thermostat set, doors locked, alarm armed, garage closed, shown on a 3D model of the home
6Pulling away, a Vacation Mode routine sets the connected home, lights off, thermostat set, doors locked, alarm armed, garage closed, visualized on a 3D model of the house.
Vacation Mode complete, every home task confirmed on the 3D model
7It confirms each item complete before the drive gets going.
Cruising with a cinematic 3D map and live traffic in the center, the passenger browsing Spotify
8Cruising, the center becomes a cinematic 3D map with live traffic, while the passenger browses Spotify.
Traffic event with a live camera and the congested stretch in red, passenger music playing
9A traffic event surfaces with a live camera, the affected stretch in red, and the expected delay, as the passenger's music plays on.
Arrival at Hearst Castle with hours, parking and Auto Park, the destination rendered in 3D, passenger sees photos and Learn More
10Arrival at Hearst Castle. The driver gets hours, parking, and Auto Park with the destination rendered in 3D, while the passenger gets photos and a Learn More.
Auto-parking with surround cameras and a path to the spot, passenger browsing the castle tours
11Auto-parking begins with surround cameras and a path to the spot, while the passenger reads about the castle and its tours.
Self-parking while the passenger buys two Grand Rooms tour tickets from the seat
12As the car self-parks, the passenger buys the tour outright, two Grand Rooms tickets, paid from the seat.
Drowsy alert with the alertness graph in the unsafe range, passenger browsing hotels
13On the return, the alertness graph drops into the unsafe range and the drowsy alert appears, while the passenger browses places to stay.
AI suggests a Starbucks just off the route to rest and charge, fifteen minutes added
14The AI suggests a Starbucks just off the route to rest and charge, only fifteen minutes added.
Awake Mode brightening lights, cooling the cabin, sitting the seat upright, and cueing high-tempo music
15In the meantime, Awake Mode brightens the lights, cools the cabin, sits the seat upright, and cues high-tempo music.
Recharged and driving home, the passenger plays a video game while the car drives
16Recharged and rolling again, the passenger settles into a video game while the car handles the driving.
Final urban approach into San Francisco with live signals, signs and pedestrians on a cinematic 3D map
17The final approach into the city, with live signals, signs, and pedestrians read into a cinematic 3D map, minutes from home.
Process

System first, screens second

The whole concept came together in about a month and a half: constraints first, structure second, screens last.

Part of the groundwork was studying where pillar-to-pillar cockpits and connected-car interfaces are heading, from shipping systems to concept cars:

Apple CarPlay Ultra: a pillar-to-pillar multi-display cockpit Samsung digital cockpit concept with a wide curved display Porsche Taycan curved cluster with a wide central display Honda e full-width dashboard screen array with camera-mirror displays at each end Peugeot i-Cockpit: a small steering wheel below a raised digital cluster and center touchscreen Tesla Cybertruck user interface
01

Build the system before the screens

A driver reach study, then every function mapped to a region per vehicle state, then the zones, layering, and window sizes. The rules had to hold before a single screen was drawn.

02

Design the whole drive, low to high fidelity

Then the screens, as one continuous drive: low fidelity to test placement and density across every state, high fidelity to make the future tangible for the pitch.

The low-fidelity exploration the high-fidelity screens were built from, one continuous drive, tested for placement and feel across every state:

Low-fidelity wireframe: welcome and greeting Low-fidelity wireframe: per-occupant personalization checklist Low-fidelity wireframe: parked cockpit with vehicle controls Low-fidelity wireframe: top-down cluster with tire pressure Low-fidelity wireframe: reverse with backup camera while passenger enters destination Low-fidelity wireframe: EV trip summary with charge stops Low-fidelity wireframe: active navigation map Low-fidelity wireframe: driver radio and passenger call with localized audio Low-fidelity wireframe: expanded media app reflowing the map Low-fidelity wireframe: swipe to pass an app between driver and passenger Low-fidelity wireframe: passenger playing a video game Low-fidelity wireframe: traffic event with live roadside camera Low-fidelity wireframe: arrival with parking options and destination details Low-fidelity wireframe: auto-parking while passenger buys tickets Low-fidelity wireframe: drowsy alert and offer to take over Low-fidelity wireframe: suggested rest and charge stop Low-fidelity wireframe: Awake Mode
Outcome

The final pitch

The family posing in front of their home with the Golden Gate Bridge in view The family at dinner as a smart speaker reminds them to charge the car before tomorrow's trip The driver plugging in to charge the car in the garage Ordering road-trip snacks on a phone from the kitchen Loading luggage into the car in the garage before the trip The family gathered around the screen as the driver plans the route The car parked in front of the family's modern home Vacation Mode securing the home as the car pulls away fully charged A lane-closure alert and music playing at 65 mph with the family along for the ride A close-up of adding Hearst Castle to the trip for ten more minutes Approaching Morro Bay at 65 mph with Hearst Castle suggested ahead The car parked at dusk as the family walks up to Hearst Castle Arriving at Hearst Castle with an Auto Park prompt and a 3D view of the grounds A smartwatch showing a clear-traffic alert and a Get Car Ready button The family walking across a sunny parking lot toward the car The family settled inside the car at the start of the drive Close-up of the driver growing drowsy at the wheel Cruising the coast at 65 mph with a cinematic map and the Ritz-Carlton photo gallery Top-down view of the car pulling in beside a coffee shop Cruising the coast at 65 mph with the route and the Ritz-Carlton photo gallery open Awake Mode adjusting lights, climate, seat and music at 65 mph The family picking up coffee at the counter The family wiping down the car, seen through a storefront window Parked cockpit planning the trip to San Francisco, with the route and charge stop A hand reaching to the screen to start auto parking while leaving a spot The car cruising past a coffee shop on a sunny street Driving at 30 mph through the city with a podcast and a game running side by side The driver relaxed at the wheel with the display in view through the window Driving at 30 mph through the city, a podcast playing with a Ritz-Carlton suggestion

What I took away

The pitch did not win, but it's one of the most valuable projects I've led: my first time taking a big brief from a blank canvas to a complete, believable concept. What I kept from it is the order of work. Setting the rules for reach, zones and layering first is what let a screen this large stay calm once the screens were drawn.