Skip to content

How I work

Evidence over opinion,
every time. Tested with real people

How I go from a fuzzy brief to a shipped, measured result, and how I make life easy for the developers and product managers I work with.

Interviews

Usability testing

Affinity mapping

Wireframes

Design systems

Prototyping

WCAG 2.2 AA

HTML, CSS, JavaScript

Hand-off

Interviews

Principles

Four rules I design by.

How I work: Start with the problemHow I work: Start with the problem
How I work: Error message rewriteHow I work: Error message rewrite

02

Words are interface

Labels, errors and empty states get as much care as layouts.

How I work: Contrast, focus, keyboardHow I work: Contrast, focus, keyboard

03

Accessible by default

Contrast, keyboard and screen reader support are built in, not bolted on.

How I work: Expected vs measuredHow I work: Expected vs measured

04

Every design is a bet

Say what we expect to change, measure it, and be honest when it doesn't.

Process

Understand, shape, build, prove.

How I work: Understand stickiesHow I work: Understand stickies

01

Understand

Stakeholder and user interviews

Analytics and support tickets

Problem statement and success metric

How I work: Shape wireframesHow I work: Shape wireframes

02

Shape

User flows and IA

Sketches and lo-fi options

Pick one with the team

How I work: Build codeHow I work: Build code

03

Build

Hi-fi in Figma with real content

Components in the design system

Front-end build where it helps

How I work: Prove test sessionHow I work: Prove test session

04

Prove

Usability tests

A/B tests with guardrails

Share results, plan the next round

Hand-off

Developers don't have to guess.

— Components and variables in Figma match what's in code, with the same names.

— Every screen ships with states: empty, loading, error and success.

— Annotated flows explain behaviour, not just layout.

— I can read and write front-end code, so I check the build myself before sign-off.

How I work: Hand-off visualHow I work: Hand-off visual

Track record

What the work has done.

30

%

faster from design to live, after I introduced a modular design system

EQUERRY CO

445%

month-on-month rise in organic traffic for Cool Ridings, after I redesigned its navigation and on-page SEO

EQUERRY CO

98

Lighthouse accessibility score on IKSA’s live site, a client brand I designed

IKSA · CLIENT

AA

WCAG 2.2, the level I design and build to

EVERY PROJECT

AI in my workflow

Faster, not lazier.

I use AI tools to move faster through the slow parts, and I check everything they produce against real users and real data. The home page video and the images on my About page are mine, made with Higgsfield AI.

Research synthesis

I use Claude and ChatGPT to sort interview notes and survey answers into first-draft themes, then check every theme against the raw quotes before I trust it.

Copy and content

I ask Claude or ChatGPT for lots of label and error-message options, shortlist the clearest few, then test them with real people.

Prototyping and code

I use Figma AI for quick visual exploration and Higgsfield for images and video, prototype in Figma, then build the parts that matter in HTML, CSS and JavaScript so people can test the real thing.

Tools

What's on my desk.

Design

FigmaFigJamPhotoshopIllustratorFigma AICanvaHiggsfield

Research and testing

Claude & ChatGPTGoogle Formsaxe DevToolsLighthouseVoiceOver

Build

HTMLCSSJavaScriptSquarespace