UX10: Capstone: three design projects for SehatSlot
Planning the capstone
🎯You'll be able to
Plan the capstone: scope, order of work, evidence and time.
🏠The everyday picture
Before cooking a big family meal, you decide the dishes, shop once, and start with what takes longest. Planning first means everything is ready at the same time.
📘What it really is
- The three projects, all in the SehatSlot kit:
- A usability study reported honestly: a complete study plan, tasks that don't lead, consent and privacy, findings in the agreed
format, evidence that matches the notes, task results counted correctly, survey figures that match the file, and changes and limits
(8 tests in
npm run test:research); - A booking journey that works for everyone: no serious accessibility problems, visible labels, a keyboard-friendly slot picker,
worded errors, a helpful phone error, an empty state, tap targets, no sideways scrolling at 320 pixels, titles and back links, and the
whole journey with details kept and the phone number masked (10 tests in
npm run test:prototype); - A small design system: complete tokens, contrast of every pair, a visible focus colour, spacing in steps of 4, the prototype using
only tokens, every component state, an accessible component page, documentation, the prototype using the components, and a
changelog (10 tests in
npm run test:system). -
Build in this order: Project 1 first (its findings decide what to change), then Projects 2 and 3 together, because the prototype uses the system's tokens and components.
-
Each project has acceptance tests in the kit and a marking guide on its project page. Add your own criteria too, such as "a second-round test shows 4 of 5 booking without help".
-
Use this overview to judge your own work (each project page has the detailed marking guide):
| Area | What "good" looks like |
|---|---|
| Thinking | A problem statement with who, goal, obstacle and measure; evidence over opinion (UX1) |
| Research | The right method, fair recruiting, consent, tasks that don't lead, neutral moderation (UX2) |
| Synthesis | Findings with counted evidence, severity, honest numbers and limits (UX3) |
| Journeys | Need-to-outcome journeys, clear structure, plain words, every flow state (UX4) |
| Layout and forms | Several ideas, clear hierarchy, mobile first, forms with labels and worded errors (UX5) |
| Visual design | Readable type, measured contrast, a spacing scale, purposeful motion (UX6) |
| Accessibility | Keyboard, screen reader, targets, reflow and inclusion for India (UX7) |
| Prototype | Right fidelity, every state, tested with people and tools, no dark patterns (UX8) |
| System | Tokens, components with states, documentation, handover and versions (UX9) |
📝A worked example
Input: the starter kit.
Steps:
- Run
npm install,npx playwright install chromium, thennpm test. - Note which tests pass.
Expected output: 3 of 28 pass (prototype tests 8 and 9, and system test 1). Write a one-page plan: the order of work, which tests each step should turn green, the evidence you'll keep (sketches, notes, test output, screenshots) and a timeline of about 40 to 50 hours.
🌍Where it's used
- Product teams plan design work as milestones linked to research findings.
- Agencies agree a scope and deliverables before starting.
- Portfolios: the plan becomes the first page of the case study.
📝Case scenario
A learner started by polishing the confirmation page's colours. Two weeks later, the research findings showed the main problems were on the slot screen and the form, and most of the polish was in the wrong place. Starting with research would have saved the time.
🖱️Try it
Write your capstone plan with milestones and the tests each should pass. Success: research comes first, every finding has a planned change, and every milestone names its evidence.
⚠️Common mistakes
- Starting with visuals. Sign: colours chosen before findings exist. Fix: research first.
- No evidence kept. Sign: nothing to show for sketches and iterations. Fix: save as you go.
- Treating the tests as the whole job. Sign: no session with a real person. Fix: test the redesign with at least one person.
🛠️For your project
This plan becomes the "What I did" section of your first case study.
✅Quick check
Which project comes first, and why?
Show the answer
The research study, because its findings decide what to change.
Why are Projects 2 and 3 done together?
Show the answer
Because the prototype uses the design system's tokens and components.