UI Lab
Process Patterns
Options for presenting your delivery process with varying density and detail.
Step Bar
Horizontal steps with status styling.
Discovery
Goals, users, and success metrics
Design
Flows, UI, prototypes
Build
Sprints, QA, demos
Launch
Go-live and monitoring
Optimize
CRO, performance, iteration
Card Row
Card-based sequence with highlights.
Discovery
Define goals, users, and KPIs
Design
Flows, UI, prototypes
Build
Iterate in sprints with QA
Launch
Go-live, monitor, stabilize
Timeline
Vertical timeline with badges and detail.
Discovery & Strategy
Goals, users, and scope clarity
Design & Prototype
Flows, UI, and validation
Build & QA
Sprints, demos, and testing
Launch & Optimize
Release, monitor, and iterate
Icon Grid
Compact icon + copy grid.
Discovery
Goals, users, and KPIs
Design
Flows, UI, prototypes
Build
Sprints, QA, demos
Launch
Go-live and monitoring
Accordion
Expandable steps for more copy.
Define goals, users, and success metrics; map core journeys.
Dual Track
Discovery vs Delivery swimlanes.
Discovery
- Goals, users, and constraints
- Journey mapping and risks
- Lo-fi flows and validation
Delivery
- Sprints with demos
- Build + QA + instrumentation
- Launch, monitor, optimize
Milestone Rail
Horizontal rail with key milestones.
Kickoff
Goals & scope
Design
Flows & UI
Build
Sprints + QA
Launch
Release + monitor
Optimize
CRO & perf
Carousel
Swipeable cards for each phase.
Checklist + CTA
Simple checklist with action.
Checklist
Everything covered per phase
Use a simple checklist with a CTA.
Roadmap w/ Dates
Milestones with dates for real schedules.
Roadmap
Timeline exampleDiscovery Kickoff
Goals, users, KPIs
Design Handoff
Flows, UI, prototypes
Beta Build Complete
Core features + QA
Launch
Release + monitoring
Circular Loop
Radial steps for continuous improvement.
Continuous loop
Discovery → Build → Launch → Optimize → Repeat
Status Bar
Horizontal bar with Done/Now/Next pills.
Gantt-Lite
Duration bars and ownership hints.
Tabbed Steps
Tabs per step; content below.
Discovery
Goals, users, KPIs, risks
Current Step Highlight
Focus on now, with what’s next + metrics.
Current Step
Build
Sprints with QA and demos; shipping incrementally.
Next up
- Launch readiness checklist
- Monitoring hooks
- Rollback plan