AXIS—Automotive Multimedia Prototype

Interaction Design, UI Design, Visual Design

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.

Context and challenges

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.

 
 

My role

Paired with a researcher, I was involved in all aspects of the project from conducting interviews to creating conceptual models, user flows, and wireframes, with a focus on the interaction and visual design as well as final production work of the user interface and semi-interactive prototype for usability testing.

Approach

  • Understand how drivers fit the infotainment system into their day-to-day commute and determine pain points by doing contextual inquiries.

  • Identify how we can make the whole system more approachable and the information more accessible for users while driving.

 

Process overview

Kick off

Getting to know the drivers

The team and I spent the a period of roughly three months figuring out our target user base and trying to understand their motivations and behaviors when driving.

 

Market research

10 Toyota owners

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

 
 
 

Two-hour driving observation

10 drivers of various age and technological expertise

We also recruited a diverse group of around twenty Southern Californian drivers to put through an extensive contextual user research process that involved observation during a two hour drive. The group 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.

 
 
 

Affinity diagram

24 focus areas, 188 design ideas

We then negotiated the disparity between a users’ self-perceived needs and the problems 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.

 
 

Our 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.

Problems to solve

System complexity, redundant features, and poor visual representation

 

We found that in most contemporary infotainment systems, the completion of any single task required multiple interactions because each individual step along the process had its own discrete screen, leading to a segmented experience causing high frustration and distraction.

 
 
“My mom has a Lexus; the touch screen is overwhelming, complex, and the logic is hard to follow.”
“I feel like there are too many buttons that I have to press. It works but I don’t feel that it’s fast.”
“I don’t like that there are two places to do the same thing. It’s just really confusing.”
 

In response to the problem of system complexity, we found users stayed on one screen while driving and only left it to perform quick tasks, such as changing the radio station, making a call, or looking at the map. After these tasks were performed, they almost universally went back to their “favorite” screen. The back and forth was shown to be a major distraction for drivers who multi-task while driving.

 
 
“I mainly stay on the Home screen.”
“I can do everything I need here (the audio screen). This screen is the answer to everything.”
“I have to keep coming back. It’s a cycle.”
 

Lastly, we noticed that users 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 were also reluctant to interact with something when they’re unsure of how it works.

 
 
“I didn’t know this Bluetooth icon was a button for the Bluetooth connection settings.”
“There are just so many buttons going on here.”
“The display is really ugly because it is all in boxes.”

Design principles

Based on the findings of our discovery process, we identified three key design principles to guide us throughout 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 things that the user is most likely trying to accomplish and 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.

 

A few key design solutions

 

Solution 1:

Simplified structure

From user research, we learned that users struggled with structure and had a hard time remembering where things are. We proposed removing the traditional top-level “Home” screen where users normally begin their tasks and branch out to other features/screens, and regroup functionalities/features based on basic needs, allowing users to always know where to go.

 
 
 

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

  1. Information about their commute

  2. Access to entertainment

  3. Ability to contact people

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.

Solution 2:

Triangular structure for direct accessibility from every other screen

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 was directly accessible from another with one swipe.

 

Solution 3:

Layered interface to allow multi-tasking

While the triangular structure allows quick access to the three primary functions, we took a “layered” interface approach to allow cross functional multi-tasking to be performed and controlled from a single screen.

 

Dismissible mini controller

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

 
 

Multi-function preset 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 for the three primary functions:

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 could also hide the presets by swiping it down.

 
 
 

Hidden system panel

We designed a System Panel as a universal asset applicable to all three functions. It was always available by swiping down from top when users need it, and discreetly nestled itself along the top of the screen when it was not in use.

The system panel provided various features related to the particular function screen the user was using. For example, it allowed users to select a different media source (FM/AM Radio, iPod, etc) when opened on Media screen. The sources were also sorted and positioned automatically based on the user’s usage history, allowing for easier access based on a driver’s behaviors.

Solution 4:

Consistent layout with hierarchy of information and controls

Good hierarchy improves comprehension and reduces glance time as well as the frequency of these glances. I created a “master layout” to enforce a consistent structure on all three function screens and to ensure that users could quickly find the information they need anytime, anywhere.

The main controls for each function were placed on the left for easy access by the driver, and the less frequently used list controls on the right. They were also positioned to line up with the buttons on the Mini Controller to enforce consistency in location and to help users build muscle memory.

 
 
 

We also grouped similar information displays between the Media, Phone, and Info screens and rendered their displays in a consistent fashion. Slight variations in text size and coloration were used to help users understand and distinguish information more readily.

 

Visual

While creating a system that’s intuitive and safe to use while driving, we were also challenged with designing a unique, approachable user interface that increased both brand differentiation while maintaining a friendly Toyota feel.

Approachable, warm, and friendly

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

  • Visually distinguishable buttons vs. non-buttons.

  • Different texturing applied on parts that can be pulled or dragged.

  • 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.

Also, where other multimedia systems focused on dark, sleek visual theming, I used bright colors to serve two purposes: to enhance the approachability of the system while also clearly highlighting the different functionalities of it.

Validation

10 respondents, 60-minute 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.

 

Result

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.

“What did I like the best about AXIS, ... having 3 main panels. Each one of those may have more information but you only have to start with three to get somewhere.”

Though there were some minor setbacks along the way, AXIS was proposed to Toyota in 2013 and was acquired for further development.