Telenav · 2022–2023 Automotive UX · Design Systems Audi & Stellantis

Novo In-Car
App (NICA)

Bringing a usage-based insurance product from mobile into the vehicle — across 12+ screen sizes, two OEM platforms, and non-negotiable driver safety requirements.

My Role
Lead Product Designer
Platform
Embedded In-Car
Partners
Audi, Stellantis + more
Screen Sizes
12+ Configurations

01 — The Challenge

One product.
Twelve screen sizes.

Novo was already a functioning mobile product — tracking driving behavior and translating it into scores, milestones, and pricing signals. The ask was to bring that into the car, embedded in the infotainment system.

On the surface, it sounds like a port. It wasn't. In-car screens vary in size, aspect ratio, pixel density, interaction model, and viewing conditions. A driver glancing at a 10" portrait display in a Stellantis vehicle is in a completely different context than someone navigating a wide 15" landscape screen in an Audi. Same product. Entirely different constraints.

It had to work across all of it — consistently, safely, without a separate design for every configuration.

The core problem

One UI. 12+ screen configurations. Two OEM platforms. Design while the car is moving.

02 — My Role

What I
owned

  • Led the visual design of the in-car product, working in tandem with a UX designer
  • Owned all responsive work — mapping 12+ OEM configurations, defining breakpoints, and building every layout variation
  • Defined the 4 main breakpoints and the rules governing how content behaves across them
  • Reworked mobile patterns into driver-safe interactions for in-car context
  • Worked directly with Audi and Stellantis engineering and platform teams
  • Delivered production-ready specs, assets, and component documentation

The responsive system was mine end-to-end — from researching all 11+ OEM head unit configurations, to choosing the 4 breakpoints that covered the real hardware spread, to building every layout variation that shipped.

Working alongside a UX designer meant I could focus deeply on the visual and responsive layer while the broader interaction model was developed in parallel.

✦
Live in production

Audi is still using it — available today in their App Store.

03 — Responsive System

Designing for
12+ screen sizes

Automotive infotainment screens don't follow a clean size grid — they range from compact 9" displays to ultra-wide 15"+ panels, across multiple OEM platforms each with different OS chrome and usable area. Before picking breakpoints, I mapped every head unit configuration to understand the full constraint space.

Research — all OEM configurations mapped

HCP3 · Audi 15"

OI @ Android · Audi 13"

HCP3 · Audi PI D 11"

Asterix · Audi 10"

OI @ Android · SEAT/CUPRA 10"

OI @ Android · SEAT/CUPRA 13"

OI @ Android · SEAT/CUPRA 15"

HCP3 · Porsche PI D 11"

OI @ Android · VW 15"

OI @ Android · VW 11"

OI @ Android · VW 13"

The decision — 4 breakpoints defined

Baseline
9"
1,254 × 708 px

Driver Board
Standard layout. 4 safety stat cards visible.

Trip Details
Event tabs displayed at top.

Breakpoint ≥ 1298
10.1"
1,408 × 792 px

Driver Board
Content area ≥ 1298px: 5 safety stat cards now visible.

Trip Details
Event tabs shift left from top → left sidebar.

Ultra-wide
10.25"
1,536 × 576 px

Driver Board
Wide layout, optimised for low aspect ratio.

Trip Details
No in-app menu bar. Exit via hardware button or head unit dropdown.

Large display
13.3"
1,843 × 1,037 px

Driver Board
Full layout — all 5 stat cards + persistent detail panel.

Trip Details
Full side-by-side layout, maximum content density.

Output — production screens at each breakpoint

9" · 1,254 × 708
10.1" · 1,408 × 792
10.25" ultra-wide · 1,536 × 576
13.3" · 1,843 × 1,037

04 — Design Decisions

Key decisions
and why

01
Deferred feedback, not real-time alerts
Live scoring while driving is a distraction. During a trip, the app shows ambient status only — a minimal indicator. Full feedback (events, breakdowns, tips) surfaces only after the vehicle stops. It's both a safety call and a product one: post-drive review is more useful anyway.
02
Layout zones over fixed breakpoints
Pixel breakpoints are too brittle for automotive. Each platform reserves different amounts of screen space for system chrome, so "usable area" varies even on identical hardware. Zones defined by aspect ratio and available area stayed stable across both Audi and Stellantis without custom builds per vehicle.
03
Navigation anchored to natural gaze path
Portrait screens get a bottom nav bar — interactive elements stay low, close to where a hand rests. Landscape screens get a left-anchored sidebar, aligned with natural reading direction. Less eye travel, fewer glances off the road.
04
Progressive disclosure for content density
Each layout tier has a content ceiling. Information beyond that moves behind a drill-down. Smaller screens show less — not because they can't render it, but because showing everything at driving speed isn't safe or useful. The system enforces this; it's not left to individual screen decisions.
05
Mobile reference, not mobile assumptions
Novo mobile was the starting point, not the template. Swipe gestures, scroll-heavy flows, and small touch targets don't translate to a screen that's further away, used at an angle, and operated with less precision. Every pattern was evaluated: adapt it, replace it, or cut it.
06
Gamification tuned to context
The scoring and milestone system had to carry over without creating distraction. Milestones surface as passive notifications — visible at a glance, no interaction required to dismiss. A good score shouldn't demand attention at 70mph.

05 — Constraints

What shaped
the work

Driver Safety Standards
Both partners required compliance with distraction guidelines — limiting interaction complexity while moving, enforcing minimum touch target sizes, restricting anything that takes more than a glance to parse. These were hard gates in the review process, not recommendations.
Platform Limitations
Audi and Stellantis each run their own infotainment OS — different rendering capabilities, font support, animation budgets, and fixed system chrome. Design had to work inside those limits, which occasionally meant simplifying interactions that would've been straightforward on an open platform.
Screen Size Diversity
12+ configurations is the actual hardware spread — across two partners, multiple vehicle lines, different model years. The system had to be validated against each one, using Figma components with size overrides and structured review at every layout tier.
Two Partners, Simultaneously
Audi and Stellantis had separate review processes, different feedback cadences, and occasionally conflicting requirements. Keeping the design unified meant being clear about what was fixed (the system) and what could flex (the surface).
Mobile Product Continuity
This wasn't a standalone product — it had to feel like Novo. A user moving between phone and car should recognize the same product, not relearn it. That required ongoing coordination with the mobile team on visual language and information architecture.
Production Handoff Rigor
Specs for 12+ configurations meant the Figma system had to be built for handoff — not as screens, but as documented rules engineers could implement once and apply everywhere. Any ambiguity in the system became a bug in the product.

06 — Outcome

What was
delivered

The project delivered a fully documented responsive design system across all 12+ screen configurations, plus production-ready UI for the core experience: home screen, trip summary, score breakdown, milestones, and onboarding.

The system was built to absorb new configurations without redesigning. That proved out mid-project when one partner introduced a new vehicle line with a screen size outside the original spec. It was handled without a rework cycle.

Both partners completed design review. The Audi integration moved to engineering handoff. The Novo mobile team later used the system as a reference when revisiting their own component library — making it a cross-platform asset rather than a project artifact.

System durability

A new screen size appeared mid-project, outside the original spec. It was handled in an afternoon.