Each concept renders the same three screens with the same mock data and the same functionality. Only the design system differs, so you can compare visual and UX preferences directly. A floating switcher lets you jump between concepts.
Concept a
Civic Minimal
Singpass / NS.sg clarity
Line-based layout, near-zero decoration and plain ruled tables. Optimised for staff of any age or device familiarity — everything is labelled, nothing is hidden behind hover.
- Highest legibility
- Plain ruled tables
- Blue used only for action
- Typeface: IBM Plex Sans
Open Concept AConcept b
Smart Workspace
Notion / Google Drive density
Search-first with a compact sidebar, spreadsheet-density grids and sticky headers. Best for power users handling long class rosters and product catalogues daily.
- Most data per screen
- Sticky attendance grid
- Command-style search
- Typeface: Inter
Open Concept BConcept c
Modern Friendly
Healthy 365 / Fresha warmth
Warm neutral canvas, soft rounded cards, icon shortcuts and small progress meters. Still operational, but more approachable for occasional and front-desk staff.
- Softest tone
- Progress + status meters
- Icon-led shortcuts
- Typeface: Plus Jakarta Sans
Open Concept CPrototype only — data is mocked and shared across all three concepts. Modules outside the three designed screens show a placeholder.