The Challenge
The challenge for this case study was to design an iPhone app, which will allow car owners to utilise their phone to replace the need of traditional car keys and more.
An objective here was to focus on clarity and functionality. Car owners must want to use this product over the norm of carrying keys in their pocket. The app needs to be easy to use and engaging, and it should provide functional support for car owners to utilise their iPhone daily.
Process
I chose to create the digital car key app for Ferrari.
To direct my UX case study, I decided to follow the double diamond process outlined below.
Phase 1 : Understanding — User Research
User Persona
Sadly, I can’t drive. I also know very little about…cars. So this part of my case study was absolutely crucial for designing a product that car owners would want to use.
I started with creating a user persona. A persona sums up and clarifies your target audience — and how your design or product can help them. Once you understand your target audience, you can shape your design in a way that solves their needs.
Below is the user persona that will direct my case study:
Jason wants to use the app in replacement of his traditional car keys. He will also be more likely to use the app if it provides some additional functionality — particularly focusing on displaying information about his car that is currently not readily available in any single place on his device.
Finally, the app needs to reflect how Jason feels about his Ferrari — it should be luxurious, fast and slick looking.
Online Survey
After creating the user persona, my next step was to talk to the actual people. The objective is to create an app that will replace traditional car keys and provide some additional functionality that will encourage car owners to use the app often.
I wanted to ask my audience what information (about their cars) they would want to be displayed on the main screen. I created an online survey and gave my respondents a few options to choose from — I asked them to choose 6 most important pieces of information. Here are the responses:
These responses were very useful in identifying what functionalities car owners will find useful to have in the app in addition to the ‘car keys’ feature.
Therefore, my idea is to have the main app screen where the immediate statistics about a car will be displayed — top 6 pieces identified by the questionnaire (for example, current fuel level, temperature inside of the car etc…).
Phase 2: Defining the problem
Brainstorming
In this stage, my coursemates and I did a brainstorming session, where we jotted down our ideas for different features for the app:
It was interesting to see a fair amount of suggestions from my online survey aligning with the ideas from this brainstorming session (eg battery level, gas level, tyre pressure).
I made a decision to display these stats on the main screen (top 6 from my survey):
- Fuel level (100% of respondents)
- Security status (100% of respondents)
- Actual mileage (82% of respondents)
- Tyre pressure (82% of respondents)
- Battery level (82% of respondents)
- Temperature (73% of respondents)
And for my interactive prototyping I decided to develop these features:
- Car keys feature — ie unlock the car and start engine, as it is the main goal of this case study
- Route planning — this idea came from the brainstorming session.
Phase 3 : Develop
Lo-fi Wireframes
Once I knew what features I wanted in the app, I drew the low-fidelity (Lo-fi) wireframes for the screens:
I set out to design the main/home screen, 2 key features screens that aim to replace traditional car keys, and 2 optional features for tyre pressure and route planning.
Design System
Before moving on to designing the high-fidelity (Hi-fi) interactive screens, I also created the style guide for the UI designs. What would Jason, my user persona, want the app to look like? He would want it to have this luxury feel — exactly how he feels about his Ferrari car.
So combining this with Ferrari brand colours, I settled on the style guide below:
Phase 4: Finalise
Hi-fi Wireframes
After sketching out the lo-fi wireframes and defining the design system, I went to Figma to design hi-fidelity wireframes. Very importantly, I wanted the app to be accessible to everyone, so I made sure all the text and image contrast against background complied with WCAG Accessibility Guidelines.
I was designing for iOS, so I consulted Apple’s Human Interface Guidelines to make sure my prototype provides a more intuitive and consistent user experience, and integrates with an iPhone seamlessly.
After presenting my initial screens to the users, I made some adjustments. For example, I initially displayed fuel level in litres, but some people said they will actually prefer if it is displayed in miles (how many miles the fuel will last them for, basically).
After their feedback, here are my final hi-fi designs:
Route Planning feature
I was really keen to do something more than just a route plan. So I started thinking — if all the information about the car is now available in one place, can I leverage that? Can I do something more with this information?
I came up with the idea that in addition to route length and estimated time - the app should also tell the driver how much fuel will be used for a journey. And how much it will cost them. This information could be very important when planning long trips, so drivers can plan in advance if they need to refill their car and how much it’ll cost them.
Interactive Prototype
And below is the prototype with an end-to-end user flow:
Apple Wallet — Digital Car Key
Wouldn’t it be cool if you could add the car key to your Apple Wallet?
Inspired by BMW’s digital car key, I designed one for Ferrari too:
Conclusion
This app was so much fun to design.
As I wrote earlier, I am very new to the car world (perhaps it’s time for me to learn to drive…). So speaking, interviewing and understanding car drivers was crucial. During this research phase of my case study, I realised how truly important it is to put yourself into your the car owner’s shoes to deliver the best product that will solve their needs.
As it is a case study, I didn’t get to do extensive testing phase. I would have loved to do more user testing and improve the app even more after a few iterations, if it was a real project.
Thank you for reading guys, and I hope this was somewhat useful 😊
