Senior UI Designer | UX Group, Fujitsu Ten Corp. of America | 2012-2013
AXIS Prototype 17CY
AXIS is the next generation of IRIS Concept Automotive HMI. It was a HMI concept proposal to a Japanese automotive company in 2013 and was acquired for further development.
The team’s goal was to design a infotainment system that far surpassed the user’s day-to-day needs while providing drivers simple and easy-to-use controls and useful information while driving.
Role & Responsibilities
Collaborated with the Interaction Designer to conduct contextual user research and analyzing valuable outcome user data.
Created a unique user interface to increase brand differentiation while maintain the Toyota mood to be familiar to current users.
Worked closely with engineers throughout prototype development.
Research & Findings
10 drivers, 1 hour driving observation
The design process began with an extensive two-week contextual user research process, in which we got 1,500 direct quotes, comments, and complaints. Through the Affinity process, we sorted and grouped all the insights into common categories. There were total 24 focus areas that were identified for us to guide the project.
Users are very critical about organization and struggle with system complexity and redundant features.
"My mother has a Lexus, the touch screen is overwhelming, complex and tough to follow logic."
"I don't like that there are two places to do the same thing."
"My wife's car is not organized. It's like someone just threw the buttons all over."
Users often stay on one screen and only leave for quick tasks, such as changing the radio station, but always went back to their favorite screen.
"I mainly stay on the HOME screen."
"Audio (screen) is the answer to everything."
"I like that like I can use Bluetooth audio and map at the same time."
Users are concerned with their safety when having to take eyes off the road.
"It's good to have information at your fingertips... but it can be a distraction."
"By the time you see it, you are dead. It's hard to read."
"I really like that I have turn-by-turn and the next turn is highlighted yellow."
Users are confused and with poorly designed interfaces and become frustrated when the system doesn't work the way they expected.
"My hands are too big. I always miss the button. It's really annoying. I just want to scroll (a list you actually can scroll )."
"I wish it worked just like my phone."
"I don't know why it's not working." (while pressing a phone icon to try to connect bluetooth)
*Our research identified 188 key solutions (improvement points) in operational and visual areas. I cherry-picked the top 4 solutions to which I contributed the most.
Operational Solution 01: Triangular Structure
We found that people need 3 things when driving: get information about their commute, access to entertainment, and the ability to contact people. If features are grouped by basic needs users always know where to go. Therefore, we categorized applications and features into 3 primary functions, Info, Media, and People. Drivers can jump across different functions simply by doing a two finger swipe. Due to the triangular structure, every screen is directly accessible from another.
Operational Solution 02: Multi-tasking Tools
From user research, we learned that drivers wanted to see different types of information at one time. In Axis, each function is displayed in fullscreen, allowing only one application's information to be shown at a time. We added multi-tasking tools that can be shown or minimized on top of the main screen to allow multiple functions to be performed on the same screen.
The Mini Controller
Allows Media or in-call information and controls whiling using the map. Users can hide the controller by swiping it to the left.
A dismissible multifunctional presets bar
Allows users to change stations, call a contact, or start navigation to a destination from any screen. Users can hide the presents by swiping down.
A hidden drawer for secondary functionality
Sources, Settings, and Devices Status are always available by swiping down from top when users need it.
Visual Solution 1: Create A Master Grid
Hierarchy of Information
Variations in text sizes helps users locate information faster, reduce glance time, and number of glances.
Find similarities between Media, Phone, and Info, rendering text display the same way to help users understand information faster.
Major controls/buttons for Info, Media, and People are located in the same position on the screen.
Visual Solution 2: Looks That Suggest Functions
People hesitate to interact with something when they are not sure how it functions.
Every button is designed to be user-friendly and approachable.
No small buttons in order to avoid accidental trigger.
Lists that span multiple pages show a truncated version of their last items, accompanied by a shadow in order to indicate they can be scrolled.
Textures are applied on parts that should be pulled/dragged.
Prototypes & Usability Test
10 respondents: 5 tech-savvy, 5 low-tech
By implementing and iterative cycle of "Test, Analyze, Do, then Test", the team was able to refine out a complete system, from which wireframes were created. The team then established a distinct, and cohesive visual identity for the project, forming a visual language of both image and motion that echoes on contemporary UI conventions to intuitively and transparently teach and guide the user through use.
© ALEXIA YANG 2018