Formula 1 Redesign
Reimagining the Formula 1 racing mobile app
Role
UX/UI
Project
Redesign case study
Duration
3 months
Project TL;DR
The Formula 1 mobile app's redesign addressed several key issues: lack of accessibility features, poor search functionality, and limited user interface options. The original design lacked audio and visual accessibility, language options, and a method for users to easily find and save articles.
To improve this, I created low-fidelity designs focusing on user tasks and pain points, integrating accessibility features like dark mode and language options. User testing revealed that while the new interface was well-received, users wanted the ability to save and revisit articles.
The updated design now includes a searchable home screen, a consistent interface for races and standings screens, and a new racer profile screen for user preferences and notifications. This redesign aims to enhance the app’s functionality, take accessibility into account, and improve the overall user experience, reflecting my commitment as a passionate Formula 1 fan.
The Problem
The Formula 1 mobile app is lacking in a few features which led to reimagining the user interface design and experience. I chose to focus on highlighting and solving two key areas: accessibility and search.
Accessibility
In the original design, there are no accessibility options. This includes no audio or visual accessibility features, no option for light or dark mode, and no options to change languages. This lack of accessibility leaves out a large chunk of the population that can actually use this app successfully. Since the majority of Formula 1 fans live in the EU, language options and the ability to change the language should be of importance rather than based on where the user resides when first signing up for the free mobile application.
Search
The findability and discoverability of the app is non-existent. When the app was designed they did not prioritize if the user might want to find articles, search for certain news pertaining to teams, or just share an article they found of interest. This allows the user to read news and then never find it again unless they commit to scrolling back through all the articles until they come across it again.
Original designs
The existing mobile app design features five main navigational pages, each with nested sub-pages. However, the use of each team's brand colors throughout the design created a challenging viewing experience.
Ideation
I kicked off the design stage with low-fidelity designs while keeping in mind the user tasks and pain points collected during the research phase of the design process.
User Testing
During the prototyping process, I reached out to several people of varying ages who were willing to provide feedback on the new designs and overall site flow.
What is working
Users responded well to the new interface design was pleasing to the user and followed a new design standard that was not there originally. They also noted that putting more of an emphasis on accessibility features such as dark mode and language barrier options helped make the app more enjoyable and usable.
What needs improvement
Several users accounted for the need for saving articles within the app and if there could be a way to revisit them at another time. This was something that was taken into consideration and added to the new designs.
Outcome
After user testing, I pushed the working prototype in Adobe XD further, keeping the user testing in mind as I expanded on the needs and features of the current app.
Home screen
When reimagining the home screen, the main changes were to implement a searching feature. The user can search using the search button or by searching by teams in the scroll at the top of the screen. This is to allow the users selected racing teams news to be more of a focus rather than having all news on the page.
Race screen
On the races screen, the main changes were to create a visually consistent interface and to introduce page buttons on the top by category. This was also a feature that continued through into the individual races below to provide more detail to the user when clicked on.
Standings screen
While designing the standings screen, the main thing that was kept in mind was that the visual system was to be consistent on the page, to allow for driver hierarchy, and to have the buttons system established in the races screen to follow through in this screen.
Racer profile screen
When inventing the racer profile screen, the main goal was for there to be a place where all the user-specific preferences and data could be collected. This included allowing the user to choose which team they support, adding accessibility as an option when it was not before, and to allow for the user to turn race notifications off in their profile.
Reflection
Overall this was a passion project for an app that I use quite frequently as a Formula 1 fan. When taking into consideration how widespread Formula 1 is as a sport, having a user interface and user experience that is accessible to all fans was my top priority. I hope that as I continue to flush out the designs and iterate on the features that can be of use to the user, the application cannot be only visually appealing but also functional in its design.