Automotive Infotainment System

Timeframe

10 Weeks

Team

4 User Experience Professionals

Deliverables

Create an automotive infotainment system for the future

Tools

Adobe XD, Figma, HTML, CSS, Bootstrap, JavaScript, and Photoshop

Project Overview

Our team was tasked to answer the question:

how might we create an automotive infotainment system for the future?

Given the time allotted to completely redesign an infotainment system would require years of research and design, our team selected 5 user journeys to focus on:

1. Listen to a text message

2. Change the color of the display

3. Reject an incoming call

4. Go from audio to navigation

5. Change the audio source

Introducing the Havoc V Class! The newest model to the Creative Motors collection. This state-of-the-art infotainment system has revolutionary features. The new system always keeps the navigation on while allowing you to navigate other screens to make sure you know when your next turn will be. This design does away with the old clunky user interface. Operating just like your smartphone, the Havoc V class is fast, responsive, and intuitive to use. To make sure to optimize your time we have also included a limited customizable screen. To make your drive easier we have implemented AI capabilities so the car can learn your habits from daily usage.

Solution:

When designing this infotainment system, the team utilized principles and patterns learned in the interaction design sequence. The design principles were as follows:

Ease of access: The team’s objective was to make frequently used functions easily accessible to the user. Therefore, the maps, audio, and climate controls were strategically placed towards the driver’s side, as they are the most used functions while driving. This enabled us to keep frequently used interactions under five clicks which aided a lot in reducing the mental workload of the user.

Forgiveness: The design team also incorporated the concept of forgiveness in the infotainment system’s design. This is particularly evident in the route sequencing feature, where users are given the flexibility to end a current route and start a new one quickly. The system provides a confirmation prompt and a back button to ensure that users can easily adjust their destination or route without any inconvenience.

Low mental workload: To minimize the cognitive burden on our users, the team designed the main screen of the system to include both map and music functionalities. This arrangement facilitates easy way finding and ensures that users can access these frequently used features without having to navigate through multiple screens.

Familiarity: Our approach to designing icons involves maintaining consistency with commonly recognized iconography. This strategy aims to enhance the labeling saliency and overall intuitiveness of the system. By utilizing familiar icons that users have encountered before, we believe that their function will be immediately apparent, facilitating ease of use.

The process

Research

Key Level Modeling

Our team leveraged keystroke-level modeling to identify and analyze the components and features of competitor infotainment systems. This involved breaking down the system interactions into smaller parts to determine if there could be optimizations. This method helps illuminate the micro interactions and to break down how much time a user spends given each interaction.

Above pictured is the methods we used based off of a Master’s Thesis written by Anton Nyström. (Nyström, A. (2018, May 29). Gesture-Level Model. We used each touch interaction as well as physical interaction as a timed gesture when working with the automotive infotainment systems.

The automotive infotainment system that we preformed KLM testing on was a Toyota Camry Hybrid 2022. From testing, our team discovered a critical error in the systems interaction design. To change the audio source, the user must use both physical and touch interaction. In terms of usability this is a complete failure as this requires a context switch for the user. Users will habitually gravitate towards working with a device that maintains the same interaction base.

User Interviews

key findings

Personas

The team developed personas based on the interviews. We determined that our car would be for luxury users

Ideate

Interaction Maps

During the ideation phase, each member created an interaction map and low fidelity sketch of what the user interface should look like in addition to the interactions. Pictured below is an interaction map that I created. My focus was to develop a fully connected system for our users, always affording the user to access to maps as well as audio services within one touch.  Additionally based on our interviews it was found that users were looking for interactions that would be supplemental to their own personal devices and mobile phones. Users noted that they liked the integrations within Apple CarPlay and Android Auto.

What did we implement from our personas and user interview findings?

Mid-Fidelity Interaction Maps

After design implementation based off user interviews and key level modeling, we developed a mid-fidelity interaction map. At this point we began to develop steering wheel interactions for the users in tandem further gaining important feedback at this stage of designs. Some feedback that we received during design reviews for the steering wheel and interaction maps included:

  1. Redesign of audio functions
  2. A distinct way to “go back”

Validate

System Usability Scores

After testing the mid fidelity interaction maps, we were able to test with our users. For our usability testing we prompted users with a series of interactions that would lead them to completing each of the 5 prompts. After, we discussed and observed users’ feedback.

Usability feedback

Users gave our team overall positive feedback:

“I like that I don’t have to dig through menus to accomplish a task”

“I’m getting into my car to go somewhere, that’s why I like the big map”

We also received feedback on things that we need to fix:

Users found that the home button was unclear and unfamiliarity with the touch controls for climate as most users habituated to a physical interaction base

Steering Wheel Prototype

Project Challenges

The biggest challenge for this assignment was communication across the group. To mitigate this, our team made a Teams channel with a shared file library to prevent information loss. Additionally, we implemented a communication system to respond to messages within 24 hours in advance if there are blockers on the project. However our team did not make it out without road bumps; some members struggled to meet deadlines and communicate, to navigate this challenge other members helped pick up the slack. Unfortunately, because we were so far along in the project our team had to make do with the work being done and collaborate with the other members accordingly.

Another challenge with the assignment was the length. Because the project duration was spread out, our team had to make sure that we remembered the research we conducted when designing. Implementing the information was easy when we remembered but when we didn’t, our team was often at a roadblock for how our team was to move forward.

What I learned

I learned about Keystroke-Level Modeling and how to use it properly when designing for both mobile and keystroke-based systems. I also learned about collaborating with cross functional teams. One of our team members had a background in product design and was able to spend some time to create a physical prototype of the steering wheel in AutoCad.