MyFerrari App UX Case Study

Project date: 20th October to 3rd November 2020–2 weeks
My role: UX researcher, UX designer and UI designer — solo project

Software and websites used to create this project:
Developer.apple.com/design/human-interface-guidelines
Figma.com
Whimsical.com
Contrastchecker.com
Smartmockups.com
Photoshop
Microsoft Word and Excel
Pen and Paper

Methodology:
Double Diamond process

Introduction:

Within this project I aim to introduce additional functionality to the MyFerrari app while adhering to existing brand styles in other Ferrari digital products. The designs are for an iPhone SE device and therefore I ensured that Apple’s human interface guidelines are referenced and adhered to.

Objectives:

Create an app for a luxury car brand with the intention of providing functional support for car owners to utilise the app daily. The app must focus on clarity and functionality and car owners must want to use the product over the norm of carrying keys in their pocket. I will be looking into features such as geolocation, NFC and Bluetooth as ways to enhance the apps capabilities.

Deliverables:

· Three screens designed for an iPhone SE, which must comply with Apple’s human interface guidelines.

· Style guide of brand assets, design components etc

· As written case study documenting my design process and outcomes

Business Research:

Ferrari history:

Ferrari is a world-renowned luxury sports car manufacturer with its roots in motorsport, particularly F1 cars. Scuderia Ferrari was initially formed in 1929 with founder, Enzo Ferrari, having no intention of producing road cars. After some years of buying, preparing, and fielding race cars for “gentleman drivers” the Ferrari workshop designed and built its first race car in 1935.

One of their current models, the 812 Superfast, is described on the Ferrari official website as refined, essential and never excessive and I think these ideas are the key design principles I’ll be focusing on when working on re-designing and introducing new features to the MyFerrari app.

Ferrari branding and guidelines

While conducting business research I was not able to find any distinct information regarding UI standards or style guides, so I suspect this information is not freely available to the public. On analysis I found style trends between the official Ferrari website and app which use either a dark grey or dark blue as the primary colour with white or light grey text which is offset with the iconic “rosso corsa” red as an accent. The images and videos used on the website are bold and span the full width of the screen to highlight the products and associated merchandise and animations are smooth and organic to scrolling.

Current App Analysis

From looking into the apple store images and Ferrari’s press release video on YouTube I was able to analyse the app. Unfortunately, I was not able to download it and use it myself as I do not own a Ferrari myself. I liked the dark mode design of the app and the sleek feeling it gave off. While there are some features that benefit the customer, such as being able to book in appointments for a service, I felt the main push of the app was to promote events, races and cross selling merchandise rather than enhancing the experience of owning a Ferrari.

Pain Points:

1. Limited interactivity with your Ferrari

2. Possibly too heavily focused on promotional materials and new purchases

Competitor Analysis

I found the main difference between the MyFerrari App and some of the competitors was the additional functionality they offered, which is what I suspected when I first took analysis of it. While remote start, which is a feature on the Cadillac app, is not legal except on private land in the UK I think I could borrow the idea of geofencing from Mercedes-Benz so that users could set up boundaries of their own private land where this feature would be available, outside of these boundaries you could still unlock but not start the car. Additionally, I would like to add climate control and pre-heating like the apps Porsche, Lexus and Mercedes-Benz have as this would add extra value and functionality. I will be undertaking a mind map with all my ideas and deciding what to add later in the case study.

User Research:

I sought to get a better idea of what users were looking for in an app that connected directly with their car and also the general brand identity of Ferrari as well as any concerns with linking their device to their car.

Ideation:

Mind Map

I initially created a mind map that set out the current app’s features and then generated ideas of new feature. I wanted to think of additional features which would make the best use of having a phone as an extension of the vehicle and would add enough value to the app that customers would want to use the app with their new Ferrari.

I particularly focused on additional security measures as this was a main concern of the users I interviewed.

Low Fidelity Sketches

I then decided I would focus on the journey of how the customer would interact with the app and open it through a notification on their phone. I chose to design this first interaction, the home screen which had the information on their “active car” (leaving possibility for customers to switch between multiple models as the current app has a garage tab), further status information for the active model and a user profile screen.

Card Sorting

I felt like I needed additional structure and organisation on how the features on the app would fit together. I feel like there is so much information to convey and numerous possibilities on what would be most useful to the customer.

Style Guide

With creating a style guide and designing various assets I had to ensure that these were compliant with Apple’s human interface guidelines. Tappable objects and buttons had to be a minimum of 44x44 pixels, with the most preferred size by users being 60x60 pixels. Objects that just provide information could be as small as 16x16 pixels, however I scaled these to 24x24 to provide more legibility. I also wanted to emulate a real start/stop button to add a bit of realism in my design.

Final Designs:

I wanted to design a user’s interaction with the app and started from the user approaching the car, within a certain distance, set by the user in their settings. The user’s phone would come up with a notification that when tapped would change to a screen which when they scan their finger print on the home button would unlock the active car and launch into the main app. Here they can also access functions like starting climate control or starting the playlist they have linked via their Spotify. They can then access further checks or functions within their active car in the status page or they can update notifications and other details in the profile page.

Summary

User Reaction

Reflections

Overall I’m pleased with how the design turned out and the feedback I received as I really wanted to have a sense of it being functional and user friendly. I am particularly pleased with the idea that the app might be easier to use, at the very least at first glance, than the car dashboard itself and that it could be picked up and its use is obvious to new users. I did my best to ensure all human interface guidelines were met to ensure clarity and usability and that my app design would add value and additional function to the Ferrari experience.

One of my key focuses was to ensure that the most important functions were accessible as fast as possible, which is why the card sorting exercise was so valuable. However, I’m not sure I left enough white space between objects and that there might be too many bars. I am not sure in what other ways of presenting the information I could have made at this time. While I think that the general colour choices I made match the existing app, I may have missed the mark on translating the clean design that the MyFerrari app already has.