Context
Do you remember how you learned the rules of your favorite sport? It’s strange to consider but even pillars of pop culture, like baseball or football, need to be taught. But where would you go to learn the fundamentals, the basics, the rules of a sport you’re not familiar with?
Formula 1 (F1) is notorious for not being as popular in the U.S. as other countries. My preliminary research supported this, with many users saying they weren’t sure how to start watching, much less learning, F1. This prompted the question:
How might we leverage an app to efficiently educate and onboard new Formula 1 viewers?
Tools
- Figma
- Otter.ai
- Marvel
- Draw.io
Outcomes
The final deliverable was a prototype iOS app, the Formula 1 Companion. With the tagline “Fast cars, fast learning” this prototype teaches the bare minimum to comprehend and enjoy watching a Formula 1 race. It also features glossary, news, and other features useful to the fan experience. Multiple users with various levels of racing knowledge said the prototype gave them confidence to start watching & learning F1.
This was my first UX project. While there’s a lot that can be improved, this showed me just how much value can come from professionally compiling and presenting information. It also emphasized how different UX research is compared to psychology research.
Biggest Achievement: I was already familiar with Figma, so I was able to help with teaching the class while working on this project. This included setting up frames, creating a carousel, and some troubleshooting.
Biggest Lesson: This class had a strict set of methods to be used in a specific order. This was helpful for education but wasn’t representative of dynamic, messy, real-world design.
Competitor analysis showed a lack of educational material for F1 and its competitors.
Personas inspired by Amber Westerholm-Smyth’s “Your personas probably suck. Here’s how you can build them better.“
Exploratory research
Competitor analysis showed market whitespace for sports educational resources. User interviews showed a perception that F1 is complex and difficult to understand. There was a clear need for education prior to enjoying F1, but users stated they didn’t know how to get that education.
I compiled insights from user interviews into personas that used mythological names and symbols to be more objective. These personas had two major sections: learning styles and learning topics.
This culminated in our How Might We statement;
How might we leverage an app to efficiently educate and onboard new Formula 1 viewers?
Paper prototype
Prototyping began with drafting a sitemap and user flow. I added all educational topics that surfaced in my initial user interviews. I also created a quick “new fan experience” journey to quickly prepare anyone to watch F1. All of these options funneled users to watch educational videos or live F1.
I then sketched a paper prototype in Marvel to begin testing. You can find this prototype here.
User testing pt.1
There were no major errors with the paper prototype, but the copy was unrefined. The sitemap was also based on user wants instead of user needs.
The users who tested the paper prototype didn’t understand where certain buttons would lead them. This resulted in more anxiety than learning. The app also lacked community resources, which was a learning-style that I overlooked.
All of this feedback was categorized into a value effort prioritization matrix for the next iteration of The Formula 1 Companion.
My first site map draft for the Formula 1 Companion created in draw.io / diagrams.net.
View the full paper prototype on Marvel here.
Wireframe prototype
My next prototype iteration was a wireframe in Figma. This established the app’s design standards for fonts, menus, CTAs, and more. I also iterated on the copy and information architecture per user feedback on the paper prototype
User testing pt.2
There were improvements over the paper prototype testing, but users still reported the content was too dense.
It was vital for this content to have minimal friction as an educational resource. This prompted the “fast cars, fast learning” tagline to help guide the final version of the prototype.
The first version of the Formula 1 Companion prototype in Figma. This was too text heavy, and didn’t efficiently educate users.
Final prototype
The final version of The Formula 1 Companion is a mid-fi prototype that’s a companion for someone who is watching F1. That includes breezy, easy-to-scan reference content, with options to go deep into news, community, and other resources.
You can see this version of The Formula 1 Companion here.
The final prototype of the Formula 1 Companion. This iteration is more fully-featured, including a glossary, a news section, and more. Most importantly, the amount of text was reduced, and a new fan experience “Quick Start” page was added.
Presentation
This full design process was presented to my entire class, the instructor, and teaching assistants. You can view a version of this slide deck here.
Next steps
This was the end of the project, but the final round of user testing provided some great ideas for potential next steps. This includes adding info on teams and drivers, news alerts, and expanding The Formula 1 Companion to other levels of formula racing (F2, F3, FE, etc).