PROJECT

Infotainment Apps + Design System

+Design System

Infotainment Apps

Role

UI/UX Designer

Duration

2012-2015

Improving the second generation CUE - Cadillac User Experience infotainment system, that includes navigation software, vehicle controls, connected audio integration, and more.

Objective

Overview

2016 Cadillac CT6 infotainment systems included

  • 12-inch digital instrument cluster

  • 3x7 head-up display

  • 10-inch HD display in the center console

  • Two 8.-inch displays in front of the rear passengers (RSE)

  • touchpad

This model was set to become the company's flagship, featuring the latest technology, so it was essential to refresh the infotainment UI to match its cutting-edge status. While the framework was built on the first-generation CUE system, numerous new features were added, and significant improvements were necessary to elevate the user experience.

  • the framework needed to be rebuilt to accommodate a larger 10-inch display, up from the previous 8-inch screen. This ensured the UI took full advantage of the expanded screen real estate while maintaining optimal functionality and user experience.

  • the graphics required a fresh, modern update to align with the vehicle’s advanced technology and premium design.

  • numerous new applications needed to be added to the framework

  • as the system rapidly expanded, it became clear that a design system was necessary to efficiently manage the growing number of assets, components, and styles, ensuring consistency and scalability across the UI.

2016 Cadillac CT6

The development of a complex in-vehicle infotainment system typically takes around three years and involves extensive cross-functional collaboration among designers, engineers, researchers, software developers, and suppliers. While most roles are clearly defined, there is often significant overlap, with responsibilities shared across teams and lines between functions becoming blurred to ensure a more integrated and cohesive development process.

Target Hardware

10-inch Center Stack display

There were 3 product designers directly involved in developing the UI for 2016 Cadillac CT6

  • Digital instrument cluster and iconography

  • Head-up display and seats/massage app for rear screens

  • Center Stack display, remaining apps for Rear Seat Infotainment (RSE), and touchpad animations (my role)

A team of engineers - each application was based on a specification document that included wireframes, functionality, constraints, and other relevant information.

Software Development and Integration – multiple, non-GM suppliers

8-inch RSE display

Team

  • designing visual content based on wireframes and specifications

Develop

  • collaborating directly with suppliers responsible for software development and integration, which involved daily phone communication with multiple vendors working on different aspects of the system. All infotainment components were developed by external suppliers. Many of these suppliers were based outside the U.S., which added to the complexity of coordinating and integrating efforts across teams.

  • collaborating with feature owners, engineers (GM)

  • accounting for language translations to ensure seamless user experiences

Detail

  • iterations and refinement

  • conducting ride tests to evaluate visibility and usability under various conditions, including nighttime, bright sunlight, snow, rain, and fog

  • reviewing graphics at all stages of development and participating in both lab and in-vehicle reviews

Process

  • 64 Illustrator files

  • over 2240 exported png assets

  • 200+ layouts

  • 12 animations (touchpad)

Tools

Photoshop, Illustrator, After Effects

my areas of focus

Iterations

Reviews

Testing

  • 23 applications (Center Stack)

  • 7 applications (Rear Seat Infotainment)

  • Framework

  • Design System

From the very beginning of the project, I was involved in various capacities in all stages of the development. The success of the system relied on the collaboration of numerous teams and individuals. While many tasks and activities were completed through collective teamwork, there were also individual responsibilities that played a crucial role in contributing to the overall result.

Responsibilities

*Due to General Motors NDA, some visual materials from this project are purposely blurred or altered. For more information, do not hesitate to contact me.

Refinements

+ Design System
Infotainment
2016 Cadillac CT6

Deliver

  • managing my own workload and deliveries, supplier's software deliveries timing in accordance with meeting the milestones of the overall vehicle development.

Discovery (team effort)

At the time this project was underway, each designer was responsible for every aspect of their work. The process began with in-depth research to understand customer and market needs, followed by close collaboration with engineers. During this phase, designers were very actively involved in creating intelligent User Experience.

  • Ideation, mood boards, proofs of concepts, and demos to communicate ideas and expectations.

  • creating personas, user scenarios

  • benchmarking

  • paper prototyping

  • user testing

Define (team effort)

  • identifying and defining the problem

  • establishing the scope and goals of the project

Design

  • developing framework - creating multilayer layouts and templates. The infotainment system for the 2016 Cadillac CT6 was based on first-generation CUE wireframes that were created for an 8-inch display. The content needed to be adapted for a 10-inch screen. Separating different aspects of the UI made it easier to make the design more accurate, and easy for software developers to interpret

    • high-fidelity graphics

    • text

    • text fields (provided for translations)

    • graphic containers

    • touch areas

    • hover states areas where present

    • wireframes

    Despite each designer being responsible for their work on a specific part of the infotainment, the beginning phase of the design process was still a team effort, as the overall styling had to be developed cohesively for the entire system. Ensuring a unified design across the system required collaboration to establish consistent visual and functional standards that would be applied across all applications.

  • developing a design system (font guide, style guide, components) specific to this vehicle.

    In 2016, Design Systems were not yet the powerful UI development tools they are today. Since then, the UI creation process has become much more streamlined and efficient. To improve scalability and boost efficiency, I developed a comprehensive set of rules, guidelines, templates, and best practices. This approach helped streamline the design process, allowing me to build the UI for this vehicle much faster and more effectively.

    Even within a single brand, there are multiple display sizes that vary by trim level. The system needed to be seamless, intuitive, and user-friendly, enhancing the driving experience without causing distractions. Visuals were designed to serve a clear purpose, complementing text to provide concise, easily accessible information at a glance.