Figma Links
If you would like to view our Task and User Flows, Wireframe, or Mockup in more detail. Please use these links, which will direct you directly to the Figma files. These files also include rough draft flows that were not included on the website, and a section on the design style that was used in our mockup.
Connection With User Needs
After we conducted competitive analyses on rival brands, websites, and platforms as well as the contextual interviews completed as part of our user research, we derived several key insights that became the basis of our decisions made in the design of our high-fidelity Figma prototype for FormuLearn.
The first of these insights is the users’ need for real-time, in-context definitions of Formula One terminology. Some of the individuals that we interviewed expressed a desire for streamlined methods of learning an unfamiliar technical term that is mentioned during a live F1 race, as opposed to having to separately search it up. To address this concern, we elected to integrate a live feed into the Live page that periodically displays updates during an ongoing race, with each of these components containing an underlined technical term that allows the user to press it to navigate to a subpage displaying information that is related to said term. This feature is also present in a similar form on the Home, Video, and Lesson pages, in order to further facilitate user interaction and education.
Secondly, interviewed participants expressed a desire for bite-sized highlight content enriched with strategic context, partly due to the lengthy and complex nature of live Formula One races. This influenced our design of the Video page, which is intended to compile highlights from current and past F1 races into one space for user convenience. The user can also utilize the search bar to find specific videos depending on their input queries.
Next, we discovered that many participants wanted a single, centralized hub for quick, reliable answers regarding all facets of Formula One. This initially led to the conception of the Information page, which compiles information on F1 that is divided into the “Tracks,” “Drivers,” “Teams,” and “Rules” sections. The page serves as a direct answer to a frequently-mentioned problem that trying to learn about Formula One was tantamount to piecing together information from multiple third-party sources. Additionally, we also designed the Lesson page to facilitate F1 education in an interactive, visually-appealing format in order to complement the text-based focus of the Information page.
Another insight derived from the participants was a desire for emotional investment through the Formula One drivers and team narratives. This is partly addressed in the “Drivers” and “Teams” sections within the Information page, which are intended to offer baseline information in addition to their respective backstories and historic rivalries between F1 entities. Occurrences of drama and conflict between racers and teams alike are also present in highlights within the Video page. Together, these aspects from both pages serve to transform seemingly-isolated race moments into compelling stories that hook the attention of the user.
Finally, there was a predominant desire for seamless engagement tools to catch up after missing live Formula One races. Participants expressed feelings of being outside-of-the-loop after not staying updated with a few, if not a single race event. These grievances influenced our design process for the Home and Video pages, the first of which shows an active feed of recently-published articles that are related to F1. This allows the user to easily stay up-to-date with news surrounding the sport due to its prominence in the page that they are greeted with as soon as they launch the FormuLearn app. Secondly, the Video page also displays an active feed of short and long-form highlights that serve to summarize recent happenings in visual form. The features on both of these pages enable the user to remain informed with everything F1, especially when on the go.
Task and User Flows
Our Task and User Flows represent the paths a user would take to learn new things about Formula One that they are curious about, or simply lack information about to fully understand and engage with an F1 race/season.
This Task Flow breaks down the tasks necessary for a user to understand a live race. Our team discovered a need for a live race page that offers updates and commentary. Users must navigate to other pages in order to understand any topics that they find confusing.
The User Flow to the right breaks down the central issue of following and understanding a live race into more detailed steps. This flow starts with the homepage and follows the user as they navigate through key systems like the live video feed and live commentary, then exploring items that they find confusing by tapping on them and going to the Informational subpage. Going further, the Lesson and Video pages enable the user to resolve their confusion in real-time, ensuring continued interest and engagement in the current race.
Our second User Flow tackles another critical problem which is understanding a complex technical component of F1. From any text-based area in the FormuLearn app, the user can hover over a term and view an inline tooltip with the term’s definition and application in a race. Then, they can tap “Learn More” to see its full entry in the Glossary page. This Flow is designed to facilitate easy and disruption free learning in-app.
Finally, our last User Flow concerns one of the most important aspects of F1 for user engagement, the drivers. From the homepage, the user can navigate to the Drivers page and tap on a particular driver card from a listing. Then, they can tap “Compare” and select another driver to see a variety of stats and head-to-head metrics from each athlete. This Flow allows the user to easily compare performance data and character information, encouraging deeper engagement with the motorsport. All these flows would be primarily used to develop the navigation logic for the app and design UI components like tooltips, buttons, and lesson hyperlinks. The purpose of these Task and User Flow maps is to understand the needs and journeys of our users in using our application. While we didn't cover all possible tasks and user flows, it helped our group have a deeper understanding of what elements should be included in our design.
Paper Sketches
Our paper sketches depict rough renditions of the Home, Live, Information, Video, and Lesson pages across multiple screens, serving as the method for which the end user will complete tasks that are specific to each page. From any of these pages and/or subpages, the user can navigate to other pages and subpages by pressing on the buttons of the bottom navigation bar. Specific information regarding their usage by the user are explained in the Mockup section. The purpose of these paper sketches is to have a rough idea for our wireframe and eventually our final product. These sketches helped our team select and visualize the main pages of our application. This step in the design process focused our priorities down to these five pages.
Wireframe
Our Figma wireframe depicts low-fidelity prototypes of the Home, Live, Video, Lesson, Information, Article, Sub-video, and Fact pages of the FormuLearn mobile application. These comprise an initial rendition of the user interface of FormuLearn across multiple screens, serving as the method for which the end user will complete tasks that are specific to each page. From any of these pages and/or subpages, the user can navigate to other pages and subpages by pressing on the buttons of the bottom navigation bar. Specific information regarding their usage by the user are explained in the following Mockup section.
Mockup
Our Figma mockup depicts high-fidelity prototypes of the Home, Live, Video, Lesson, Information, Article, Sub-video, and Fact pages of the FormuLearn mobile application. These comprise an advanced rendition of the user interface of FormuLearn across multiple screens, serving as the method for which the end user will complete tasks that are specific to each page. From any of these pages and/or subpages, the user can navigate to other pages and subpages by pressing on the buttons of the bottom navigation bar.
The Home page displays a live feed of articles that are related to Formula One, including their respective titles, publish dates and times, visuals, and brief excerpts. Here, the user can swipe to cycle through these articles, press on one to navigate to the chosen article, or utilize the upper search bar to find specific articles depending on the query. The Live page displays the state of the current Formula One race, with a feed of live updates that appear as they are available throughout the event. The user can view the racetrack, the driver standings, and live updates as they are provided.
The Video page displays a live feed of short and long-form videos that are related to Formula One, including their respective titles and runtimes. Here, the user can swipe to cycle through these videos, press on one to watch it, or utilize the upper search bar to find specific videos depending on the query. The Lesson page provides an educational, interactive overview of specific Formula One terms. The user can press designated buttons to open tabs that display related information. The Information page contains the Tracks, Drivers, Teams, and Rules sections, with each of them displaying related information when pressed, which can be read by the user.
The Article subpage contains the content of an article that is pressed on from the Home page, which can be read by the user. The Sub-video subpage contains the video that is pressed on from the Video page, which can be viewed by the user. The Fact page contains any information that is related to an info link from the Home, Live, Video, and Lesson pages. The user can view and interpret the information.