Cadillac AR System

navigation on the cluster for 2021 Escalade
Role

Design Lead

Team

3 designers

Client

General Motor

Timeline

2018-19

Overview

"Augmented Reality had been a topic that everyone talking about, for a phone in the pocket. We want to design an in-car experience showing it's real-world applications."
‍

My role:

  • Design and document 90% of the User flow and interaction;
  • Lead a team of 2 designers;
  • Work with the research team to iterate based on users' feedback;
  • Work with PM, PJM, Dev, QA to deliver the final product
See Website

Process

Learn

AR technology, limitation and use cases

Define

Key features, states and happy path

Iterate

design with technolofy

Learn

Ground research about

AR Technology

To design for it, I need to understand what technology we will be using in this program. I met with the tech team who is going to build this, and understand their plan.

The car will install an extra-wide camera in front, capturing a video. Then project it on the cluster, with a render of navigation information.

The major data they plan to use come from two pieces: Camera, and map data.

Analysis the specialty for

AR in Car

To make the technology useful, we need to understand the technology in an in-car environment, which means, I need to answer the following questions:

If the reality is what users already see, what kind of augmentative will help them the most?

What information is better to show with this technology instead of current UI on the center stack?

Drive ourselves around multiple routes for

Use Cases

To make sure that we consider as many cases as possible, we had been using the following methods:

  1. Go through all types of road classes, turn types based on my experience;
  2. Work with data team to learn some unique cases;
  3. Drive around country and city, recording videos

Define

From what we learn, worked with the customer and PM for

Key Features

I use card sorting method to categorize most of the cases I knew into the following type:

  • Start - This is the state when the car is not even on the route yet, like circling around in a parking lot
  • Info - This is the state when the car is pretty far away from the turn
  • Prep - This is the state when the car is getting close to the turn
  • Action - This is the state when the car is already seeing the turn
  • Approaching - This is the state when the car is approaching the destination without anymore turn
  • Arrival - This is the state when the car has arrived already

And for those states, I did some brainstorming with the team to define key features as:

  • Lane level guidance - to tell the driver which lane should he/she stay/change to
  • Turn direction - to tell the driver which road he/she needs to turn into
  • Highlights - to help the driver find important points, like destination, parking...
Use wireframes and flow to go through

Happy Path

I made wireframes for each state, trying to cover all the key features. While also define the way of getting in and out AR mode on cluster.

Iterations

Learn based on the real build

Design vs Reality

The iteration processes, in this case, were triggered a lot by the technical team. This is not ideal, but for a reason - the feature is challenged to the tech team to build and test.

However, we still tried our best to iterate the design by interviewing users with prototypes.

Iteration example

U-turn Arrow

The turn arrows are not good at representing extreme angels, including something like a U-turn.

Because for those cases, the 3D arrow doesn't look like pointing to front or back.

Iteration example

Approaching State

After the user finished the final turn, but before arrival, I found the drivers are looking for parking already, therefore I was thinking of adding passing by parking to help them.

Result