Helios

case study

HMI Design

Systems Architecture

HIFI prototyping

case study

HMI Design

Systems Architecture

HIFI prototyping

task

Redesigned the Helios infotainment system by architecting a scalable HMI design system and high-fidelity prototype that prioritizes glanceable interactions to reduce driver distraction and legacy system latency.

constraints

  • 7-week timeline

  • 10” screen environment

  • Limited user testing

  • Focus on 4 core features

  • 7-week timeline

  • 10” screen environment

  • Limited user testing

  • Focus on 4 core features

The Problem

Drivers struggled with slow performance, unclear navigation, and high cognitive load while interacting with the system, leading to reduced usage and increased distraction while driving.

The Goal

Design a safe, intuitive infotainment experience that minimizes distraction while supporting modern, connected features.

Key Insight: Users need familiar, glanceable interactions and hands-free control to safely complete tasks while driving.

research

User Persona Data

After organizing the user feedback into data-driven personas, I created a strategic foundation to solve Helios’s most critical friction points through a safer, more intuitive system.

Persona 1: The Busy Professional

About: A high-performing marketing director who treats her vehicle as a mobile sanctuary during a high-pressure urban commute.

Goals: Prioritizes hands-free productivity and seamless navigation to reclaim time without compromising road safety.

Challenges: Susceptible to "cognitive tax" from unintuitive menus that interfere with professional organization while driving.

Persona 2: The Tech Enthusiast

About: A software developer and early adopter who expects his vehicle to function as a seamless extension of his digital ecosystem.

Goals: Seeks deep system integration and UI customizability to create a personalized, immersive driving environment.

Challenges: Low tolerance for hardware latency or "walled-garden" software that limits device connectivity and advanced features.

Persona 1: The Busy Professional

About: A high-performing marketing director who treats her vehicle as a mobile sanctuary during a high-pressure urban commute.

Goals: Prioritizes hands-free productivity and seamless navigation to reclaim time without compromising road safety.

Challenges: Susceptible to "cognitive tax" from unintuitive menus that interfere with professional organization while driving.

Persona 2: The Tech Enthusiast

About: A software developer and early adopter who expects his vehicle to function as a seamless extension of his digital ecosystem.

Goals: Seeks deep system integration and UI customizability to create a personalized, immersive driving environment.

Challenges: Low tolerance for hardware latency or "walled-garden" software that limits device connectivity and advanced features.

process start

Ideation & Wireframes

Leveraged competitive analysis and user feedback to architect a premium digital experience rooted in Helios’s core values of safety and intuitive luxury.

foundational framework

Design System

Built a modular design system to ensure consistency, scalability, and accessibility across the interface.

Aa

Geist mono

Aa

Geist

Regular

400

Medium

500

Semibold

600

Bold

700

sm

4px

md

8px

lg

12px

xl

16px

Aa

Geist mono

Aa

Geist

Regular

400

Medium

500

Semibold

600

Bold

700

sm

4px

md

8px

lg

12px

xl

16px

Aa

Geist mono

Aa

Geist

Regular

400

Medium

500

Semibold

600

Bold

700

sm

4px

md

8px

lg

12px

xl

16px

design outcome

A Safety-First Driving Experience

In a high-risk, in-motion environment, the system reduces cognitive load through clear hierarchy, predictable layouts, and immediate system feedback, allowing drivers to complete tasks with minimal distraction.

Built around real driving constraints, interactions prioritize speed, clarity, and confidence through large touch targets and glanceable UI patterns. The following flows highlight how these decisions improve usability in critical moments.

Navigation & Hierarchy: Prioritized navigation and search within the driver’s primary line of sight, allowing users to initiate directions quickly while minimizing visual distraction.

Navigation & Hierarchy: Prioritized navigation and search within the driver’s primary line of sight, allowing users to initiate directions quickly while minimizing visual distraction.

Navigation & Hierarchy: Prioritized navigation and search within the driver’s primary line of sight, allowing users to initiate directions quickly while minimizing visual distraction.

For the full experience with auto-playing walkthroughs, view on desktop.

Navigation & Hierarchy: Prioritized navigation and search within the driver’s primary line of sight, allowing users to initiate directions quickly while minimizing visual distraction.

© 2026 · Julia Cagnina

© 2026 · Julia Cagnina