Product Design & Development
SaaS Dashboard
Teams building or rebuilding the main product surface where users spend 30+ min a day.
Assumes backend APIs are stable by week 6.
Scope of work
Every section is written with the failure modes in mind — the things that typically go wrong on saas dashboard projects. Use them verbatim or edit to match how you actually deliver.
- 01
Data Model & Metric Audit
Review existing data sources, interview 2–3 internal users about the decisions they need to make, and lock the KPI hierarchy. Prevents shipping dashboards nobody opens twice.
- 02
Persona Research
5–7 qualitative interviews with analyst, admin, and executive personas. Journey maps showing tasks, drop-offs, and unmet expectations — not a generic usability doc.
- 03
UI Architecture
Navigation model, layout system, and information-density strategy. Critical for surfaces used daily — wrong choices here compound across every release.
- 04
Visual Design
Dashboard layouts for 5–8 key views, data-viz patterns (charts, tables, drilldowns), empty states, and error states. All states designed, not just the happy path.
- 05
Component Library
Reusable component set built on the project framework (React, Vue, Svelte), with documented variants, states, responsive behavior, and accessibility affordances.
- 06
Frontend Build
Implementation with state management, routing, and data fetching. Loading skeletons, optimistic UI, and graceful degradation under slow API responses.
- 07
API Integration & QA
Wiring to REST or GraphQL endpoints, error handling, retry logic, and performance benchmarking. Lighthouse + manual cross-browser testing before handover.
Deliverables
What the client gets at the end. Specific enough to be defendable; editable enough to match your exact delivery.
- Production-ready dashboard (code + deployed staging)
- Figma component library with 30+ documented components
- Storybook or equivalent component showcase
- API integration layer with typed contracts
- QA sign-off report (Lighthouse scores + browser matrix)