Module 3 · Group project
The Fundamentals
An interactive web application built from the fundamentals — no frameworks, no libraries, just the web and TypeScript.
- 3–4
- students per team
- 3
- weeks
- 30
- minute presentation
- 16 Oct
- presentation day
- 24
- graded criteria
The mission
Frameworks come and go. The fundamentals stay. This project is about knowing them cold.
Each group creates an interactive web application using the fundamental web technologies and the tools of the Design Thinking ideology.
Agile methods — user stories, a backlog, status meetings and sprints — organise the group work.
Think like a designer
User research, testing and a full design hand-off, the Design Thinking way.
Vanilla TypeScript
Functions, arrays, objects and loops — no JavaScript frameworks or libraries.
Work like a team
User stories, a backlog, sprints, and a Git repository everyone commits to.
Live for everyone
The finished product is online, open to the general public.
Requirements
- User research.
- A moodboard.
- A lo-fi prototype: sketches or wireframes.
- User testing.
- A UI style guide: colours, typography, grids, components and iconography.
- The final UI design.
- HTML and CSS or Tailwind.
- Pure (vanilla) TypeScript: functions, arrays, objects and loops.
- No JavaScript frameworks or libraries.
- Delivered as a Git repository.
- Design Thinking tools for the product.
- Agile for the team: user stories, backlog, status meetings, sprints.
- The final product must be available online for the general public.
What you hand in
Ideas
A focus or task tracker
Help someone get through their day, one task at a time.
A colour-scheme generator
Palettes that work, for people who are not designers.
A music-making app
Beats, loops or melodies, right in the browser.
Your own idea is welcome too — talk to your teachers first.
Timeline
Empathise & define
Who is this for, and what is their problem?
- User research and interviews
- Problem statement
- User stories and backlog
- Moodboard
- Kick-off
- Mon 28 Sept
- Presentations
- Fri 16 Oct
- Ends
- Fri 16 Oct
Presentation
Introduction · 5 min — The group, the audience tries the app (QR code!), a demo, and how you worked.
Scored here: 5 of the 24 criteria.
The project finishes with a retro meeting.
How it's graded
Teachers, invited industry judges and the other students score your team from 0 to 10 on each criterion. Every criterion counts the same, so an area with more criteria carries more of the grade. Drag the sliders and watch the result.
The mean of all 24 criteria. The bar above shows how much of it each area carries.
Each criterion's score blends two juries. The panel — your teachers and the invited industry judges — carries 80%; the student audience carries the other 20%. Try one criterion:
A judge invited for design or for code only counts on that area and the presentation criteria. If only one jury scored a criterion, that jury's score is used on its own.
80% × 8.0 + 20% × 6.0
After the presentations you rate each teammate on contribution and teamwork, from −2 to +2. Your teachers read the ratings and confirm your figures, and those turn the team result into your grade. Pick a square:
Across: contribution. Down: teamwork. Each square is the change to the team result.
⚖️ Contribution 0 — Average
🤝 Teamwork 0 — Average(0 + 2) × (0 + 2) − 4 = 0 → ×1 (±0%)
The two figures multiply rather than average. Doing all the work while shutting the team out (+2, −2) is not “average”: it keeps 30% of the grade. The most a grade can rise is +30%; it can fall by as much as −70%.
Team result 7.0 × ±0%
Questions
Can we use React, or a library like jQuery?
No. This project is pure TypeScript — no JavaScript frameworks or libraries. Tailwind is allowed for styling.
Can we pick our own idea?
Yes, but talk to your teachers first.
Does the product have to be online?
Yes. The final product must be available online for the general public, and the audience tries it during the presentation.
How is my own grade worked out?
From your team's result and how your teammates rate your contribution and teamwork. Try it in the grading section above.