Prototype Tooling

Doing your taxes is stressful. Clicking through mockups about taxes is not, and people behave accordingly. Intuit had a prototype version of TurboTax for user testing that used real components and data.
It let the team iterate and learn from users faster than shipping to prod, but every change still required engineering support.
Screenshot of the old Intuit Prototyping Framework interface showing its dated UI
After talking to designers, two requirements stood out: no-code editing with real components and remote testing with real user data.
Many prototyping tools existed in 2019, but none could consume our production design system components. That was a dealbreaker.
Origami
ProtoPie
FramerX
UXPin
InVision
Axure RP
FramerX came closest. We collaborated with their team on a proof of concept, but it couldn't ingest our design system.
So we built a WYSIWYG editor that used production components. Designers could build pages visually, link them into flows, and mix in coded pages when needed. End users couldn't tell the difference.
Editor-built
Fully coded
Another UXE and I shipped a beta in 3 months, right before tax season. We prioritized functionality over polish so designers could use the tool then give us real feedback.
The image manager lived on its own page. Every time designers needed an asset, they had to leave the editor to find it.
Tools like Webflow puts this into a sidebar, but both of ours were already used for components and property editing. I used a modal to keep designers in the editor without competing for space.
Original Pyro asset manager on a separate page
The tool was called Pyro. That year, more designers contributed to pre-season user testing than in the previous framework's entire 4-year lifespan.
2014 – 2018 Legacy
2019 Pyro
Age
0 years
0
weeks
Designers
0
contributors
0
contributors
No-code pages
0 %
0%
Prod components
0
0 of 50
After tax season I ran a few studies. Every other prototyping tool lets users build small, focused flows. Pyro was one TurboTax instance where pages are swapped in and out.
A way to bridge this gap is to let designers create scoped flows that can still connect into the broader prototype when needed.
This meant redesigning the tool from scratch. The initial IA was built around adding pages to one prototype. I explored ways to organize scoped flows and continued to iterate based on feedback.
Iteration 1 — low-fidelity sticky notes and sketches Iteration 2 Iteration 3 Iteration 4 Iteration 5 — mid-fidelity wireframes Iteration 6 Iteration 7 Iteration 8 Iteration 9 Iteration 10 — high-fidelity polished designs
We also added real-time editing, a multipage inline editor so designers could work across an entire flow, and logic-based navigation so different prototypes could link to one another based on real data.
Pyro let the team run experiments at a scale that wasn't possible before. Hundreds of real customers tested prototypes across moderated and unmoderated studies, and non-engineers contributed to the majority of pages.
Tested on 0 customers
Captured 0 unmoderated tests
Moderated 0 e2e tests
Behind 0 GTM studies
5 PMs PM Memoji
28 Designers Designer Memoji
2 Developers Developer Memoji
Contributors
Making someone genuinely worry about their taxes in a lab took months of tooling. Today, Claude Code can probably reproduce similar results 20 minutes.
← Back