The Alternative Story

Staff webapp — three design concepts

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 A
Concept 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 B
Concept 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 C

Prototype only — data is mocked and shared across all three concepts. Modules outside the three designed screens show a placeholder.