Brainstorm Session 9: UI/UX Vision¶

Date: 2026-04-15 Objective: Define "modern UI" and "AI-first interface" concretely Depends on: Sessions 1-8

Techniques Used¶

SCAMPER — Challenge traditional HR UI assumptions
Six Thinking Hats — Examine from all perspectives
Mind Mapping — Information architecture and interaction patterns

Core Principle: Three Paths to Every Action¶

Path 1: AGENT (fastest)      Cmd+K → "approve all timesheets" → done
Path 2: NOTIFICATION (pushed) Bell → "12 timesheets ready" → [Approve All] → done
Path 3: NAVIGATION (familiar) Sidebar → T&A → Approvals → Select All → Approve → done

Same outcome. Three speeds. User chooses comfort level. Agent learns preferences over time.

Design System¶

Framework: Tailwind CSS v4 + DaisyUI 5 (shared with marketing site)
Rendering: Phoenix LiveView (server-rendered, reactive, no JS framework)
Theme: Dark mode default
Colours: Violet primary (#8b7cf6), Cyan accent (#22c7d6), Emerald success, Yellow warning, Red error
Accessibility: WCAG 2.1 AA, touch targets ≥ 44px
Real-time: LiveView + PubSub = every screen updates live, no refresh buttons

Industry-Adaptive Theming¶

Industry	Accent Override	Terminology Example	Key Widgets
Construction	Orange	"Site", "Toolbox talk"	SWMS status, credential heatmap
Mining	Yellow/Black	"Swing", "Roster pattern"	Fatigue dial, drug test schedule
Logistics	Blue	"Run", "Depot"	EWD status, fatigue warnings
Defence	Navy	"Personnel", "Classification"	Clearance pipeline, NTK matrix
Retail	Teal	"Team member", "Shift"	Penalty forecast, availability
Labour Hire	Violet (default)	"Candidate", "Placement"	Pipeline funnel, billing

Same components, different configuration per org's active industry profiles.

Home Screen: Agent Dashboard¶

┌──────────────────────────────────────────────────────┐
│  Good morning, Gautham                    Mon 15 Apr  │
│                                                       │
│  ⚠ 3 urgent items:                                   │
│  ├── 12 credentials expiring this week               │
│  ├── 2 timesheets with anomalies (overtime > 60hr)   │
│  └── Woolworths Minchinbury: 2 shifts unfilled Tue   │
│                                                       │
│  📊 This week:                                        │
│  ├── 487 workers rostered / 12 sites                 │
│  ├── 94% compliance score (↓2%)                      │
│  └── $127K payroll processing (awaiting approval)     │
│                                                       │
│  💬 ──────────────────────────────────────────────    │
│  │ "Fill the Woolworths gaps"                     │   │
│  └────────────────────────────────────────────────    │
│                                                       │
│  Agent: Found 8 eligible candidates. Top 3:           │
│  1. Sarah Chen (95%) — available, all creds ✓        │
│  2. Mike Torres (88%) — available, forklift ✓        │
│  3. David Park (82%) — first aid expiring ⚠          │
│                                                       │
│  [Assign All 3] [Review] [More Options]               │
└──────────────────────────────────────────────────────┘

Not static charts. Agent-curated, adaptive, actionable. Updates in real-time via PubSub.

Command Bar (Cmd+K)¶

Always accessible. Natural language input with: - Navigation: "go to roster" → navigates - Actions: "create shift for Monday" → opens pre-filled form - Queries: "how many workers expire this month" → inline answer - Search: "John Smith" → employee card with quick actions

Conversational Forms¶

Agent pre-fills, human reviews:

User: "3 forklift ops, Woolworths Minchinbury, Monday 6am"

Agent pre-fills:
  Site: Woolworths Minchinbury ✓
  Date: Monday 21 April ✓
  Time: 6:00 AM - 2:00 PM ✓
  Workers: 3 ✓
  Category: Forklift ✓
  Credentials: White Card, Forklift License ✓
  Rate: $35.47/hr (Storage Services Award Level 2)
  Client charge: $52.50/hr (Woolworths rate card)

  "Anything to adjust?"

User: "Looks good" → created, scoring triggered

Traditional form always available as fallback. Agent pre-fill is a shortcut, not a gate.

Actionable Notifications¶

Notifications with inline actions (not just text):

"12 timesheets ready for approval ($47,230)"
  [Approve All] [Review] [Dismiss]

"Sarah Chen's first aid expires in 7 days"
  [Schedule Renewal] [Remind Later] [View Profile]

"Roster next week 85% filled (3 gaps)"
  [Auto-fill Gaps] [View Roster] [Dismiss]

Work comes to the user. Reduces navigation to zero for common actions.

Information Architecture¶

HOME (Agent Dashboard)
├── Greeting + summary (agent-curated)
├── Urgent items (actionable)
├── Key metrics (role-specific)
├── Agent chat (inline)
└── Quick actions

COMMAND BAR (Cmd+K) — always accessible

MODULES (sidebar — traditional navigation)
├── People (employees, leave, contracts, performance)
├── Recruit (job orders, candidates, pipeline, assessments)
├── Onboard (workflows, verification, inductions)
├── Roster (shifts, scheduling, availability, demand)
├── Time & Attendance (timecards, clock events, approvals)
├── Payroll (pay runs, invoicing, STP)
├── Clients (contacts, rate cards, billing, costing)
├── Safety (incidents, inspections, SWMS, risk)
├── Assets (equipment, fleet, maintenance)
├── Compliance (credentials, profiles, awards, scores)
├── [Fatigue] — if logistics/mining active
├── [Clearance] — if defence active
├── [Quotes] — if activated
├── [Learn] — if activated
├── [Benefits] — if activated
└── Reports (agent-generated, templates, scheduled)

NOTIFICATIONS (top-right, actionable)

ADMIN (settings, profiles, flags, users, integrations, AI budget)

AGENT PANEL (right sidebar, toggleable)
├── Persistent chat (context-aware — knows current screen)
├── Suggestions based on current view
└── Recent interaction history

User Persona → Screen Count¶

Role	Screens Visible	Primary Interaction
Field Worker	~5 (roster, timecard, leave, notifications, profile)	Mobile agent chat
Supervisor	~10 (above + team, approvals, shifts, tasks)	Notifications + navigation
HR Admin	~15 (above + employees, onboarding, compliance, reports)	Command bar + navigation
Payroll Staff	~18 (above + pay runs, invoicing, STP, awards)	Navigation (precision required)
Manager/Director	~12 (dashboards, analytics, compliance overview)	Agent dashboard
Client Contact	~5 (assigned workers, roster, placements, billing)	Client portal

Progressive disclosure: new users aren't overwhelmed, power users aren't limited.

Component Library¶

DaisyUI 5 Base¶

btn, card, modal, drawer, dropdown, navbar, tabs, table, badge, alert, toast, tooltip, progress, stat, checkbox, input, select, textarea

Custom Finnest Components¶

Component	Purpose
ComplianceScore	Worker score per industry (gauge + breakdown)
ShiftCard	Roster shift (worker + status + actions)
WorkerCard	Employee summary with compliance indicator
TimelineEvent	Audit trail / workflow step visualisation
AgentMessage	Chat bubble with action buttons
ActionableNotification	Notification with inline approve/reject/defer
MetricCard	KPI with trend arrow and sparkline
CredentialBadge	Credential type + status + expiry countdown
IndustryBanner	Industry-branded section header
CommandBar	Cmd+K overlay with AI-powered input
ConversationalForm	Form with agent pre-fill + manual override

Agent as Contextual Tutor¶

Instead of separate LMS for platform training: - First time on a screen? Agent offers walkthrough - Hovering over a complex field? Tooltip + "Ask me about this" - Making an error? Agent catches and explains - Keyboard shortcut hints surface progressively

The UI IS the training. No separate documentation portal needed for day-to-day use.

Key Insights¶

Insight 1: Agent Dashboard Replaces Static Dashboard¶

Living, curated summary. Adaptive, actionable, personalised. No competitor has this. Impact: High | Effort: Medium

Insight 2: Three Paths to Every Action¶

Agent / Notification / Navigation. Gradual adoption without forcing. Impact: High | Effort: Medium

Insight 3: Industry-Adaptive UI from Same Components¶

Terminology, accents, widgets driven by config. One codebase = 10 purpose-built products. Impact: High | Effort: Medium

Insight 4: Conversational Forms — Agent Pre-fills, Human Reviews¶

Faster than manual. Less risky than full autonomy. Traditional form always available. Impact: High | Effort: Medium

Insight 5: Real-Time by Default¶

LiveView + PubSub. No refresh buttons. Clock-in appears on supervisor's screen instantly. Impact: Medium | Effort: Low

Insight 6: Progressive Disclosure by Role¶

3 screens (worker) to 20 screens (payroll). Same app, role determines depth. Impact: Medium | Effort: Low

Statistics¶

Total ideas: 30+
Categories: 5 (Dashboard, Navigation, Forms, Notifications, Components)
Key insights: 6
Techniques applied: 3

Generated by BMAD Method v6 - Creative Intelligence