Alexia Yang
Alexia Yang
Designer | Los Angeles, CA
 

AXIS—Automotive Multimedia Prototype

 

About the company

Fujitsu Ten Corp. of America is a leading provider of high-quality automotive audio, video, navigation and control systems. In 2011, The UX Group was formed to begin innovative product development specifically targeting the North American marketplace.

role

User interface design, interaction design, visual design

timeline

June 2012 - April 2014


The challenge

Following the positive feedback garnered by the IRIS Concept Automotive HMI, Fujitsu Ten’s UX Group was encouraged to iterate on the core concepts of IRIS and propose an all new HMI concept to Toyota. It was the perfect opportunity for our group to start building a library of valuable user data in order to support or otherwise inform the decisions we had made during IRIS’s development. Partnering up with an Interaction Designer, I was involved in all aspects of the project, from performing research and usability testing to creating conceptual models, user flows, and wireframes, with a focus was on the design and final production work of the user interface.

 

design Process overview

process-axis.png

— discovery —

 

To kick off the project, the team spent the a period of roughly three months figuring out our target userbase and trying to understand their motivations and behaviors when driving.

 
 
DSC_0006.JPG

Market Research

10 Toyota owners

To start, we began interviewing our Toyota owning colleagues in order to get an initial sense of out what drew them towards the Toyota brand, and how the vehicle fit into their unique lifestyles.

User Research

20 DRIVERS, 2 HOUR DRIVING OBSERVATION

We also recruited a diverse group of around twenty Southern Californian drivers to put through an extensive two-week contextual user research process. The group consisted of users of various age and technological expertise and included a wide variety of different types of drivers, from heavy drivers with long commutes to those who use their vehicles to run errands around town. From these users, we were able to pull roughly 1,500 direct quotes, comments, and complaints.

 
diagram.jpg

Affinity Diagram

24 focus areas, 188 design ideas

We then negotiating the disparity between a users’ self-perceived needs and the problem they actually sought to solve using the Affinity process, sorting and grouping all the insights into common categories. We identified a total of 24 focus areas to guide the project in addition to 188 improvement points to solve the problems facing North American drivers on a daily basis.

 
 

Persona

The “Janes”

A family of personas were created to give us a clearer image of the “super user.” The personas represented an amalgamation of the users we interviewed and their common needs. Combining design solutions and the daily lives of the “Jane Family”, we thought of new ways for users to interact with their multimedia systems.

 
bkgd-gray.png

— principles —

 

Based on the findings of our discovery process, we concluded three key design principles to guide us through out the project.

 
 

Approachable

Toyota is about building reliable transportation for the family. This means our system should feel familiar, friendly, and inviting to interact with for all members of the family.

Adaptive

The system should utilize the data that is available to it, sorting and filtering information in order to suggest the most likely things that the user are trying to accomplish and to guide their actions through their tasks.

Transparent

The system should be designed and structured in the way that the logic paths and its capabilities are understood by the users.

— few key implementations —

 

1. Simple Structure for Quick Access

 

From our research, we learned that users are very critical about system organization, and struggle with system complexity and redundant features. In most systems they use, each task requires multiple interactions to complete because each individual step along the process has its own discrete screen, leading to a segmented experience. To solve this particular problem, our first step was to remove the traditional top-level “home” page, where users normally begin their tasks and branch out to other features/pages, and make the most used functionalities directly accessible from every other screen.

 

“I feel like there are more buttons I have to press. It works but I don’t feel it’s that fast.”

“I really like that my car is organized. It’s grouped and simple. Everything here is radio-related, everything here is map-related, everything here is climate-related.”

 
 
axis- swipe.png
  • Triangular Structure

We found that North American drivers need three things when driving:

  1. They need information about their commute

  2. They need access to entertainment

  3. And they need the ability to contact people 

We proposed that if features are grouped by basic needs, users always know where to go. Therefore, we categorized our applications and features into three primary functions, Info, Media, and People. Each of these functions has a dedicated, full screen interface, allowing only one application's information to be shown at a time. We integrated multi-touch gestures to replace physical buttons, utilizing familiar gestures such as a two-finger swipe in order to swap from one function to another. We conceptualized the interface as a "triangle”, with each face representing one of the primary functions, and in doing so we ensured that every function is directly accessible from another.

 
 
 
axis-panel.png
  • Hidden System Panel

We designed a System Panel as a universal asset applicable to all three functions. It is always available by swiping down from top when users need it, and discreetly nestles itself on the top of the screen when it is not in use. It provides various features related to the particular function screen the user is using. For example, the System Panel allows users to select a different media source (FM/AM Radio, iPod, etc) when the system panel is opened on Media screen. The sources are also sorted and positioned automatically based on the user’s usage history, allowing for easier access based on a driver’s behaviors.

 

 

2. Multi-Tasking Tools

 

Our research also showed that drivers often leave their HMIs on one screen and only leave it to perform quick tasks, such as changing the radio station. We also found after these tasks were performed, they almost universally went back to their “favorite” screen. The back and forth was shwon to be a major distraction for drivers who multi-task while driving. In response, while the triangular structure allows quick access to the three primary functions, we designed two multi-tasking tools that can be shown or minimized on top of the main screen to allow cross functional multi-tasking to be performed from elsewhere in the system.

 

“I want a high tech screen… Good display, smooth transitions, but not cluttered with useless features”

“I just want to get things done.”

 
 
axis-mini control.png
  • Dismissable Mini Controller

Available on the Info screen, the Mini Controller provides media/in-call information, and allows for simple control of these features while using the map. When not in use, the users can hide the controller by swiping it to the left.

 
 
 
axis- presets.png
  • Dismissible Multi-functional Presets Bar

We affixed a Preset Bar on the bottom of the screen, and made it available on every screen, allowing for quick access to color-coded presets of radio stations, contacts, and destinations. These preset buttons allowed users to change radio stations, speed-dial contacts, or start navigation to a destination from any screen. Like the Mini Controller, users can hide the presents by swiping it down.

 

 

3. Consistent Layout with Hierarchy of Information

 

We also found that users are concerned with their safety when having to take their eyes off the road. In order to reduce glance time and the overall number of glances required, a “master layout” was created to apply to all three function screens. In enforcing a consistent layout on all three screens, we ensured that users could could quickly seek out the information they needed on any screen.

  • The main controls are on the left for easy access by the driver. Moreover, the main controls of each function are located in the same position on each of the screens. These buttons also are positioned to line up with the buttons on the Mini Controller, to enforce a consistent location for these controls and to help users build muscle memory.

  • We also tried to group similar information displays between the Media, Phone, and Info screens, and rendered their displays in a consistent fashion. In doing so, the slight variations in text size and coloration was used to help users understand information and locate information faster.

 

“I like various controls to be grouped logically.”

"It's good to have information at your fingertips... but it can be a distraction."

 
layout.png
bkgd-gray.png

— DEsign —

 

Approachable, Warm, & Friendly

 

We noticed one of the biggest pain points for users was that they were confused with poorly designed interfaces and would become frustrated when the system doesn't work the way they expected. To make matters worse, people also hesitate to interact with something when they’re unsure of how it works. We were challenged with creating a unique, approachable user interface that increased both brand differentiation while maintaining a friendly Toyota feel.

 
 
style%2Bmood%2Bboards.jpg

When coming up with an overall look for the system, I decided to use realism as a visual foundation. I believe realism promotes clarity which brings the users confidence when interacting with something unfamiliar to them. In addition, I wanted to use visuals and realism to visually indicate functionality, such as:

  • Visually distinct buttons vs. non-buttons.

  • Lists that span multiple pages showing a slightly obscured version of their last item, accompanied by a visual shadow in order to indicate the list can be further scrolled.

  • Textures applied on parts that can be dragged or pulled.

Also, where other multimedia systems focus on a dark, sleek and luxurious look, I bright used colors to serve 2 purposes: to enhance the approachablity of the system while also clearly highlighting the different functionalities of it.

 
 

 

Media

 
media_usb_artist.png
media_usb_selected_1artist.png
media_fm_live_radio.png
Axis_Media_Sources.png
 
 

 

People

 
people_history.png
people_in_call.png
people_contacts.png
people_alpha_jump.png
 
 

 

Info

 
Screenshot_2019-02-15-20-39-13.png
info_bkgd_ETA.png
Screenshot_2019-02-15-20-47-24.png
info_search_result.png

— Validation —

 

Prototypes & Usability Test

10 RESPONDENTS, 60 min individual in-depth interviews

Working with a third party research company, we made and provided a high-fidelity, semi-interactive prototype that ran on a commercially available touch-screen tablet for testing. 10 respondents were recruited: 6 males and 4 females, between 20-60 years old, all smartphone owners with 2010 or newer car models with a factory touch screen HMI. The test combined quantitative and qualitative methods to achieve a rich understanding of:

  • Overall usability and targeted task usability

  • Task completion rates

  • User preferences and discoverability of key UX components

  • Error rates during task completion

  • Perceived ease of use

From these tests, we were able to validate our findings and were able to see when and where some of our designs or assumptions were breaking down. Using this information, AXIS went through some additional revisions in order to address what we had learned.

bkgd-gray.png

— Result & impact —

 

Overall, the AXIS system was well received by respondents. The first impressions of the GUI were positive that it looked easy to use. After 19 tasks, perceptions of overall ease-of-use remained positive with no significant change. Though there were some minor setbacks along the way, AXIS was proposed to a Japanese automotive company in 2013 and was acquired for further development.