Zifeng Tian
Lead UX designer & Design Manager
Made with

Cadillac Navigation System

38 inch curved screen for 2021 Escalade

Review of the intierial

"-Cadillac Escalades are known for being big vehicles, and the 2021 version will apparently get a screen to match.-" 

My Role

  • Lead design from beginning to end

  • Manage a team of 3 designers

  • Work with the team to deliver visual

  • Work with the research team to iterate based on users' feedbacks

  • Work with PM, PJM, Dev, QA to deliver the final product

  • Worked directly with GM internal stakeholders

  • Debated and proposed innovative UX solutions

  • Designed new documentation formats for better collaboration and understanding

Personas

The research team offered the following personas, after some survey and user interviews. I joined most of the user interviews.

Supermom: 34, Beauty Salon Owner, 4 kids

Hipster: 40, Recording Studio owner, single

Nearly Retired: 60, Construction CEO, single

I referred to them throughout the entire product development process.

Features

GM offered a requirement file, listing all the features they want. I went through the list, worked with PM to offer the following feedback:

Design vs Feature: e.g. "Need to have a direction arrow for each search result" vs "Need to help users understand the direction of each search result".

De-scope: I believe that for having a feature, we need a better reason than "It won't hurt", "We always have this" or "All others are doing it".

By going through and polishing the requirements, we had not only freed up more room for designing but also understood better for users' goals.

Set Direction
linked wireframes as happy path

linked wireframes as happy path

Happy Path

After we had agreed on the scope of features, I began to think of some happy paths. The reason I did this first, is to focus on the key features, without spending too much attention on the frictions of user experience.

I reviewed and iterated on 3 different paths I came up, with the team until the whole team has the same vision.

The happy path whole team agreed on had about 20 screens, and the final design document had included more than 300 screens.

prototype for testing the happy path

prototype for testing the happy path

Clinic

I worked with the research team and customers to test the happy path with our target users.

The goal is to prove the mental modal in the happy path, does offer an intuitive and enjoyable user experience.

Deliver Details
review process including the customers

review process including the customers

Process

It was really important to build trust with the internal stakeholders at GM so we would have the opportunity to push the limit on the design and interaction. I helped develop and implement a formal review process that enabled different audiences to participate and review the different stages of the design.

Below are some key points this process took care of:

Transparency: Try to include the team into the design process, meaning brainstorm together, show design as early as possible.

Different audience: PM needs to understand the flow fast, dev needs to cover most of the logical cases, QA needs to know what had been changed.

slanted screen

slanted screen

Unique Challenge

Laying out navigation on a system that used slant and a curved right edge was challenging and I needed to invent and test new UI patterns like word predictions in the search box.

example for wireframes

example for wireframes

UX Delivery

Flows

Define the relationships between different screens, interactions

Screen Descriptions

Define the cases on one screen, spec for UX

Change Log

Screenshot of the changelog, and link to the real page

example for mockup

example for mockup

UI Delivery

Key Screens

This is to present and get feedbacks

Visual spec

This is to include all details for implementation

Library structure

This is to help designers to avoid manual mistakes

example for motion design

example for motion design

Motion Delivery

Curve Definition

This is to spec different speeds for the animation, so the dev team can reuse them for most of the animation.

Global Motion

Those are the motion method that can be reused in multiple locations.

Specific Motion

Those are the motion for some special cases.

Iterations

After we built the product, I worked with the research team to run multiple usability tests, then iteration base on them.

Not all can be accepted easily, but here are some examples.

prototype for previous design

prototype for previous design

Previous

Task: Open [favorites] during Active Navigation:

  1. Tap on back to see level one/two
  2. Tap on [favorites] 

Finding from user research:

 the back button is hard to find, most users scroll to look for favorites. This finding is applied to all tasks that 

prototype for proposed design

prototype for proposed design

New Proposal

Task: Open [favorites] during Active Navigation:

  1. Scroll to find [favorites]

  2. Tap on [favorites] 

"We have taken this to heart with the all-new 2021 Cadillac Escalade, which offers luxury infotainment the way it should be experienced."
said Craig Zinser, director – infotainment and displays at General Motors
60
NPS score
90
SUS score