Why Process Matters More Than Talent
We've seen brilliant designers produce unusable products and average designers produce exceptional ones. The difference is almost always process. A good design process catches assumptions early, surfaces user needs before they become expensive fixes, and gives clients visibility into what they're buying.
Here's ours.
Phase 1: Discovery (Days 1-5)
Before opening Figma, we need to understand the problem.
What we do:
- 60-minute stakeholder interview with the client
- Review of any existing product, competitor landscape, and brand guidelines
- User persona definition (usually 2-3 primary personas)
- Mapping the core user journeys that the new design must serve
Output: A written brief covering business goals, user goals, key user journeys, constraints, and success metrics. The client signs off on this before we proceed.
Why this matters: Most design failures happen in this phase. If the brief is wrong, the designs will be wrong, no matter how beautiful they are.
Phase 2: Information Architecture (Days 5-8)
We map out what screens exist and how they connect, before designing any of them.
What we do:
- Sitemap or screen flow diagram (for apps)
- Content inventory, what information lives on each screen
- Navigation structure decisions
Output: A full sitemap or app flow that the client reviews and approves. Changes at this stage cost 30 minutes. Changes at the high-fidelity stage cost days.
Phase 3: Wireframes (Days 8-14)
Low-fidelity wireframes focus on structure, not aesthetics.
What we do:
- Black-and-white wireframes for all key screens
- Focus on content hierarchy, information density, and interaction logic
- No colours, no real imagery, no final copy, just structure
Why no colours yet? Colour and visuals bias feedback. When you show a polished design, clients comment on button colours. When you show a wireframe, they focus on whether the logic works. We want the logic feedback first.
Output: Wireframe presentation + client review session. We typically have 1-2 rounds of wireframe revisions.
Phase 4: Design System First (Days 14-18)
Before building high-fidelity screens, we establish the design system.
What we define:
- Color palette (primary, secondary, semantic, neutral)
- Typography scale (font family, weights, sizes, line heights)
- Spacing system (8px grid, margin/padding tokens)
- Component library (buttons, inputs, cards, modals, badges, etc.)
- Iconography style
- Elevation and shadow system
Why this order? If you build screens before the system, you end up with inconsistencies everywhere and spend days fixing them. System first equals faster screen production and a more consistent final product.
Phase 5: High-Fidelity Design (Days 18-28)
Now we bring it to life.
What we do:
- Full-colour, production-ready screens for all defined flows
- Responsive variants (mobile and desktop, or all device sizes as agreed)
- Real content, not Lorem Ipsum
- Micro-interactions annotated (hover states, focus states, transition descriptions)
- Dark/light mode variants if in scope
We typically design a representative set of screens first and get approval on direction before completing the rest. This prevents designing 40 screens in the wrong direction.
Phase 6: Prototype & User Testing
We build an interactive Figma prototype and test with 3-5 representative users. We document: where do users hesitate? What do they misunderstand? What's confusing?
We then fix the critical issues before handoff.
Phase 7: Handoff
What developers receive:
- Figma file with properly named layers and organised pages
- Exported assets at all required sizes
- Design tokens as CSS variables or JSON
- Interaction specs: animation types, durations, and easing
- A 1-hour handoff call to walk through the Figma file
We don't hand over a PDF. PDFs lose all the interaction detail. Developers get the live Figma file.
Common Mistakes We Avoid
- Skipping wireframes, Jumping to pretty screens always causes expensive rework
- Designing in isolation, We share work-in-progress early and often
- Ignoring edge cases, Empty states, error states, loading states are all designed deliberately
- Responsive afterthought, Mobile and desktop are designed in parallel, not as a resizing exercise at the end
Timeline Summary
| Phase | Duration |
|---|---|
| Discovery | 3-5 days |
| Information Architecture | 2-4 days |
| Wireframes | 5-7 days |
| Design System | 3-5 days |
| High-fidelity Screens | 7-14 days |
| Prototype and Testing | 3-5 days |
| Revisions and Handoff | 2-4 days |
| Total | 3-6 weeks |
This varies with project scope, a simple marketing site compresses to 2 weeks; a complex SaaS platform expands to 8.