UX CASE STUDY  

Audi Digital Car Key App

DISCOVER

Background . The Problem . App Analysis. Competitor Analysis .

Background

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.

The Problem

“I’d expect an app that reflects the luxury of the brand”

The Project Brief

To create a new app with the intention of providing functional support for car owners to utilise their iPhone’s daily.

My Role

UX Researcher, UX Designer & UI Designer

Target Audience

  • Age 24-60
  • Mid-Range to high end car owners
  • Casual drivers that use their car for commuting to work and social endeavours

Hypothesis

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

Deliverables

Produce at least two screens which demonstrate the user interaction within the app
A detailed case study showing my process and outcome

Business Research

Competitor Analysis

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.

Overall Findings:

  • Features seem to be built around convenience
  • BMW has the best app store ratings and the most positive reviews, it also has the most modern look and feel.
  • Remote control over the core car functions, journey planning, service, maintenance and dealership information are the most common features across digital car apps.

Commonalities

  • Hierarchy: Car fuel, mileage and battery status are displayed higher up the page and one of the first things users can see. After this is access to the remote control functions of the car. This suggested these have been deemed as the most important features for their users.
  • The core car function features are commonly displayed as a button on the homepage

Differences

  • Audi only offers their users control over locking/unlocking their car from the app which is considerably less than its competitors.
  • Unlike its competitors Audi has positioned its remote control feature further down its home page. Users have to scroll more than three swipes to access features such as mileage tracker. This is not ideal for users who generally want to access features as quickly and easily as possible.

DEFINE

UX Research . Interaction Design . Analysis . Persona

User Research

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.

Pre Red-Route Analysis

With the previous business research in mind I moved onto conducting Red-Route Analysis. Red-route Analysis allows you to prioritise user needs and facilitate alignment amongst your stakeholders. It also helps avoid the introduction of unwanted features.
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.

Red-Route Analysis Table

Below is a table of my findings:

Red-Route Insights

My findings were as expected from the brainstorming session but it was useful to have this confirmed from real research.
  1. Lock/Unlock, Adjust Temperature and Fuel would be used by all users and would be used more frequently
  2. The features that are the core functions within a car would be used most often by users
  3. Music Player was the least popular, I initially believed this would be very popular with users so this was the most interesting discovery for me.

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.

User Surveys & Interviews

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.

Question Checklist:

First Questionnaire

Below I have provided, User demographic information, user questions and some distinctive quotes from users.

Second Questionnaire

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.

App Store Reviews

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.

How I analysed my findings

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.

Affinity Mapping

Main Insights 💡

  • I identified a theme of control. Users desired more control over the core functions of the car from within the app. There was a significant need for this to be quick and easy.
  • Users expected to see connectivity features, remote control features & smart technology from a mobile car app.
  • Security was the biggest concern. Users felt that their feeling of safety would increase if constant feedback & a sense of complete control could be established.
  • The main frustrations for users were losing their keys, a lack of desired functionality and the appearance of their keys.

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.

Persona

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.

DEVELOP

Crazy 8s . Wireframes . Information Architecture. UI. Prototype.

Ideation

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?

Technique 1: Crazy 8s

Task

  • Generate 8 quick ideas within 8 minutes
  • Allow my creatively to flow to generate lots of ideas
  • Gain feedback on my ideas from users to find out what they like and dislike

Purpose

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.

Reflection

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.

Technique 2: Re-building the IA of the app

Task

Building out the current app information architecture and creating a better one.

Purpose

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.

Reflection

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.

Wireframes

Low-Fidelity Wireframe

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.

  • I took my insights from my red route analysis to guide my hierarchy of the content on the page. The remote car control features are prominent and one of the first features users will see. Additionally, fuel and oil levels are easily accessible on the initial homepage.
  • I based all my initial decisions on how best I could provide control and security to users.

Strawman Proposal

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.

Mid-Fidelity Wireframes

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.

Solution 1

Solution 2

Changes made from Low-fidelity wireframe to Mid-fidelity wireframe:

  • Adjustments to the layout. I felt that the start engine button wasn’t as prominent and distinguishable from the other icons as I wanted them to be. I rearranged the layout and positioning of the icons and provided a more consistent look and feel to the design.
  • I presented these changes for feedback and received positive responses to my changes.

High-Fidelity Wireframe

Changes made from Mid-fidelity wireframe to High-fidelity wireframe:

  • A few minor changes. I changed quick links on the account page from a carousel to all tiles being viewed without scrolling horizontally. I felt this would be quicker for users to see and increase user engagement.
  • Improved Climate control. I added options of heat, fan and cool for users so they would have more control over the climate of their car from their app.

User Testing

I ran a quick user test on my high fidelity wireframe with users using figma mirror.

Task: Go to lock or unlock your car
Users were able to complete this quickly and felt positivitly about the experience.

Task: Check what the temperature of your car is
Successfully completed with ease.

Follow up question: How do you feel about the homepage?
Users were happy with the homepage and felt it was simple and clear to navigate.

Task: How do you feel about the account page?
Users were positive about the account page and liked the alerts feature.

Task: How do you feel about your overall experience ?
Overall feedback was positive there was still some concern about how safe using an app like this would be.

UI Phase

After creating my wireframes I was able to produce the following myAudi app design.

Dark Mode & Light Mode

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.

Security

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.

Onboarding

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.

Help

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.

Feedback

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’ve included active and inactive states
  • Provided clear car warning signs and descriptions of what they mean
  • Alerts that make users aware of any important information such as service updates

Core Experiences & Control

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:

  • Start engine
  • Control the climate of the car
  • Unlock/unlock specific doors
  • Control the car horn and lights
  • Control the car windows

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?

Climate

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.

Lock/Unlock

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.

Style Guide

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.

Design Fundamentals

I make an effort to keep in mind design fundamentals and laws when designing. This helped to guide my design decisions.

Accessibility

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.

WCAG 2.0 — Colour Contrast

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.

Test

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.

Conclusion

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.

Self Reflection

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.

Next Project

2021 NATASHA KELLMAN

DiscoverDefineDevelopTest