screen designs of the home pages for a vehicle center display and mobile app

Designing an In-Vehicle Experience for the Daily Driver

February 2024 — April 2024

For an automotive design course, student teams were tasked with designing the screens for a luxury, performance, or mass market vehicle — culminating in a project presentation to stakeholders at General Motors. Wanting to focus on a broad customer segment, my partner and I chose to design the in-vehicle displays for a mass market vehicle.

In March 2025, I revisited this project with a fresh perspective, redesigning it to enhance the user experience and elevate the overall aesthetic. Additionally, I reworked the designs for the Chevrolet Equinox to create a more polished final product.

Screen Specifications

The designers at General Motors provided the screen specifications for the driver and center displays, defining the screen dimensions and resolution. Based on these specifications, I defined the column grid for each display to establish structure and ensure consistent alignment.

Driver Display
screen specifications for the driver display
Center Display
screen specifications for the driver display

Home & App Selector

Wireframe
wireframe of app selector screen

Insufficient Landing Page

The app selector screen didn't provide a compelling experience as a landing page for the center display.

Hi-Fi Mockup
high-fidelity mockup of home screen

Adding Home Screen

I added a home screen to provide quick access to media and navigation widgets.

high-fidelity mockup of app selector screen

Improving Spacing

I adjusted the margin and number of columns in the center display grid to improve spacing.

2025 Redesign
high-fidelity mockup of home screen

Adding Visual Interest

I added depth and visual interest through the use of gradients, opacity, and soft shadows.

high-fidelity mockup of app selector screen

Switching Icon Libraries

I updated all designs with icons from a duotone icon library, using custom automotive icons as needed.

Media App

Wireframe
wireframe of media app

Overcrowded Layout

The screen originally designed by my partner was overcrowded with playlist options.

Hi-Fi Mockup
high-fidelity mockup of media app

Refocusing the Layout

I redesigned the app to place a primary focus on the currently playing song and media player controls.

2025 Redesign
high-fidelity mockup of media app

Improving Alignment & Controls

I added a dropdown to change the content category and incorporated shuffle and repeat controls.

high-fidelity mockup of media app while selecting audio source

Selecting Audio Source

The dropdown menu for the source selector includes icons to provide clear visual cues.

Navigation App

Wireframe
wireframe of navigation app while en route to a destination

Unclear Icons

We received feedback that the route directions button  was unclear and that the menu button could be mistaken for it.

Hi-Fi Mockup
high-fidelity mockup of navigation app while en route to a destination

Adjusting Button Icons

I removed the menu button to eliminate confusion and selected a clearer icon for the route directions button.

2025 Redesign
high-fidelity mockup of navigation app

Adding Navigation Controls

I added a settings button and controls for adjusting the zoom level of the map.

high-fidelity mockup of navigation app while en route to a destination

Improving Color Harmony

I refined the color choices for the quick action buttons and route overview, as well as created a custom map style.

Vehicle Controls App

Wireframe
wireframe of vehicle controls app

Overcrowded Layout

The screen I originally designed was overcrowded and lacked many vehicle controls.

Hi-Fi Mockup
high-fidelity mockup of general controls within vehicle controls apphigh-fidelity mockup of closure controls within vehicle controls apphigh-fidelity mockup of light controls within vehicle controls apphigh-fidelity mockup of driver assistance controls within vehicle controls app

Organizing Controls Into Tabs

We expanded the available vehicle controls and organized them into tab groups, with my partner incorporating controls for exterior lighting and driver assistance systems.

2025 Redesign
high-fidelity mockup of closure controls within vehicle controls apphigh-fidelity mockup of windshield controls within vehicle controls apphigh-fidelity mockup of light controls within vehicle controls apphigh-fidelity mockup of driver assistance controls within vehicle controls app

Revamping for the Chevrolet Equinox

Rather than designing for a concept vehicle, I reworked the designs to align with the features and physical controls of the Chevrolet Equinox (e.g.,  power liftgate, rear windshield wiper, driver assistance systems). To improve usability, I replaced the toggle switches with more intuitive toggle buttons for the hood and liftgate, added info buttons for each driver assistance setting, and refined usage of the accent color to reduce visual fatigue.

Climate App

Wireframe
wireframe of climate app

Overcrowded Layout

The screen originally designed by my partner was overcrowded and lacked clear visual hierarchy.

Hi-Fi Mockup
high-fidelity mockup of climate app

Rearranging Controls

We adjusted and rearranged the controls to create a stronger layout and clearer visual hierarchy.

2025 Redesign
high-fidelity mockup of climate app

Improving Layout & Controls

I added driver and passenger seat visuals and placed seat-specific controls nearby, moving global controls to the bottom row to separate them from dual controls.

Pet Mode

Wireframe
wireframe of pet mode screen for passersby

Prominent Climate Display

The interior temperature is displayed prominently to reassure passersby of the pet's safety and comfort.

Hi-Fi Mockup
high-fidelity mockup of pet mode screen for passersby

Preventing Accidental Interference

I hid the navigation bar to prevent accidental input from the pet and added a settings button to adjust the temperature.

2025 Redesign
high-fidelity mockup of pet mode app controlshigh-fidelity mockup of pet mode confirmation modalhigh-fidelity mockup of pet mode screen for passersby confirming enabled statushigh-fidelity mockup of pet mode screen for passersby

Refining the User Flow

I created a dedicated screen for pet mode settings, allowing users to select a pet avatar and set a phone reminder. When a user opts to enable pet mode, safety information is displayed that warns the driver against leaving a child unattended.

Driver Display

Hi-Fi Mockup
high-fidelity mockup of driver display

Essential Driving Information

2025 Redesign
high-fidelity mockup of driver display

Applying Updated Styling

Mobile App

Hi-Fi Mockup
high-fidelity mockup of mobile app

Cross-Channel Experience

We designed the home screen of a mobile app to pair seamlessly with the in-vehicle experience.

2025 Redesign
high-fidelity mockup of mobile app

Revamping the Home Screen

I applied the updated styling and revamped the layout to enhance focus on core controls.

Final Designs

high-fidelity mockup of home screen
high-fidelity mockup of app selector screen
high-fidelity mockup of media app
high-fidelity mockup of navigation app
high-fidelity mockup of navigation app while en route to a destination
high-fidelity mockup of closure controls within vehicle controls app
high-fidelity mockup of windshield controls within vehicle controls app
high-fidelity mockup of light controls within vehicle controls app
high-fidelity mockup of driver assistance controls within vehicle controls app
high-fidelity mockup of climate app
high-fidelity mockup of pet mode app controls
high-fidelity mockup of pet mode screen for passersby
high-fidelity mockup of home screen
high-fidelity mockup of app selector screen
high-fidelity mockup of media app
high-fidelity mockup of navigation app
high-fidelity mockup of navigation app while en route to a destination
high-fidelity mockup of closure controls within vehicle controls app
high-fidelity mockup of windshield controls within vehicle controls app
high-fidelity mockup of light controls within vehicle controls app
high-fidelity mockup of driver assistance controls within vehicle controls app
high-fidelity mockup of climate app
high-fidelity mockup of pet mode app controls
high-fidelity mockup of pet mode screen for passersby

Lessons Learned

This project presented excited new challenges than I had previously encountered as a designer. Historically, vehicle controls have relied on physical, tactile controls that many users still prefer. However, as more automotive companies transition to touchscreen-based controls to reduce costs, designers must translate traditionally physical controls into an intuitive digital experience. This project reinforced the importance of prioritizing usability amidst evolving industry trends, ensuring users feel confident and in control of their experience.