Design in code, get praise
This week I demoed some flows I’d been redesigning to stakeholders.
For context, the programme I’m on is huge. We’re redesigning a highly complex, enterprise-grade, case-working system.
There are many feature teams, each with their own product manager. I’ve been on the programme for 6 months but it’s so big I’ve not met many of them.
The goal was to show how you can use patterns from the GOV.UK Design System to design complex case working systems. And to encourage other feature teams to follow the same approach.
It did that.
But it also did something I didn’t expect:
Toward the end of the meeting, the conversation moved away from the patterns and solutions. The product managers started making comments about the tool I’d used to create the designs:
“I love the way this demos new designs”
“The prototype really helps to understand the user journey”
“It’s been so helpful for our developers to show them how something actually works”
Most designers use Figma, but I had created an HTML prototype using the GOV.UK Prototype Kit.
Don’t get me wrong, Figma has its place. But:
Figma can only produce pictures of software.
Not actual software.
Actual software is alive.
- It responds
- It adapts
- It moves
- It errors
- It loads
When you present your designs with Figma, you’re not interacting with the product you’re designing.
You’re interacting with the software you’re using to design.
As a result:
- It’s slow and jarring. Your audience has to watch you stop, scroll, pan and zoom around Figma between every step.
- It won’t do your design justice. Your audience is focused on you navigating Figma rather than experiencing your design.
- It hides problems. You jump between screens and miss important micro-interactions — transitions, loading states, error states, edge cases.
Designing in the browser forces you to confront these things.
For my demo, instead of just sharing screens:
- I opened the browser and typed in the address
- I signed in to the caseworking system
- I landed on the overview page to see my priority tasks
- I made the screen smaller to show two instances of the app side by side
- I clicked “Cases” in the primary menu to go to the case list
- I searched, sorted and filtered the case list to find a particular case
- I filled out a complex multi-step form flow with a lot of conditional routes
In other words, I went through the end-to-end journey and interacted with the prototype like real users would.
This freed up the product managers to focus on the design itself and spot gaps.
That’s 100x harder to do with Figma.
After the meeting, I received a lot of positive feedback which is great because I love praise.
One product manager suggested I upskill some of the other designers on the programme who are less familiar with the Prototype Kit.
But she also pointed out that it would probably take up too much of my time.
Luckily, I’ve been preparing for this moment for 2 years. I told her:
I have a course that teaches designers how to use the GOV.UK Prototype Kit to tap into the many benefits of prototyping in code.
If you’d like to experience those benefits — including a little unexpected praise when you present your ideas to stakeholders, check out my course here: