UX CASE STUDY
Audi Digital Car Key App
Background . The Problem . App Analysis. Competitor Analysis .
Smart technology is revolutionising the driving industry. Cars have rapidly evolved through technological advancements and so have the mechanisms used to start and stop them. The days of traditional keys are over, first replaced by contactless keys and soon to be replaced by smartphone apps.
“ The physical key may soon be nothing but a backup tool ”
Car manufacturers such as Tesla, BMW and Audi have leveraged this opportunity by offering their customers the ability to interact with their vehicles through their smartphones. Our relationship to cars is undoubtedly changing thanks to apps and the sharing and connectivity features they offer.
“I’d expect an app that reflects the luxury of the brand”
To create a new app with the intention of providing functional support for car owners to utilise their iPhone’s daily.
Changes to the IA and hierarchy of information will improve the user flow and navigation of the app which will improve user retention. A complete UI change that provides clear feedback to users and a reduction in scroll time to access features and information will improve the user engagement and in turn these changes will increase business revenue
Produce at least two screens which demonstrate the user interaction within the app
A detailed case study showing my process and outcome
I began my design process by conducting research and competitor analysis on Audi’s direct competitors. I wanted to gain insights into which car manufactures currently offer digital car apps and what functions and features they had. This allowed me to identify their strengths and weaknesses in comparison to Audi, identify commonalities between the apps and where improvements could be made.
Overall, it helped me to refine my strategy. I looked at BMW, Mercedes, Ford & Porsche.
Next, I jumped right into user research. Empathising from the perspective of the user was very important if I wanted to discover true customer insights. The best way to do this was through various qualitative user research methods this way I could effectively explore user emotions and behaviours and gain detailed, descriptive insights from users.
I wanted to gain insights from all types of car owners if I was going to create the ultimate driver experience.
Red-Route Analysis helped me to focus on what features to optimise so I could deliver the most value to users and drive the key usability metrics.
I started by collaborating on a brainstorming session on invision with fellow UX designers, we agreed on what features we thought were essential for the core function of a car and what features would be a bonus if included on the app.
Based on the decisions made from the design session I presented users with 5 core features of a digital car app and then 5 non-essential car app features. Users were asked to rate their likelihood of using each of these features.
My findings were as expected from the brainstorming session but it was useful to have this confirmed from real research.
My red route analysis insights guided my subsequent User Research, it provided me with quantitative data and helped direct my user research questions to the most relevant features in regard to user needs.
To gain further insights from car owners I conducted a questionnaire with car owners via Google Docs. This allowed me to gain a general view of the overall needs of car owners. I was also able to have face to face discussions with a few car owners.
Below I have provided, User demographic information, user questions and some distinctive quotes from users.
I also conducted an additional survey with myAudi app users as I wanted to gain even richer insights. I reached out to users that I knew and posted on social media platforms such as facebook Audi owner groups. Again, I ensured my questions met the checklist I mentioned before.
Ideally I would have liked to have gained more responses on this questionnaire to gain richer insights into the emotions and pain points of users but with a combination of my previous survey responses and subsequently reviewing app store reviews I managed to achieve some interesting insights.
Reviewing app store reviews was extremely insightful, I was able to attain more information from direct myAudi app users. I mainly explore reviews that were submitted within the last year to ensure they were relevant to the current app design.
I conducted an affinity mapping exercise to help me draw out key insights from all my above user research. This exercise was very useful as it helped me organise and draw out patterns and themes from my research data which informed my insights.
My findings were interesting, before the survey I anticipated some concern for safety but my research highlighted that this was much greater than I expected. In terms of the features and functions within the app my findings were as expected. Overall, my research suggests that security and safety is a running theme and an essential component for an effective digital car app. Incorporating connectivity and allowing users as much control over their car as possible is very important.
Before moving on to the develop stage I created a user persona based mainly on my findings. Having a fictional representation of the ideal user allowed me to keep the target user in mind.
I brainstormed potential solutions for my research discoveries using three techniques. Before starting these techniques I wanted to clearly keep in mind the problems that I would be tackling so in addition to my persona I created ‘How might we’ statements that I referred back to constantly throughout the ideation design process.
How might we provide users with a sense of security and safety when using the app?
How might we make features visible and accessible for users?
How might we generate designs that solve users problems whilst maintaining Audi’s brand identity?
How might we give users a high level of control?
How might we keep users informed and engaged with the app?
To force my creativity to flow and push me to think outside of the box so I can design without limitations to generate an array of initial ideas. By eliminating constraints it encourages creative idea generation which can then be refined later on.
I brainstormed with fellow UX designers on invision first and then did a separate crazy 8s session by myself to generate more ideas. The exercise definitely pushed me to think of different potential layouts for the app.
Building out the current app information architecture and creating a better one.
In order to completely re-design the app I needed to really understand the current IA of the myAudi app. I wanted to get a clear visual idea of the navigation within the app and organise my thoughts. It allowed me to easily view the structure and form a simpler, intuitive IA.
It was useful building out the current IA as it allowed me to visualise all of the elements of the app. I noticed how much information was packed into the homepage and it helped me to break it down into a simpler, logical structure. My insights from my red route analysis assisted in my decisions of the hierarchy of information for each page.
I produced the following wireframe from a combination of my business research, user research and different ideation techniques. I tried to consider the technical constraints, information visualisation techniques and an accessible layout that would provide users with the easiest navigation and meet accessibility guidelines. Balancing creativity and feasibility is always a challenge but one that I kept at the forefront of my decisions for these low-fidelity wireframes.
If I had the available resources and dependent on the constraints that I would be working within I would have liked to have conducted a straw man proposal exercise. This would have helped me greatly in determining the constraints from different business perspectives and allowed me to gain a better idea of the feasibility of my design.
After reviewing my low-fidelity wireframe I moved onto a mid-fidelity wireframe. This allowed me to see how my elements would fit in a constrained and more realistic layout and I made some enhancements to my wireframe as seen below. I wasn’t sure on the layout of the homepage so I created multiple mid fidelity wireframes and asked users for feedback. There was a preference for solution two.
Changes made from Low-fidelity wireframe to Mid-fidelity wireframe:
Changes made from Mid-fidelity wireframe to High-fidelity wireframe:
After creating my wireframes I was able to produce the following myAudi app design.
I wanted users to have a personalised bespoke experience. The options of dark mode and light mode is currently a common trend within the tech and software world. I wanted to provide users with this option to allow for a greater personalised and aesthetically pleasing experience.
One of the most important themes that I discovered within my research was the need for a sense of safety and security when using a car mobile app. A lack of security and safety is likely to deter users from the app which is exactly what Audi doesn’t want.
To solve this issue I thought it best to create some onboarding splash screens to assure users of the safety and security measures in place. Users will see these screens when they first download and enter the app to enable a sense of security straight away.
In order to tackle the issue of security further, users can also easily access help from within the account section of the app should they have any concerns.
I have also provided users with constant feedback for when they complete an action within the app. Feedback is essential for a good user experience as it minimises users cognitive dissonance and provides reassurance to users.
I wanted users to feel in control when using the myAudi app as my research found this was important for users. The main frustration I found from users was a lack of functionality within the app resulting in the feeling of lack of control. I have designed an app that offers users quick remote control over the core functions of their car from the homepage. These include:
The current myAudi app only offers users the ability to unlock and lock their car and users have to scroll down the homepage in order to find this function. Audi’s offer their owners an array of functions that can be controlled from the dashboard of their car. So why not bring that over to the app?
Controlling the climate of the car was extremely popular amongst users. Many users expressed excitement at the idea of setting the temperature of the car before they got in. I wanted to create an easy navigation system for users to control climate. I’ve provided clear CTAs and feedback for users to determine the current climate of their car.
My user research highlighted that locking and unlocking their car quickly but securely from within the app was a top important feature for users. As well as being able to control specifically what doors could be locked and unlocked. I wanted this experience to be as seamless and intuitive as possible.
I had difficulty in deciding how I could successfully achieve a balance between locking/unlocking the car doors quickly, specifically and securely. I originally had decided to just have users lock and unlock all doors by just tapping the lock icon on the homepage. However, I felt that this was limited and didn’t address the need for control that I discovered from my user research
I finally decided on the above design, users are taken this screen once they have tapped the lock icon. My design allows users to have full control over their vehicle doors. Users can differentiate quickly what doors are locked or unlocked. By including the image of the car it provides a quick visual aid for users and enables the picture superiority effect. A confirmation message when an action has been taken provides good feedback and clarity to users regarding the status of the car doors.
I stayed in line with Audi’s brand colours, of red, black and white in order to maintain their brand identity. I also followed Apple’s iOS guidelines closely.
I make an effort to keep in mind design fundamentals and laws when designing. This helped to guide my design decisions.
Making sure my designs met Web Content Accessibility Guidelines and the World Wide Web Consortium (W3C) accessibility standards was crucial. This was not only due to the legal implications associated if they’re unmet but in order to humanise my designs by making it accessible to a variety of people with different capabilities.
I made sure all the colours used in my design met AA and/or AAA colour standards. I ensured this by checking the contrast ratios. Colour ratios are extremely important not only for the visually impaired but for everyone. It can affect people’s ability to perceive the information on the page and therefore ability to fully use the service.
I presented my prototype to users and below are some quotes that I received.The next step would be to run full usability tests on my prototype to highlight any pain points in my design and then begin the design process again.
Overall, I designed a digital car app for Audi car owners. I conducted business and user research, analysed my findings and based my ideation decisions on them. I kept in mind Audi’s brand identity, accessibility and design fundamentals whilst designing.
I really enjoyed this case study and have taken away so much!
Overall, this case study has greatly improved my knowledge and confidence in User research, UX and UI design.
2021 NATASHA KELLMAN