top of page

Design Process

tumblr_mdr0u2zbdX1rw6mk6o1_1280.jpg

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.

tumblr_mkupd2QPD81rw6mk6o1_1280.jpg
bottom of page