Audi Car Key Phone App

As easy as 1 2 3.

User Experience · User Interface

I wanted to create a side project for myself that had to do with something that I enjoy. I've been a huge fan of cars and car culture for as long as I can remember. I specifically chose to do this project for Audi, a car brand that I am a huge fan of and personally have experience with. 

Why Choose Audi?

I've been a huge fan of Audis for awhile. They look cool, they feel great to drive, and they're refined machines that can give you luxury but also power to back it up. I've owned a few Audis at this point, the first being a 2006 Audi A6 and the second being a 2008 Audi S4. My S4 was and still is my favorite car I've ever owned. Audi has become known for being high tech and part of the few leading the charge to the next evolution of car technology.

 

A big push in recent years that's been adopted by the industry as a whole as the technology becomes more available is mobile phone virtual keys. These virtual keys are used through the manufacturers app and can have a variety of features such as door locking/unlocking, climate controls, or remote start.

When doing my research, I found out that the Audi app (myAudi) is missing some key component and has some user experience issues. The biggest complaint that I found was that the app does not offer remote start in any way and is missing some other pretty key components.

Goals

My goal for this app was to add in key features and make the experience as easy as possible. It's something that a user will use quickly before they start their day or at the end of their day. Because of this notion, I want buttons to be distinct, I want important information to be easy to find, and I want there to be a clear hierarchy. 

Quick functions should be on the home page. A remote start/stop button, door locking/unlocking, current gas range, or lights are all features that I would want to be able to quickly access.

I wanted to design this so that it could also be modular based on each cars features. Some cars have heated steering wheels, some cars have cooled seats. The features would easily be swapped due to the modular nature.

A dark mode was also important to me as well. Is it 3:30am and you're about to go somewhere (where are you even going at 3:30am)? Don't want to burn your retinas with the standard light mode interface? A dark mode version of the interface can help with that.

Information Architecture 

To begin, I started by creating a simple information architecture on what I wanted within the app. each in-app tab needs to be dedicated to a collection of important features that users will find useful.

Sketch Wireframes

I began to sketch out how I wanted the app to look. I wanted the app to be as simple as possible so I didn't want to overload each page with too much information. I messed around with a bunch of different layouts but ultimately chose the below. 

The app will be broken out into 4 sections:

  • Home - General information and functions such as remote start or door unlocking/locking

  • Location - Ability to locate your vehicle and use an in-app GPS

  • Climate - Remotely set climate controls

  • Vehicle Information - Information about your vehicle such as maintenance records and timing, odometer, MPG, owners manual

Breaking Down the App

Upon opening the app, the user is presented with an easy to use login screen. Already have an account with the service? Simply login with your credentials and be on your way. Don't have a login but have an eligible car? Create an account and confirm some details to add the car to your app. 

After the user logs in, they are presented with all the cars currently located on their keychain. For this example, the user has 2 cars currently connected to their account. Choosing either one of these will lead the user to the main car UI. Alternatively, clicking the "manage vehicles" button will allow the user to add additional vehicles or modify the currently added vehicles.

After the user logs in, they are presented with all the cars currently located on their keychain. For this example, the user has 2 cars currently connected to their account. Choosing either one of these will lead the user to the main car UI. Alternatively, clicking the "manage vehicles" button will allow the user to add additional vehicles or modify the currently added vehicles.

I wanted to include all the most important information on the home tab. The biggest complaint across the board with the original myAudi app was that it does not have remote start, even for their vehicles that offer remote start as an option. A few other key components on the home page are the ability to lock and unlock the cars doors, turn on the lights, honk the horn, open and close the doors, and open the trunk. I also felt like including the vehicles current gas mile range was very important and can be interchanged with a separate icon if the vehicle is electric.

The next tab is the location tab. This tab has two primary uses - locating the users vehicle and being used as a GPS. With the app being connected to the users car, a GPS route can be set directly on the app and sent right to the vehicles infotainment system.

The third tab in the app is all about climate controls. With this, users can set their climate controls before they even step foot in their car. Changed made in this tab will automatically be set within the vehicle once it is started. I decided to go with more distinct buttons on this tab versus floating icons. The reasoning behind this is because there can be a lot more information on this page verses others. Different cars have different features, so this is also set up to scale based on the more high tech cars with much more features versus a lower trim car with less. An 8 series has many more climate options than a 4 series. The buttons are specifically big enough to rival the size of a phone app icon to avoid miss-touching.

The final tab on the app is the car information tab. This includes information about your cars current maintenance schedule, statistics like average mpg, and vehicle health (Things like oil level, general fluid levels, or tire pressure). Other miscellaneous items that are useful to car owners can be found here as well.

The hamburger menu offers some miscellaneous options for the user. Account details allows the user to see the information of the account currently logged in. The menu allows the user to change vehicles or grant another user access to the currently selected cars key. How this works is the main user sends the secondary user an authentication link which allows them to create an account within the Audi+ app and links their phone with the vehicle in use. Dark mode swaps the color palette to a darker version that's easier on the eyes during nighttime and valet mode is used with valets and holds the car to a 40mph limit.

Primary Color Palette

The swatches above are for the light theme and the swatches below are for the dark theme. I chose to play off of Audis official colors. The official colors are black, white, and brilliant red. The colors chosen for this app were chosen to be easier on the eyes. The white and red are less bright and the black is less dark. It overall helps create a better experience.

Dark Mode

I felt like dark mode is an important feature for any app. Not only does it help reduce eye strain, but depending on where the user is, especially somewhere at night, it helps reduce user annoyance and create a better experience.

Conclusion

I think the overall new app design is clean and easy to digest. Each element was created with a purpose and gives visibility to all the important vehicle systems that a user would want. The pain points from users that are using the current Audi app have been addressed and I feel like, while putting my own touch on things, it still stays true to the sporty feel that Audis tend to bring.