An infotainment system that involves multiple platforms including centerstack, mobile, tablet and a full design cycle aiming to provide ultimate user experience of $100k high-end vehicles
Overview
Led one of the domain app design of Rear Seat Entertainment system for Cadillac Escalade and other associated lower end brands. The system includes the app located on the touch screen in the front and is used to control media playback for embedded screens in the rear or on mobile devices. Our main target users are parents with young children.
While they are driving, they can play movies, songs for their children in the back. In addition, I also designed the accessibility features of the system for visually impaired customers. Although the population is only 1-2% of the overall target users, I feel very proud of myself because the design can actually make a difference in people’s life. Apart from the design, I created a couple of 300-500+ pages design documents for each of the apps. It serves as a design guideline for directing how the interactions flow works and detailing design impacts on hardware / software changes behind. It also helps clear confusions and avoid constraints with engineering, legal and graphical team and ensures the design meeting the latest trend and standard in the automotive industry.
Role
Lead UX/UI Designer for domain app, Individual Contributor
Time
April 2015 – July 2016
Not doing for the sake of doing but why?
Pre-design research
Information Collection
Identified resources and design limitations to avoid potential pitfalls.
Identified the exact features from a master feature list that you are responsible for redesign.
Benchmarking & Research
Documented the “language” used by each benchmark (e.g., labels, messages, icons, etc.)
How each brand executed their components with regard to their brand perspective across the industry (similar but what else can be done)
Takeaway
Safety is the priority
No line icon, always solid and high contrast.
Standardized and common icons, no ambiguity and second-guesses.
Less is more
Reduce visual clutters
Number of steps to the primary goal matters
<5 steps while driving
Leverage technology
old fashioned design hard to change (no mistakes/trail and error allowed while driving)
VUI supports tasks with significant steps (>1 or 2 taps)/time to accomplish
Connected components
HUD (e.g., navigation, over driving limit, dynamic than physical meter)
Cluster (frequent, small screen, steering wheel needs e.g., no lyrics)
Centerstack (less frequent, primary infotainment e.g., lyrics)
Big company vs Small company
What problem?
Real Needs at big company
Solve problems while uncovering hidden user needs
Save money while maintaining good interfaction flow
1. Ease multi-devices configuration and connection experience
Call you recall the process for connecting your phone to your vehicle via bluetooth? Well, it can only get worse and more complicated.
1. Money saver
How to solve three screens with two video streams (necessary to have 3, what limitations)?
A thorough design process meaning for whom?
Understanding user and their interactions
Scenarios
Listed and described all user scenarios based on the identified personas for the given feature
Evaluated the identified user scenarios as:
Key (must have)
Edge Cases
Nice to Have
Challenge 1
Ease multi-device configuration and connection experience
Wireframe Flow
Media Manager App enables parents with vehicles which does not have rear screens to still be able to control media playback for their children in the back seat.
Partial Screens
Keep it consistant across various apps.
Design Walkthrough
Collaborated with a number of stakeholders and design peers to start iterating design and walked through the flow as if they were the actual users.
Challenge 2
Money saver for high-end model with rear screens
Problem Illustration
State Chart
Creating state charts (system flow) helped me better understand how the front interfaces talked with backend or hardware components.
Whiteboard Sketching
Brainstormed with design peers on key sreens with a focus on “must have” ranked scenarios
Wireframe
Rear Seat Entertainment App enables parents with vehicles equipped with rear screens to monitor and control media playback for their young children.
Ready to let users make some decisions?
Usability testing
Usability Testing
Lack of testing vehicles and it’s not safe to actually drive on the road
Documenting
Created the “Forms and Behavior” specification to document design interactions as well as system requirements and behaviors.
Final Look
- The final look is finally ready to be revealed as most of the car companies design cars three years ahead.
What I’ve learned
- A lot of limitations and variances for you to learn before designing for anything.
- Emotional and impactful for how small of a design can change people’s life (visually impaired…) and drivers on the road (less crash because of familarity and full attention to the road).
