Design Process

Design Process
CV
Max's desk mid-project — paper wireframes and notes spread below a laptop and a monitor showing a competitor-analysis board

Scroll down

Workflow

I take every new project from scratch through the same 16 steps. Context is stored locally and updated after every decision. That keeps client expectations aligned with user needs, and leaves a full history of changes.

  1. 01 / 16

    Research & Benchmarking

    Set up the project repo and the Figma MCP bridge. Automate competitor analysis.

    • README.md
    • research.md
  2. 02 / 16

    Personas & JTBD

    Extract personas and user jobs straight from the research file. No guessing.

    • personas.md
    • jtbd.md
  3. 03 / 16

    Information Architecture

    Translate jobs and personas into flows and structural maps. In code, not Figma.

    • sitemap.md
    • navigation.md
    • flows.mmd
  4. 04 / 16

    Wireframing

    Build semantic, interactive HTML wireframes that cover every state early.

    • /wireframes
  5. 05 / 16

    Tone of Voice

    Define one copy guide, then write every string in a single sweep.

    • voice.md
    • microcopy.md
  6. 06 / 16

    Visual Concept

    Deconstruct references, then build two or three visual directions directly in code.

    • /concepts
  7. 07 / 16

    UI Assembly

    Drop real graphics and icons into the chosen concept, straight from the workspace.

    • /screens
  8. 08 / 16

    Design Tokens

    Extract colour, type and spacing from the concept code into structured variables.

    • tokens.css
    • /components
  9. 09 / 16

    Living Design System

    Compile components into a code-based style guide built on atomic design. One source of truth.

    • /styleguide
  10. 10 / 16

    Screens in Figma

    Assemble screens from atoms, molecules and organisms. Link each one to its Jira ticket.

    • screens.fig
  11. 11 / 16

    Figma to Code

    Implement the designs in code and iterate locally. Polish until it matches Figma 1:1.

    • index.html
  12. 12 / 16

    Responsiveness

    Define breakpoint behaviour as rules, not by resizing frames by hand.

    • breakpoints.css
  13. 13 / 16

    Motion & Micro-interactions

    Apply one animation language — timing, easing, sequencing — across the whole system.

    • motion.css
  14. 14 / 16

    Handoff & Developer Docs

    Generate the whole handoff package straight from the repo files.

    • README.md
    • /handoff
  15. 15 / 16

    Deploy to Netlify

    Push to the repo. Netlify builds and deploys the site.

    • /dist
  16. 16 / 16

    Usability Testing

    Run corridor and A/B tests, then turn findings into the next hypotheses. The loop restarts at step 10.

    • findings.md

Build

I use Glacier Flow, a Claude Code template: folder routing, a knowledge base, and gated tasks.

GitHub