Interaction design that runs in the browser.
Prototype design and prototype development, as one piece of work. Journeys, flows and interfaces built in code, tested with real users, and ready for developers to pick up.
Design and code drift apart at the handover.
Designs that can't be built
Static screens leave developers guessing at states, errors and edge cases.
Builds that weren't designed
Code fills the gaps the design left, and the service drifts from what was tested.
Designing in the prototype closes the gap. What users test is what developers pick up.
Lead interaction design, end to end.
Understand the problem
Discovery workshops, design sprints and stakeholder sessions. Service blueprints, system maps and concept models to agree what the service needs to do.
Map the journey
End-to-end user journeys, task flows and interaction flows, including the steps before and after users reach the service.
Prototype in code
High-fidelity, interactive prototypes using the GOV.UK Design System and GOV.UK Prototype Kit, in Nunjucks, HTML, CSS and JavaScript.
Test and iterate
Design iterated with user research and usability testing, through beta and live. Helping the team define the MVP and what to prioritise next.
Accessible from the start
Designed to WCAG 2.2 AA from the first prototype, not audited in at the end.
Hand over cleanly
Design specifications, developer handover and design history. Pairing with content designers and developers so design and code stay aligned.
Four habits behind the work.
Design thinking
Start from the problem, not the solution. Frame it with the team, test assumptions early, and let evidence choose the direction.
Systems thinking
Every screen sits in a service, and every service sits in a system of policy, people and other departments. Design for the whole, not the page.
Craft within constraints
Clear, considered interfaces inside the GOV.UK Design System, and new patterns only when the existing ones don't fit, tested before they're adopted.
Prototyping at speed
A well-kept prototype kit and AI-assisted tools get ideas in front of users in days. Speed is for learning sooner, not for skipping steps.
One prototype. Many versions. Nothing lost.
Version-controlled
Prototypes managed in GitHub, with separate versions for each product, service and iteration.
Design history
Decisions, research and changes recorded alongside the prototype, so the reasoning travels with the design.
Code developers can use
Markup and components written to be shared, so building the real service starts from what was tested.
Proof of concept when it's needed
When a question needs real data, sign-in or integrations to answer, a working proof of concept instead of a mock-up.
Chosen for the job.
Methods and standards
GOV.UK Service Standard · GOV.UK Service Manual · Service blueprints · System mapping · Concept models · End-to-end journey mapping
Design
Figma · Miro · GOV.UK Design System · MoJ Design System
Prototyping and code
GOV.UK Prototype Kit · GOV.UK Frontend · Nunjucks · HTML · CSS · JavaScript · Node.js · Git · GitHub
AI-assisted
Cursor · Claude
Organisations I've designed for.
Selected organisations from the last 12 years.
Government and regulators
- GOV.UK
- UK Export Finance
- Ofgem
- Home Office
- HM Revenue and Customs
- Department for Energy Security and Net Zero
- The Scottish Government
Commercial
- Nationwide
- Vodafone
- Virgin Media O2
- Travelex
- Avis
- Pay by Bank
Past project experience. Names do not imply current endorsement or partnership.
Need interaction design in code?
My experience, roles and recommendations are on LinkedIn.