Prototype Analytic Evaluation and User Testing
To evaluate our initial design ideas for FormuLearn, we conducted a two-pronged approach: analytic evaluation using Jakob Nielsen’s 10 Usability Heuristics and user testing with members of our target demographic. Both methods gave us valuable insight into the strengths and weaknesses of our early prototype, allowing us to identify both immediate design concerns and opportunities for future improvement.
Early iterations of our design were mainly developed through a back and forth dialogue within the team in which we threw out ideas, sketches, patterns and designs that we thought would fit best for the product. From there, we solidified our initial design in a more formal matter in the form of Figma Mockups. This is what allowed us to conduct an even deeper evaluation through the use of both Analytical Evaluation and User Testing. Analytic Evaluations involved individual team members viewing the application through usability heuristics. We then came together to synthesize our findings. Our User Testing involved an interview like process, where our previously interviewed users were able to test our initial prototype. We received their feedback individually, and then synthesized our findings. These two methodologies gave us a way to refine what we had into a finalized prototype.
Included in the grid below are several strengths and weaknesses that were found in our analytic evaluations and user testing. The weaknesses in red are clickable, and will direct you to a page that displays how we responded to these critiques.
The bottom navigation bar clearly indicates which section the user is currently viewing, maintaining strong visibility of system status.
Following mobile application industry conventions to provide a readily available Menu and Search bar
No function in which users can find documentation or help in completing their tasks. Documentation and help should be easy for users to find.
Many of the subpages lack clear exits for users' unwanted actions. While users are able to exit the pages by clicking through the menu bar, there are no clearly marked exit or undo links.
Icons and labels use familiar, real-world terms—such as “Live,” “Info,” and “Learn”—which align with user expectations and help ease newcomers into the app.
Consistency across all pages for color scheme, text fonts, aesthetic and menu bar
No current error messages for the app, but the layout leaves room for this addition or future feature
The application provides various tools to assist beginner Formula 1 fans in learning about the sport.
What We Learned
Both analytic and user testing made it clear that while our interface has a strong visual and structural foundation, there were some gaps in interactivity, navigation, and accessibility that significantly impacted the user experience. We discovered that adding simple and arguably expected navigation features like back arrows can dramatically reduce user confusion. We also realized that user trust and engagement rely on visible feedback and support features, especially for an app targeting beginners learning a complex topic like Formula 1.
Following our evaluation, we iterated upon our prototype by implementing universal “back” navigation functionality, adding some help documentation, improving the search and content filtering experience and adjusting some of the design to better mesh with a proper environment to read content.