Design Process

1. Joining a Team
– What we did: formed our group, defined roles and communication norms, chose the F1-learning app concept.
2. Group Milestone: Define
– What we did: agreed on project scope, high-level goals, target beginner audience, and success metrics.
3. Competitive Analysis (individual deep dive)
– What we did: surveyed Crash.net, Formula1.com, fan forums, and learning apps; documented strengths (live updates, clear layouts) and gaps (jargon overload, scattered info); produced a competitive matrix.
4. Contextual Interviews
– What we did: interviewed five casual F1 fans, captured quotes and pain points around terminology (“ERS,” “undercut”), information sources, and preferred formats.
5. Group Milestone: Understand
– What we did: synthesized interview and competitive data into key insights; created empathy maps and three personas; distilled core user needs (in-context definitions, bite-size lessons, single hub).
6. Communicating Design Ideas
– What we did: drafted task flows , sketched paper wireframes, built low-fidelity Figma mockups, annotated design rationales.
7. Bonus: Empathy Map or Journey Map
– What we did: refined our empathy map and created a journey map showing a new fan’s first race-weekend experience.
8. Group Milestone: Design
– What we did: produced high-fidelity Figma screens for Home, Live Race feed, Video Highlights, Lesson modules, Glossary, Driver Compare, and Race Calendar; applied color, typography, iconography.
9. Analytic Evaluation
– What we did: ran a Nielsen-10 heuristic review and cognitive walkthrough on the mid-fi prototype; documented severity-rated issues (inconsistent controls, icon clarity, feedback gaps) and implemented fixes (fixed footer nav, labeled icons, flashcard feedback).
10. User Evaluation
– What we did: conducted remote moderated sessions using the high-fi Figma prototype; measured task success, time, and iterated on onboarding language, tooltip behavior, mobile tab bar, video filters.
This timeline shows how each course deliverable directly informed our data-driven design process, culminating in a polished, user-validated Figma prototype.
