How we restructured our design process with AI prototyping

The point was never to go faster for the sake of it, or to do the same work with fewer people. What we wanted (read: want) is more room to think, and to iterate earlier, while a project is still malleable enough to change shape without budget implications. The clearest change sits right at the start of a project, changing the quality of the conversations we have with clients for the better.

For context, our process used to run in a fairly conventional order. We would kick-off, and then run a Discovery workshop to gather as much information and data as we could, which informed how we defined the product. From there came wireframes and prototyping, iterated asynchronously over a few months, followed by the look and feel, the final design, the design system, and finally documentation and handoff to engineering. It worked, but the order had a quiet cost, paid in time and in flexibility, and it landed hardest towards the end of a project.

Wireframes vs Look & Feel

A quick explainer on what wireframes are for, and how they differ from the visual look and feel.

Learn more

Prototypes to the front

Before, wireframes and prototyping were worked through after the in-person Discovery workshop. Now the preparation happens up front, before we sit down together with the client. We pull data collection earlier, into an online kick-off that has become deeper and a little longer, so that we can build prototypes ahead of meeting face to face. With AI, we produce near-fully-functional prototypes, in code, ready to iterate the moment everyone is in the same room. Some of this is what the industry has started calling vibe coding, though the term matters far less than the discipline behind it.

None of this replaces the strategic product thinking behind it, nor does it remove experimentation, user journey mapping, design thinking, service design, or our designers doing the actual work of design. AI simply accelerates execution and sharpens our deliverables. We don’t let it decide what, or why. That judgement is still ours, and it happens to be the part that takes years to develop.

Discovery, in real time

During the Discovery workshop, as we discuss and iterate with the client over the clickable prototype we prepared earlier, another team member refines it live alongside the conversation. We get to see those decisions reflected back almost immediately, which changes how the rest of the discussion flows. By the end, we have a defined and agreed set of wireframes that becomes the source of truth for the scope of the product ahead.

That source of truth gives us the confidence to work in a fixed-price arrangement. Previously, with so much still uncertain in the early weeks, we had no honest way to commit to a set budget. Now the scope is understood by everyone involved before a single design decision is finalised.

There is a quieter benefit here too. Under the old sequence, by the time a prototype was ready, the window for real conversation had already narrowed. If the wireframes ran even slightly long, the phases that followed absorbed the difference, which left less room for exploration and refinement at exactly the point they mattered most. Moving the prototype forward removes that squeeze, so we can explore more, refine further, and reach stronger results.

Running a Product Discovery workshop with AI.

Tiago, our CPO, shares a deeper dive into AI-powered Product Discovery workshops.

Learn more

What prototypes are for

Their main job is to help us iterate during the workshop and to fix the scope of the work. That alone would justify the change, but there is more to it. User testing, which used to be the first thing sacrificed to a timeline or a budget, now fits without adding to either. And because a prototype like this is quick to rebuild, version and pull apart, we can test genuinely different approaches with our clients without putting the timeline at risk. Experimentation stops being a luxury and becomes part of how we work.

Business as usual

From the workshop through to final design, the process looks much as it always has. We set the look and feel, and once that is signed off we move into final design and building the design system. The one addition is that we can now produce final-looking prototypes in code as we go, matching the visual design page by page.

The biggest payoff is control. Figma was always limited when it came to micro-interactions and motion, and we would reach for tools like Principle to polish an animation. That gap is closing fast, and Figma's recent Motion release brings a native animation timeline onto the canvas. Even so, building in code from the start keeps us closest to the final result, because the prototype and the product are the same material, with nothing to export or translate between them. What we get is a near-perfect, fully functional prototype that animates and behaves exactly as intended, in a fraction of the time it used to take.

Although the tools have changed a great deal, our standards have not. The time AI gives back does not go into thinner margins or faster invoices. It goes into thinking, and into the refinement that separates a product people tire of from one they love to use.