Project Overview

Drivers will be able to use touch and physical controls to navigate through this infotainment system to be able to accept/reject phone calls, listen to a text message, change the source of the audio, turn on the A/C, and start a navigation route.

This was done by researching existing car infotainment systems to help guide our own original design, using Adobe XD.

Although this was mainly a group project, these parts were completed individually, by myself: Key Level Modeling, heuristic evaluation, and sketches. When collaboring with the team, I led the designs for A/C and navigation features. I also lead the research components by writing the interview script and anlyzing the results for this project.

Process

Solution

We created an infotainment system that uses both touch and control with a voice command (out of the scope of the design). We combined research from both luxury and standard infotainment systems to create a system with little or no learning curve.

Final Prototype

Controls Pannel

(Located directly below the screen)

Features of Design:

One pattern we used was similar, since we discovered in our foundational research that most of our users had iPhones, we designed our infotainment system based on an iPhone UI. As many of the icons and apps are very similar which relates to the user's mental model for these functionalities.

We also chose to create our design based on the pattern of color and particularly using high contrasting colors because from our foundation research we found that many of our users were older and having high contrasting colors could help usability. Additionally, our home screen follows the pattern of a dashboard since there are many different-sided modular sections. This also ties back to the pattern of similarity, having different-sized modules resembles the home screen an iPhone user might choose to use. Finally, each page has an escape hatch being the home icon on the top right corner and in the physical controls, this helps the user return to the dashboard home screen at any time.

Overall, some design principles we used on the home screen were in contrast as described above with the high contrast of black background with white text. We also used the design principle of proximity by putting apps close together on the left and on the right with all the car details and settings. Also, we used alignment, one example is we aligned all the apps on the left.

Sample of Workflows:

For this workflow we knew based on our research, that our audience is older, so we wanted to keep their same mental model of controling the A/C with physical buttons/controls. But we also made this functionality able to be controlled using touch to appeal to our younger audience we are more tech-savvy and are used to using touch screens more.

Usability Study Results

Key Quotes
"I thought it was easy to use because it resembled my iPhone really well!"

"Easy to see the large red button that popups when a call is received."

"Really easy to find the temperature on the infotainment system screen."


Summary of Insights
Wanted to know stats about the car, like when they could get their next oil change or how many more miles they have until they need to

Confused why there are two home buttons (one touch and one control)

Confused about the settings section since there are so many drill-downs

Make the highlight for controls thicker

Improvements Based on the Insights
We addressed the want to know more about the car stats by adding a section with this information below the music section

We decided to keep both home buttons because in our original user interviews we gathered alot of data that supported the fact that users wanted to be able to use both touch and controls to complete a task.

If we had more time we would have liked to redesign our settings screens to eliminate some of the drill downs.

We addressed the highlight for the controls section and made the line thicker.

Notiable Considerations
We tested this prototype on a laptop with 5 users, in would have been more ideal if we tested this system while driving in a controled enviroment.

An improvement we should have done would be testing which features should be disabled when driving and which features should be available at all times to prevent user errors and for overall safty purposes.

Challenges

One challenge we faced was designing controls while using Adobe XD, which is a 2D design program. This made the prototype seem really flat and hard to tell which parts were touch and which parts were controls. This was a problem we noticed when we did our usability tests and probably influenced our results.

Another challenge we faced was designing for a wide range of users with a very broad range of technical knowledge. What was interesting was our primary users were old adults who generally are not very tech savvy but their older children or young adults in general were our other users who might also drive this car, so we had to make sure the car was techy enough for them but the older adults were still able to understand how to use the car.

Impact

Our car infotainment system had a SUS (System Usability Scale) Usability Score had an average of 61.25 out of 100, with 68 being above average.

We decreased the number of interactions from 4 to 2 for listening to a text message (compared to our KLM testing).

We decreased the number of interactions from 2 to 1 for moving to the navigation feature (compared to our KLM testing).

Lessons Learned

This product taught me personally a lot more than just the UI design. One of the first concepts I learned was what Key Level Modeling is and how this can help guide the design by highlighting pain points in specific areas of improvement. Another skill that I learned was how to work in a field like the automotive industry where there are a lot of constraints mainly with safety. This is why understanding Key Level Modeling was so important because I could have designed a beautiful UI, but if the UI has too many interactions or cognitive load, this will not only be ineffective for the driver but creating a safety concern for others on the road. Finally, I learned how to think about the big picture of the experience and beyond just the UI, mainly my team and I had to think about all of the interactions with the physical buttons and how those would interact with the display, as this was the first time I designed an experience that had both touch and control features.

More Projects