Patient-Centric Hospital Appointment Experience and Design System

Audience

Who it is for

Web design / UI teams whose panel includes a look-and-feel mark.

A guided booking in <90 seconds on a phone viewport, plus a living style guide page.

Branches

Team size: 1–4 students

Problem

Existing vs proposed

Hospital sites bury booking under 6 menus. Elderly users bounce. Internal reviews need a system, not one pretty screenshot.

Design tokens + Figma-like component page in the app, booking flow with SMS-like OTP mock, doctor calendar, patient file (reports).

Build

Modules

1. 1. Tokens

   • Type scale, colour, spacing
   • Component gallery

2. 2. Find & book

   • Specialty, doctor, slot
   • OTP mock

3. 3. Patient

   • Upcoming, reports, prep

4. 4. Staff

   • Day calendar
   • No-show mark

Deliverables

Included with the kit

• Complete source code (ZIP + GitHub-style repo)
• Database schema and sample data / dataset notes
• README.md — how to run, stack, modules, and demo path (Windows + college lab)
• Viva question bank with short answers
• Two mentor reviews: architecture, then final demo