Context

The GM Themes app is an in-vehicle app designed to allow
users to customize the infotainment system interface of their
GM vehicles.

This case study focuses on the redesign of the GM Themes app, aimed at providing users with a more personalized and visually appealing dashboard experience.

The work focused on simplified customization, and an improved
in-vehicle experience whilst using the Themes app.

It involved extensive user research, iterative prototyping, and usability testing, leading to a more intuitive and visually appealing interface that better meets user needs across all the main brands at GM.

So, what’s the story here?

The objective of the redesign project was to address challenges such as limited theme selection, complex customization processes,
and performance issues, which impacted user satisfaction and engagement.

The 2024 Cadillac Lyriq displaying the “Tagged” theme

My Roles + Discovery

  • Domain, field research, and competitive analysis – Dove deep into existing domain knowledge, and uncovered customer insights through extensive field research and competitive analysis (both digitally, and in-vehicle)

  • Discovery - In order to familiarize myself with the Themes domain, I gathered information from a broad array of internal sources, from conventional experts such as other domain owners, to first-hand usability testing in existing vehicles (both General Motors and competitors).

  • Discovery pt. 2 - The amount of user research we already had at General Motors was absurd. I easily spent a solid month just going over data we had accumulated from internal and external users.

  • Ideation and visioning – Synthesized key findings from qualitative research data, and converted them into low and high fidelity designs.

  • Design execution & experience strategy – Created wireframes, mockups, and high-fidelity prototypes ensuring alignment with the feature/project goals.

  • Design execution & validation – Produced high-fidelity designs, prototypes, and detailed design specifications.

  • Leadership – Presented ideas internally and led design critiques within the team to drive decision-making. Documented and presented the ideas to higher management and product owners.

  • Implementation – Worked with a development team and contributed directly to QA testing, ensuring the successful realization of my designs.

Design Process

  1. User-Centric Design: Collaborated with users to prioritize features and enhancements based on their feedback and pain points.

  2. Iterative Prototyping: Developed wireframes and prototypes to test new designs and iterate based on user feedback.

  3. User Research: User research was conducted through interviews, surveys, and usability tests to understand user preferences, pain points, and needs related to infotainment system customization. Key insights revealed a desire for more themes, simplified customization options, and improved performance.

  4. Competitive Analysis: Analyzed similar apps in the automotive industry to identify best practices and areas for improvement.

  5. Visual Design: Created a modern and visually appealing interface with a wide variety of themes, wallpapers, and customization options to enhance user engagement.

  6. Simplified Customization: Refined the user interface and reorganized settings to make customization intuitive and user-friendly, with clear explanations and visual cues.

  7. Enhanced Preview Functionality: Developed an interactive preview feature that allows users to visualize themes in real-time on their vehicle's dashboard, providing a more accurate representation of the final look.

  8. Performance Optimization Conducted rigorous testing and optimization to improve app performance, reduce loading times, and address bugs and crashes.

  9. Usability Testing: Tested the app with real users to gather insights on navigation, theme selection, customization options, and overall usability.

  10. Data Analysis: Utilized app analytics to identify usage patterns, popular themes, and user feedback.

The rigorous steps we take from a-z. We start with UI feature planning and it ends with a final Human-Machine Interface sign-off.

We tested the app with real users and employees to gather insights on navigation, theme selection, customization options,
and overall usability.

Utilizing “benches” to emulate the applications in real time.

User Research

User research was conducted through interviews, personas, surveys, and usability tests to understand user preferences, pain points, and needs related to infotainment system customization. Key insights revealed a desire for more themes, simplified customization options, and improved performance.

  1. User Research: We gathered insights from GM vehicle owners via interviews and surveys to understand their needs and frustrations with the existing GM Themes app. Usability tests were conducted to observe user interactions and identify areas for improvement.

  2. Competitive Analysis: We analyzed competing infotainment customization apps to benchmark against industry standards, identify best practices, and uncover areas for differentiation. This provided insights into competitor offerings, feature sets, and user experiences.

  3. Usability Testing: Prototype versions of the redesigned GM Themes app were tested with real users to gather feedback on navigation, theme selection, customization options, and overall usability. This iterative process helped validate design decisions and address usability issues.

  4. Classification of Features: There was little agreement in how to classify in-vehicle features. We have Themes, Drive Modes, Experiences, and Ambient Lighting that all needed to either live by themselves, or deep link with others.

*For #4, please see the reports below

Themes Mental Model Report (Interviewing 9 participants)

“Themes bring a sense of cohesion to physical items or even life experiences”

  • 7/9 described themes as a cohesive message or category that explains how individual things relate to one another:

    • “It’s a bunch of things that make sense, that are in a way related. Like the same color or the same topic.” — P1

    • “To me it’s just what's going on in the background that people may want to get across.” — P7

  • 2/9 described overarching themes in their personal lives:

    • P5 on getting a new pet: “It’s a mix of both emotions and chapters of your life. It overlays what you’re doing in the moment. ...Excitement toward purchasing a dog, starting a new chapter of my life. I’m really eager, excited. Now I have this new pet in my life that I have to take care of. It’s that excitement and the additional responsibility.”

    • “Another theme is someone’s values and beliefs — maintaining a healthy lifestyle. Maybe the theme is them working out on a regular basis. A rigorous workout routine relates to the theme of health and wellness.” — P4

  • Theme examples often revolved around arts & entertainment

    • When providing examples outside the vehicle context, 4/9 described themes within the Arts — books, movies, music, paintings.

    • 4/9 used entertainment-related examples of themes they’ve seen at parties or theme parks.

    • 3/9 described decorations as themes, including clothing and home or store décor.

    • 3/9 provided theme examples from digital products, including web design, phone wallpapers, and social media page themes.

Classification difficulty

There was little agreement in how to classify features

  • Only 1 feature had unanimous agreement. It was the one that exists today (drive mode for slippery roads).

  • Features had characteristics from more than 1 category, which made them difficult to classify:

    • I would classify this like 80% mode, 20% experience." — P8

    • "[Modes and experiences] funnel into each other. You can set a certain driving mode, which will eventually elicit an experience." — P5

  • Different aspects of each feature stood out to participants, which affected how they classified it:

    • P3 thought the 'Parking lot' feature should be standard (like a function) so she classified it as "something else." Others thought because it’s safety-related it was more of a mode.

    • P6 thought the 'Focus' feature was a safety-related mode. P1, however, imagined using it on long road trips, which made it more of a special experience.

    • P5 thought "the nature of what this [camping feature] is going for is an experience" because it goes beyond the car. P4 (who has Tesla’s camp mode) thought it was too "cut and dry" and not immersive enough to be an experience.

Evaluation Dimensions

Participants evaluated features along 4 dimensions

  • Frequency of use

    • Near-daily usage was expected for Routines. Experiences and Themes were thought to be used more rarely. Mode usage was situational and harder to evaluate.

  • Novelty

    • Out of the ordinary features were categorized as experiences. Simple modes, themes, and routines used standard functions. Complex modes and themes fell in the middle.

  • Complexity

    • Experiences included interactive and immersive functions. Themes were expected to be basic and simple. Modes and routines fell in the middle, because both included multiple functions grouped together.

  • Practicality

    • Routines and modes were thought to focus on practical features. Themes and especially routines were geared more toward entertainment or eliciting emotions like excitement and comfort.

Chart used for illustrative purposes
Based on qualitative interviews and card sort results

UXR Outcomes + Recommendations

Overall

  • For features with several functions that may blur the line between categories, consider the main intent of the feature and classify it accordingly:

    • Is it primarily functional? Visual? Involving multiple senses? Create a certain feeling for the vehicle’s occupants?

  • If a feature has several components, evaluate how perceivable each one is. In the stimuli, each function was clearly listed, but they may be far less apparent in a vehicle. The most perceivable aspects may lend the feature toward one category or another.

  • For combined themes/modes that don’t rise to the level of immersive experience, consider marketing the feature as affecting the drive (even if the effect is only felt on the driver) and label it a mode.

  • Robust, immersive, unique features may not need to be called “Experiences” in the UI, but they were thought of as different than a traditional mode. Consider highlighting them differently even if they fall under the Mode or Theme umbrella.

Category-related questions

  • Experiences: If customers think of experiences as new, exciting, and unique, should that label apply to features we expect to be used often or for a long time or should it be restricted to special occasion features?

  • Themes: This term is already thought of as wallpaper and ambient lighting. Should these 2 features be grouped in the UI? Are there other color/ambiance features we could group in Themes?

  • Modes: While there is interest in combined themes and modes, should we provide simple (separated) themes and modes so users can mix and match? Would placing these closer to each other in the UI encourage adoption of each?

  • Routines: Most participants thought their preferred settings for functions like mirrors, seats, temperature, etc., weren’t dependent on where they were going. Could the system suggest a simple, configurable routine customized to each driver?

Design Process

To address these challenges, GM undertook a redesign focused on the following:

1. Expanded Theme Library: Introduce a wider variety of themes and wallpapers, including seasonal themes, branded collaborations, and user-generated content to cater to diverse user preferences.

2. Simplified Customization: Streamline the customization process by reorganizing settings and options into intuitive categories, with clear explanations and tool tips for each feature.

3. Enhanced Preview Functionality: Implement a comprehensive preview feature that allows users to visualize how each theme will look on their vehicle's dashboard in real-time, with interactive elements and dynamic animations.

4. Regular Updates and Releases: Establish a consistent schedule for releasing new themes, wallpapers, and app updates, accompanied by notifications or alerts to notify users of new content.

5. Performance Optimization: Address performance issues by optimizing app performance, reducing loading times, and resolving bugs or crashes through rigorous testing and debugging.

Outcome: GM Themes App

While the Themes app at General Motors is beginning it’s rollout on it’s full fleet of vehicles.
It is currently only available on the 2024 Cadillac Lyriq

  • A selected card has a transparent background, which allows that card to display the background of the current theme.

  • There is an icon to the bottom right of the themes, if it comes with a custom playlist.

  • The “Add Themes” card allows users to purchase more themes.

A theme against the home screen display - adhering to contrast rules, natural sunlight, and overall visibility

One of the themes displaying across the 55” display

Designing Themes in regulation with contrast ratio rules

The 2024 Cadillac Lyriq displaying 4 default themes.

Learning outcomes (designing across all 4 brands takes consistency)

The redesign ensured that the app reflects GM's brand values and personality throughout the user journey. From the app icon to the login screen and interface elements, every aspect of the app was designed to reinforce GM's brand identity and evoke a sense of trust and familiarity among users.

Consistent use of brand elements such as logos, slogans, and imagery helped strengthen the connection between the app and
GM's broader brand ecosystem.

This was all done while constantly checking into each brand’s library in the design system, updating colors, typography, and everything in between.

Skills, Tools, Team/
Individual Contribution

Skills/Tools: Figma, Sketch, Axure, Jira, Photoshop, Illustrator. Accessibility, Contrast Ratio Testing, Branding, Design System, Consistency


Team Collaboration: Attended meetings, engaged in design tasks, addressed software queries via Jira, conducted QA testing when necessary, collaborated with stakeholders and fellow designers, and delivered presentations to the broader design team, consisting of over 150 members.

Individual:

  • Prototyped specification files and conceptualized GUIs using Sketch and Figma across multiple brands and design systems.

    Conducted bench-marking activities, conceptualized ideas, synthesized user feedback, and refined both design and documentation across Chevy, GMC, Cadillac & Buick.

  • Participated in a comprehensive design system library clean-up initiative across all 4 brands, streamlining files and assets to facilitate theming capabilities for our vehicles.

  • Created a collection of downloadable in-vehicle themes and experiences, empowering drivers to personalize display backgrounds, lighting, music, and audio effects.