Challenge
Prototyping across HMRC and GOV.UK teams was slow and often required designers to work with code, creating barriers to testing and iteration.
Solution
I initiated and led an AI-assisted prototyping pilot, using HMRC-approved tools to turn wireframes into working prototypes and help designers of all technical abilities work more independently, while retaining control of design decisions.
Outcome
Reduced prototyping time by 89% and created a reusable toolkit, AI learning resources and onboarding guidance covering five prototyping activities, GOV.UK standards and error recovery to support wider IBM, GOV.UK & HMRC adoption.
Problem
Code-based prototyping created extra work for designers
Designers across HMRC and GOV.UK couldn't use visual prototyping tools such as Figma. Instead, they created wireframes in approved digital white-boards like Mural, then rebuilt them as interactive prototypes in the GOV.UK Prototype Kit to test their ideas.
The Prototype Kit is code-based, using HTML and JavaScript, and requires designers to work in VS Code. For those without coding experience, this meant learning unfamiliar tools and languages just to make their designs testable.
Every design change had to go through this process again, slowing feedback and making iteration more time-consuming.
Pilot opportunity
Make it easier to turn wireframes into working prototypes
AI could help translate wireframes into code, reducing repetitive implementation and making interactive prototyping more accessible to designers.
HMRC already had access to IBM Consulting Advantage, providing an approved environment to explore this approach.
Design consideration
Use AI to support the technical work while keeping designers responsible for the quality and decisions behind the design.
Strategic direction
How might we make prototyping faster without losing design control?
I proposed and secured approval for an AI-assisted workflow connecting IBM Consulting Advantage, Cline in VS Code and the GOV.UK Prototype Kit.
Designers could provide a wireframe, screenshot or written requirement and use AI to generate or update a working prototype.
Three priorities guided the approach:
Speed: Reduce repetitive coding and implementation.
Consistency: Follow GOV.UK patterns and accessibility standards.
Control: Keep designers responsible for reviewing and approving the output.
Product decisions
01 | Integrate with existing tools
Work within the tools designers already used
Introducing another platform would have added friction and required designers to learn a new process. I connected HMRC's approved AI environment with Cline in VS Code and the GOV.UK Prototype Kit.
Design decision
Build around the existing tools rather than introduce another platform.
Workflow and green (AI impact)
02 | AI as a collaborator
Let AI handle implementation, not design decisions
Unrestricted AI generation might have been faster, but it would have been harder to trust and review.
I set instructions to keep the assistant aligned with GOV.UK and HMRC components, accessibility requirements, routing and existing code patterns.
Design decision
Use AI as a collaborator, not the author.
03 | Design for errors and recovery
Test where AI saved time and where it got things wrong
Faster generation didn't automatically mean reliable output. I compared AI-assisted prototyping with manual work across three tasks.
Testing revealed significant time savings, but also recurring issues:
Losing context on larger tasks.
Generating incorrect page names.
Missing or partially applying changes.
Claiming work was complete when it wasn't.
Design decision
Design for recovery, not just the ideal output. I documented failure points and recovery steps so designers knew when to check, correct or take over. I also introduced checkpoints that allowed users to return to previous versions if something went wrong.
Making it repeatable
Equip the wider design community to use the workflow
I created two resources to take the pilot beyond my own workflow:
01. Reusable prototyping toolkit
Guidance covering five common activities:
Get help with prototyping.
Connect user journeys.
Bulk edit content.
Bulk update components.
Generate a page from a wireframe.
Each activity included instructions, expected time savings and recovery steps for common errors.
02. Guided learning through AI
I created a reusable prompt and toolkit to help people without a design or coding background learn by doing. It established a feedback loop between IBM Consulting Advantage and Cline, allowing users to diagnose issues, investigate the codebase and validate findings as they worked.
03. Documentation and onboarding
I developed workflow documentation and onboarding materials to help the wider design community understand the setup, use the tools independently and work through common issues.
Impact
89% faster prototyping, with a reusable AI-assisted workflow for HMRC and GOV.UK designers
Time saved: Reduced prototyping from 570 to 60 minutes across three tasks.
Reusable toolkit: Guidance for five activities, including time savings and error recovery.
Guided learning: Created prompts and tools to help non-technical users diagnose issues, investigate code and validate solutions.
Quality and safety: Documented GOV.UK standards, accessibility and AI limitations.
Wider adoption: Created documentation and onboarding for the wider design community.
Results after launch
89%
Faster prototyping
570 → 60
Minutes across three tasks
5
Toolkit activities covered
Colleague feedback
Feedback from colleagues I worked with on this project.
“
She’s friendly, collaborative and has taken on the lead interaction designer role exceptionally well. She’s been navigating complex requirements and turning them into designs, while working efficiently and managing multiple priorities.
“
Isabella is particularly good at working through complex requirements and turning them into clear, practical design solutions. She has contributed effectively to the design and refinement of user journeys, bringing a strong focus on usability, accessibility, and user needs.
