top of page

Project: Digital car key app 

Chosen car brand: BMW

Project Duration: 2 weeks

My roleUI Designer, UX Designer, UX Researcher

Tools: Figma, Invision Freehand, Whimsical, Miro 

Outline of Brief: 

The brief is to select a mid to high range car and to launch an android/iPhone app that will allow car owners to use their phones to replace the need o traditional car keys and more. This app aims to be as functional possible so that car will want to use this app daily as opposed to carrying physical car keys.

Problem Statement: 

Whilst digital car keys pose a hassle-free and efficient future, this concept is still in its infancy. One of the most prominent threats to digital car keys is security. One user stated that ‘most of the cars getting stolen are the ones with the digital car keys’ and this was the main reason why she wouldn’t be getting one. The fears surrounding the lack of security means that users would rather continue using their traditional keys as it ensures that they are the only ones with access to their car. This type of reassurance is something digital car keys may not be able to offer.

Pain Points: 

  • No extra reassurance when it comes to the app’s security

  • icons are not distinct or bold enough which could impact on accessibility

  • No clear indication of the status of lock status

  • limited amount of features, therefore, reduced functionality in comparison to previous versions

Hypothesis: 

  • Include more steps to lock and secure the car

  • include more security measures that are more specific to the user but is also quite a familiar way of ensuring security, i.e. Face ID, fingerprint.

  • Create a more sleek design that is more engaging, modern and reflective of the luxury element of BMW

6e2ab16b-2020-bmw-x1-1024x555.jpg

Background

Background

The concept of the car key was formulated in 1910 but was only meant for the ignition then two separate car keys were introduced for the ignition and the locks. Fast forward over a hundred years, the evolution of cars in the 21st-century meant that technology has become increasingly involved in the way cars are produced and in the way users interact with their cars; from the promise of autonomous cars taking over in the future to smart car technologies, the concept of controlling your car without physically having to control it or even be in it is fast becoming our reality. Digital car keys are also becoming more popular especially as each brand releases its newest collection of cars. A digital key car key can now allow you to open and close your car and to even adjust the heating. Its not just car brands releasing digital car keys but there are third-party apps and even Apple is trying to infiltrate the automotive industry. This is unsurprising given that in the western world almost every aspect of people’s lives can be easily managed from their phones, so who is to say your car cannot be one of them?

A bit about BMW: 

BMW stands for Bayerische Motoren Werke GmbH, which roughly translates to the Bavarian Engine Works Company. BMW started off producing Aircraft engines in 1913, it then transitioned into an automobile manufacturer in 1927 with their own version of the ‘dixie’ as its first car launch.

Design Process

The Double Diamond process consists of 4 four different phases, Discover, Define, Develop, Deliver. The visualisation of this process helps me clarify what each phase consists of and will serve as a good reference point to come back to throughout my case study.

Discover

Business Research

For my business research, I have decided to do a competitor analysis in which I chose three direct competitors (BMW, Mercedes, Tesla) and one indirect competitor.

User Research

For my user I conducted interviews, I believe the method is most useful as it encourages me to exercise the most empathy and gather qualitative data in real-time which are the main goals of the discover phase.  Below I have listed the questions I used to interview three candidates. 

36_d9078ccda78d0b99b5371f2a519751c4.jpg

Define

During this stage, I will gather all my findings from my business and user research, which will give me further insight and help redefine the pain points. I decided to use an affinity map to gather the qualitative data I received from my user research.

Affinity Map phase 1 

Affinity Map phase 2 

Affinity Map phase 3 

User Flow

A User Flow allows me to better understand the user journey; it will also help me visualise the hierarchal structure of the app and therefore help me decide which components and actions are the most important. Additionally, a user flow will help me understand every decision and touch-point a user would have.

For-NPD_AdobeStock_252637253.jpeg

Develop

Now that I have defined the pain points, I will test out some ideas that could serve as solutions to these pain points.

Crazy Eights:

  • A page split into 8 boxes

  • Each box dedicated to one design

  • 1 minute for each design

The aim of this exercise is for me to get some ideas down on paper in a more visual form. This will help visuals what could and could not work and hopefully use some of these ideas as inspiration for my wireframes.

Challenging Solutions

The original term is Challenging Assumptions, I decided to apply this method to my solutions as one of the setbacks I faced in my previous case study is measuring the validity of my solutions. By carrying out this exercise I can understand the cons of my solutions and therefore my ideas are better informed.

Wireframing 

Low-fidelity wireframes 

Mid-fidelity wireframes 

display%25202_edited_edited.png

Deliver

High-fidelity wireframes 

Interactive Prototype

Changes made between mid-fidelity and high-fidelity:

  • Removed the top image from the connect screen to create more white space to make it more minimal and visually pleasing.

  • On the homepage instead of the generic profile icon, I decided there would be a picture of the user. I felt this was more personable.

  • One of the most popular preferences for users was being able to have access to mileage straight. So to fulfil this need and still pay attention to Visual Hierarchy, I moved the mileage to the top and changed the lock/unlock CTA from buttons to a toggle.

  • I moved the GPS icon to the top right corner.

  • I decided to completely remove the slide-out feature screen two as I felt this made the page look too cluttered. I wanted still be functional so I made sure the features page was easily accessible through the middle button on the tab bar.

  • I also simplified the music section by replacing all the music features with the Spotify logo, so the users can open up Spotify on the app.

  • I made the temperature section more interactive by adding two control features — a round toggle to adjust the temperature manually and two horizontal toggles to turn the heating off and on.

Design Laws

Apple’s Accessibility Guidelines

  • Colour and Contrast: I made sure that blues were dark enough in the background and light enough when used in the foreground. I double-checked this on Colour Contrast Checker.

  • Navigation: I opted for tab bars as these are standard navigation controls as users are familiar with them and therefore will know how to get around the app. I also decided to add swipe navigation from the ‘features’ screen back the home screen.

Style Guide

Reflection

Generic takeaways

  • From some feedback I had gotten, some of the icons on the app may be confusing newer car users.

  • Possibly a ‘Start Engine’ button could have been added, however, I wanted there to minimal CTAs on the homepage and I know users would only want to start their car once their inside the car which could negate the need for a ‘start engine button’.

Key takeaway

As the biggest pain point was security, I think that it is important that I explored other types of security, especially under the current climate (Covid-19) where the functionality of Face and Touch Id could be easily challenged. I have decided to reimagine a user flow and a prototype that will offer an alternative method of security.

I have chosen to use the input of the user’s phone number followed by a one-time SMS pin code. This ensures efficiency and security as the pin code can only be used once and sending it via SMS will reduce the amount of the user has to take before they can connect to their car.

User Flow 

Login Screen Prototype

Conclusion

The most re-occurring pain point was the lack of security a user may feel when using a digital car key. To combat this fear, I implemented a familiar security barrier (i.e. Touch Id) and therefore felt secure and later on considered an alternative method that does not require Face or Touch ID. Through the research phase, it was confirmed that location, music and temperature were the primary things user wanted to control when driving their car as well as external updates about their car. The combination of high-tech cars and the user’s reliance on their phones means that a future where digital cars keys become the norm is fast approaching. Therefore, making sure that all the above features are accessed within a seamless user journey was my main goal.

...

Thank you for reading!

bottom of page