App Redesign: A new look for F1TV
The F1TV app is the Formula 1 streaming app. It is a quite new application that was launched back in 2018. Its first priority it is to stream live races and sessions of the Formula 1 Grand Prix over the year, it offers exclusive onboard cameras, multiple commentators language options, exclusive stats and live information.
The streaming player it is quite impressive, with its multitude of functions. In fact, I would argue Formula 1 actually execute this priority with excellence, providing an unique product in the market. In addition to that, it contains an immense and complete catalog of past races going back to 1970, while also providing exclusive shows (some of them weekly), documentaries and interviews.
The second priority raises questions about the overall design of the app, failing to execute it properly as a top-of-the-market app should. Therefore, the goal of this project it is to redesign the app focusing on solving those issues and giving the proper look I think it deserves (as an avid Formula 1 fan).
Secondary Research
To understand what were the issues with the app, first a Desk Research was to be made, concerning mainly user reviews in platforms like Google Play Store and Apple Store. As it was expected, there was an insane amount of useless reviews (technical complaints or random comments), but there was a common comment about: “A lot of good content, but the menu is confusing and misleading”. Therefore, the next step would be to confirm this supposition with actual users.
Some other user review insights:
- Add “Continue watching” feature
- Download button for people with bad connection, or want to watch it offline
Usability Testing
I performed an Asynchronous Usability test with 5 users around the globe that use the app on a regular basis. The task I created was to find a specific program on their catalog: “Martin Brundle’s top 10 moments of brilliance”.
It is possible to say that the users absolutely hated the task, in fact, reporting great difficulty to perform it, with no clear categories and difficult navigation throughout the app. From the users:
- “A damn search bar…”
- “Feel like I am navigating in the same page over and over, but I am in a different category”;
- “So much good content, but no structure and operation for it”.
The Redesign
- 1. Creation of a Search system/process. As it is possible to see in the images above, there is no Search icon or process in the F1TV app.
- 2. Creation of a Navigation Bar, in order to facilitate the overall navigation throughout the app.
- 3. Re-think the overall aesthetic and organization of the app, focusing on benchmarks of the streaming market, using Netflix for most of the usability, HBO Max for most of the aesthetic vision (with a little bit of its usability) and a few aspects from Disney +.
- 4. Add a feature for My Favorites and downloads option, as more of an additional feature.
New User Flow Chart
With everything taken into account, I have the pleasure of presenting you, my F1TV Redesign:
1. Search flow
I added a Netflix inspired search icon in the header. It actually balances out the side menu on the left, creating a more symmetric presentation on the header. By clicking on the search icon, the user is taken into the Search Page, where it is suggested programs related to the user’s taste and history. By tapping in the search bar, the user is able to type whatever show it’s looking for (with an added filter option on search bar’s right corner).
2. Navigation Bar
The navigation bar was inspired by the HBO Max clean and more minimalistic navigation bar, with only 3 icons on it. Because the header already comprised the search and even the side menu (with profile and other information), there was no other significant need navigation wise.
To help the users locate themselves inside the app, I added a white line that accompanies the icon when selected, in addition to the effect of filling the icons with white color when tapped.
3. Aesthetics and organization
The focus now was to have bigger and more impressive photography, inspired by the HBO Max long posters that blends into the User Interface background color. It is possible to see this effect especially in the Home Page and Title Page, giving priority to Formula 1 dynamic and majestic beauty.
One little interesting aspect about the Title page is the “Watch Now” button that claims hierarchy for its color, with the intention of attracting the user to press play as soon as possible.
Consistency was something I craved for, as the Title Page and Home Page both share the poster look. But also at the title page, in the “folder” that comprises the other videos from the event (the black folder subdividing between F1, F2 and Shows) it is the same as the one at the Archives Page, but now subdividing between Races, Shows and Documentaries.
It is important to notice now that the categories for the archives are now more defined and are easily interchangeable (finding themselves in the same screen), instead of having confusing categories presented in the side menu as previously made. In regards to categories, I also exemplified in the Home Page possible better categories, such as “Continue Watching”.
The program cards were also re-organized and optimized in a photography focused manner, with bigger pictures and flags. The card title is also now written over the pictures bottom. I added as well a racing category signalization in the Event cards (those without the play icon), displayed as F1 (in red) and F2 if the event has Formula 2 races in it (in blue).
4. My Favorites and Download
To save to my favorites, the user just need to tap the little empty white heart in any of the screens above, with the option to download it just right next to it. When tapped, the heart becomes full of white color and the download icon transforms into a checked signal. This was an interesting tool as in the research users actually claimed for it, as it would help being a mobile app and dependent on internet connection.
The High Fidelity Prototype:
This project was aimed to exemplify and show possible better ways to design such an important app for passionate Formula 1 fans. It is not aimed to fix all the problems, but to express my perspective on the issue. It is worth mentioning that at the day I finished this study case, an update happened in the app and they introduced finally a search system. Which is fortunate for their users and a little bit unlucky for me as big part of my work won’t mean a lot. Although it is possible to argue that my thesis and perspective was confirmed by the update.
Thank you for reading and feel free to leave a comment, or even check some of my other articles!
