Audi

2023
CATEGORY
HMI Interface
PROGRAM
Figma
TEAM
Individual
ABOUT

This is my thesis work. I chose to focus on learning figma and researching how variables work and also how to build a larger components and a full prototype. The aim here was to advance my skills in UI and figma therefor UX is not shown or presented.

Problem
I chose to revamp Audi MMI (Mulit Media Interface) because it felt outdated. Personally I feel that almost all car brands have an outdated interface inte their displays. So for my inspiration I have looked a lot at what apple CarPlay has succeeded with to try to achieve a similar feel but keep the Audi brand identity. I specifically chose Audi because it was available for me to research closely and I had personal experience with the interface.
Process

I started conducting research with how other brands have done and confirmed my hypothesis that almost all car brands are still very old school in their UI. The interfaces are filled with detail, gradients and much more.

Some of my findings from this research was also how Lynk & Co and Apple Carplay have an overview home screen, where Lynk & Co's was customizable. In the Apple Carplay interface, there are solid colors at the base and rounded corners. It is also not completely black but a duller gray color to give a soft expression. There was minimal text and large divided areas for the functions.

Then I developed a sitemap where I chose to focus on creating a short user flow to reach the end goal. This gives the user more options to choose from but a shorter path to to complete. This will benefit a regular user who is comfortable within the interface. Another option would be to show fewer options for the user to minimise the time spent with eyes off the road while driving. However this would give a longer path to complete your action. I chose the first option as it is what most brands use.

To secure a decent UX I did a short trial on sketches with people around me to see if it was understandable however UX was not the focus of the project and therefor not a priority.

After deciding on all the backend stuff I started to work on the aesthetics by finding inspiration, developing wireframes, building components, creating high fidelity designs, adjusting and building bigger components to finalise by creating a prototype which you can try out.

Check the live prototype in figma here!

Key insights
In the end I am very happy with my results and I feel that I have succeeded my aim for giving Audi's MMI a revamp towards a newer fresher look that feels a little closer to apple CarPlays vibe. I started to get a greater understanding of figma however with a couple more experiences I can see my vision but know that I would have succeeded better today with help of nested properties and intense swaps. This would have saved time and made my components for efficient.