Sinze 2021 Mazda has been a great training partner of Tec de Monterrey, that is, a company that works together with Design students to develop projects together.
Every year we carry out the "Mazda Design" challenge, where I teach my students user research methodologies to propose solutions through product design.
While my students were in charge of designing physical products that could improve the experience of Mazda customers, I conducted parallel user experience research to improve the experience of drivers when using their vehicles' screen (infotainment system).
This project shows the process followed (Design Thinking) as well as the results of the research and the suggested interface.
1. The problem
A car infotainment system, short for "information and entertainment system", is a multimedia interface installed in vehicles to provide occupants with a combination of entertainment, navigation, connectivity, and information features. These systems aim to enhance the overall driving experience by integrating various technologies and services into the vehicle's dashboard.
Many people have commented that they "can't find" a certain feature in their car, I have experienced it myself. This problem exists in many systems, so at the same time it is an area of opportunity to improve (re-design).
In this Case-study the Mazda's infotainment system was analyzed (user research) and then re-designed (user interface).
2. Insights
A usability test was carried out to find areas of opportunity in the Mazda infotainment system.
3. Solutions
The previous UX research was done on the real system of a Mazda car. The insights were of great value to begin creating the prototype of the new system; Below is the process for developing the first prototype:
Two versions: Neon & AI
Some users asked for a futuristic interface full of color and images (AI version) while others asked for a simpler but striking and futuristic interface at the same time (Neon version). These two prototypes were tested in a usability laboratory to obtain new insights.
4. Validating
The Figma low-medium fidelity prototype inserted in the MAZE platform was used to carry out usability tests. The objective was to obtain insights to be able to work on the high fidelity design.
5. UI
Based on the results of the validations, a new UI proposal for the infotainment system was designed. Subsequently, the same usability test was conducted using a high-fidelity prototype created in Figma. The success rate in the three tasks improved, as well as the completion time. This process involved iterating on the design to address user pain points identified in the initial tests. By refining the interface, we aimed to enhance user satisfaction and efficiency.
The high-fidelity prototype allowed us to simulate real-world usage more accurately, providing valuable insights that guided further improvements. Overall, this iterative approach resulted in a more user-friendly and efficient infotainment system interface.
The high-fidelity prototype allowed us to simulate real-world usage more accurately, providing valuable insights that guided further improvements. Overall, this iterative approach resulted in a more user-friendly and efficient infotainment system interface.
Findings 2
The usability test conducted on the Figma prototype for the car infotainment system revealed several critical insights for improving user experience.
First, the UI's color contrast needed to be assessed against WCAG guidelines to ensure accessibility for all users, especially in various lighting conditions.
Additionally, some features, identified as highly used by users, needed to be accessible more quickly, even if it meant repeating them across multiple screens. This improves efficiency without overwhelming users.
Button sizes also required adjustment: some smaller buttons needed to be enlarged to enhance touch accuracy, while others had to be reduced to avoid clutter.
Lastly, the information architecture was found to be cumbersome, requiring reorganization to provide a more intuitive navigation experience for users, allowing them to access key functions with ease.
6. Takeaways
The current UI has a lot of text, it is clear but not optimal for a car, since users should not read so much text while driving. A new simplified UI helps you locate menus more quickly, prioritizing the most used activities. The categories can also be clearer so that users can more easily identify which of them contains the option they are looking for.
A survey was carried out to find out the aesthetic appreciation of the new interface. 85% thought that it looks better and they like it; while 10% said they like it but prefer it to be seen with a black background (which can be fixed by adding a Toggle in settings to activate Dark Mode).
It was also found that in the new interface it was easier to find the options (10% faster than the first iteration and 44% faster than the original system).
This was achieved by changing the information architecture, since it was found in a first interview that 10% of the options presented by the original system were elements that were not used as much, so they could be moved to secondary places and have a Cleaner and more intuitive interface.
Although the results of the new UI are much better, it is necessary to carry out tests in a more real context (while a user is driving).
The new and Final UI is being developed (coming soon...)
