UI/UX Design & Prototyping
High-end design system, experience principles, and prototyping plan for SOQ TMS — delivered by AIEE.DEV.
Delivery partner
AIEE.DEV — AI Enterprise Engineering. Implementation design, frontend, backend, and integration for SOQ TMS are scoped under AIEE.DEV delivery.
Design goals
Build a premium Singapore training-ops product — not a generic LMS look. Users (admissions, trainers, students, sales) must feel speed, clarity, and trust on funded/WSQ workflows.
| Principle | Meaning for SOQ |
|---|---|
| One job per screen | Admin queues, Student dashboard, Trainer session — each screen has one primary action |
| Evidence-first | Attendance, assessment, funding status always visible when money/compliance is at risk |
| Calm density | Power users get dense tables; students get calm, mobile-first flows |
| Identity trust | Singpass, offers, certificates feel official without clutter |
| Accessibility | WCAG 2.2 AA on public + student + exam-adjacent flows |
Product surfaces (4 UI products)
| Surface | Users | Tone |
|---|---|---|
| Public Course Website | Prospects | Brand-led, marketing + conversion |
| Admin Workspace | Academic, admissions, finance, sales | Dense ops console |
| Student Portal | Learners | Clear timetable, payments, progress |
| Trainer Portal | Trainers | Session-first mobile-friendly |
Shared: design tokens, component library, notification patterns, empty/loading/error states.
Design system (high level)
Brand tokens
Source of truth: SOQ brand pack + 3.2 Design & website appendix (captured colours, typography, and imagery from soq.edu.sg). Generic placeholders below apply only until appendix sign-off.
| # | Detail |
|---|---|
| 1 | Primary: derived from SOQ institutional palette (trust, education) |
| 2 | Accent: CTA / funding alert colour from current site CTAs |
| 3 | Neutrals: match public site grey scale; ops consoles may run denser |
| 4 | Typography: display face from SOQ marketing; readable sans for Admin |
| 5 | Radius/spacing: 4/8 scale; avoid card spam in ops views |
Component tiers
- Primitives — Button, Input, Select, Dialog, Sheet, Tabs, Table, Badge, Toast
- Domain — Student360 header, FundingStatusPill, AttendanceMatrix, OfferLetterPreview, RunCapacityBar, CommissionBadge
- Patterns — Filterable data tables, wizard steppers (diploma application), approval timelines, integration job drawers
States every screen must specify
Empty - Loading - Partial data - Error - Permission denied - Offline/retry - Success confirmation
Key journey maps (prototype priority)
P0 journeys
- WSQ registration with Singpass + eligibility + fee estimate
- Admin: create course run -> enrol -> take attendance -> submit to SWDA
- Student: QR check-in + see attendance %
- Trainer: mark attendance + submit results
- Finance: order -> invoice -> Xero sync status
P1 journeys
- Diploma application -> offer -> accept -> pay
- Module exemption + fee waiver approval
- CRM lead -> opportunity -> application
- SWDA hub: failed submission -> fix -> resubmit
Prototyping plan (AIEE.DEV)
| Stage | Deliverable | Outcome |
|---|---|---|
| Discovery workshops | Personas, IA, journey maps | Align SOQ stakeholders |
| Design system v1 | Tokens + Figma component library | Shared language for build |
| Lo-fi screens | All P0 screens (desktop + mobile) | Scope lock |
| Hi-fi prototype | Clickable Figma for P0 journeys | Stakeholder sign-off |
| Usability pass | 5–8 staff + 3–5 student tests | Fix before code |
| Handoff | Specs, redlines, assets, interaction notes | Engineering-ready |
Prototype tooling
- Figma (design system + prototypes)
- Optional: interactive Next.js prototype for critical WSQ fee calculator / attendance matrix
Acceptance for design phase
| # | Detail |
|---|---|
| 1 | [ ] SOQ signs off public IA + Admin navigation |
| 2 | [ ] P0 hi-fi prototype approved |
| 3 | [ ] Component library covers 80% of Admin/Student screens |
| 4 | [ ] Accessibility checklist attached to Student & Public flows |