WEB-ADMIN: UI/UX Design System

[roywanyaga]

Objective

Establish UI/UX designs for the admin portal in Figma, providing visual reference for engineers, a consistent design language for downstream consumers, and a starting point for the design token system.

User Story

As an engineer building admin features,
I want Figma designs that show what each screen should look like and how interactions should flow,
So that I can implement consistently without inventing visual decisions ad hoc.

Key Deliverables

• Figma file with designs for all MVP1 screens (auth, dashboard, user CRUD, location tree, org/careteam CRUD, wizard all 5 steps)
• Design token specification (colors, typography, spacing, radius, shadows)
• Component library in Figma matching the Shadcn-style React components
• Interaction patterns documented (loading, empty, error states; form validation; confirmation dialogs)
• Design handoff process documented

Acceptance Criteria

• Figma file is shareable with engineers
• Design tokens are explicitly defined and consumable from code (CSS variable names, Tailwind config)
• All MVP1 screens have a design
• Wizard flow is fully designed with all 5 steps
• Loading/empty/error states designed
• Design system can be forked by a downstream consumer for retheming

Cross-Repository Tasks

Design (ohs-player-reference-web-portal/docs/design)

• Onboard UX designer to project
• Audit existing OpenSRP web admin designs as reference
• Figma file creation with design tokens
• Design all MVP1 screens
• Wizard flow design
• State variations (loading, empty, error)
• Handoff to engineers per epic milestone

Timeline

Design work runs parallel to engineering:

• Week 1: kickoff, design tokens, auth + shell
• Week 2: dashboard, user management
• Week 3: user create flows
• Week 4: location, organization, careteam
• Week 5: wizard flow, all 5 steps
• Week 6: polish, handoff completion

References

• Existing OpenSRP web admin (reference, not destination)