Wirepad
A rapid wireframing tool built in 6 weeks, tested at a hackathon, and used by 30+ designers.
Role
Co-designer & Co-developer
Timeline
6 weeks
Team
Riddhi + 1 teammate
Tools
Wirepad is a rapid wireframing tool that feels more like sketching on paper than using design software. We built it in 6 weeks and tested it at a design hackathon where teams using Wirepad completed their wireframing phase 40 minutes faster on average.
The Problem Started With Frustration
My teammate and I were watching designers struggle at the start of a product build. Not with the idea. Not with the product direction. With the tools. Figma is powerful — almost too powerful when you just need to sketch something out fast. The component overhead, the frame setup, the sharing flow — all of it creates friction at the exact moment when a designer needs to move at the speed of thought.
We asked ourselves a question that seemed almost too simple: what if wireframing felt more like sketching on paper, but digital?
That question became Wirepad.
What We Were Trying to Solve
Early-stage wireframing has a specific job to do. It's not about fidelity. It's not about handoff. It's about speed — getting an idea out of your head and into something other people can react to before the idea changes or disappears.
The tools available fell into two camps:
- 01Full-featured tools like Figma — Flexible, but front-loaded with setup
- 02Pen and paper — Fast and frictionless, but impossible to share or iterate
We wanted to build the thing in the middle. Fast enough to feel like sketching. Structured enough to be useful. Shareable by default.
Six Weeks. Two People. A Lot of Arguments.
We started with a blank Figma file and a Notion doc. We weren't building Figma. We were building the thing you use before Figma.
The first week was mostly arguing about scope. My teammate wanted to start with the component library. I wanted to start with the canvas interaction model. We were both wrong — we needed to start with the user flow, which neither of us had properly mapped yet.
That fight was useful. It forced us to write out exactly what a designer does in the first five minutes of a wireframing session: opens a blank canvas, starts placing elements, wants to see how a layout feels before committing to anything. Everything we built was filtered through that five-minute window.
Core canvas. Drag-and-drop interaction model. Basic component set — boxes, text fields, buttons, nav bars, cards. Zero friction from open-to-first-element.
Component library refinement. Ready-to-use UI components covering the most common wireframing patterns — forms, lists, modals, navigation.
Internal testing. Every time something felt slow we fixed it. Every time we had to think about the tool instead of the wireframe, we treated it as a bug.
Preparing for the hackathon. Stress testing. Edge cases. Making sure 30+ people using it simultaneously didn't break anything.
The Hackathon: Real Data from Real Designers
We deployed Wirepad at a design hackathon with 20 participating teams. Half the teams used Wirepad. The other half used their usual tools — primarily Figma or hand-drawn sketches.
40 min
Faster wireframing vs. traditional
200+
Wireframes created
30+
Designers who used Wirepad
Teams using Wirepad completed their wireframing phase 40 minutes faster on average. Across a hackathon where every minute matters, that meant more time for user testing, more iterations, more refined thinking before the final pitch.
What the Designers Actually Said
We ran quick feedback sessions after the hackathon with participants. The recurring themes were clear.
“The first digital tool that doesn't slow down my brain.”
— Hackathon participant
The speed was appreciated. Designers said the canvas felt responsive in a way that matched their thinking pace. But the constraint that came up most consistently was one we hadn't anticipated:
“I want to make my own shapes.”
We had built Wirepad around a library of ready-to-use components. The assumption was that pre-built components removed friction. And for most use cases, they did. But designers working on non-standard layouts hit a wall. They couldn't break out of the component library to build something novel.
This was a meaningful insight. We had optimised for the common case and inadvertently penalised the creative case.
What We Built After
Both pieces of feedback pointed to the same underlying thing: designers need freedom within structure, not just structure.
- 01Custom shape creation — We added a drawing mode that allowed designers to sketch freeform shapes directly on the canvas. The component library became a starting point, not a constraint.
- 02Grid system — We implemented an optional grid overlay with adjustable column and gutter settings. It sounds small. It changed how designers used the canvas entirely.
What We Learned
The hardest design decision in a tool product is deciding what to leave out. Every feature adds cognitive load to the interface. We had to make aggressive choices about what Wirepad would never do, so that the things it did do would feel effortless.
Disagreement is quality control. Every time my teammate pushed back on a decision I thought was settled, it forced me to articulate why I made it. Half the time I couldn't, which meant it was wrong.
The five-minute window. Everything we built was filtered through what a designer does in the first five minutes. That constraint shaped every decision.
Real users reveal real gaps. The hackathon gave us data we couldn't have generated ourselves. Watching people use Wirepad was more valuable than any amount of internal testing.
What's Coming
We are currently building two features that came directly from designer feedback after the hackathon:
- 01Multi-device frames — Designers want to wireframe across mobile, tablet, and desktop simultaneously. We are building a device frame switcher that maintains layout relationships across screen sizes.
- 02Collaboration mode — The most requested feature after the hackathon was real-time collaboration. This is architecturally the most complex thing we've attempted. We are building it carefully.
Reflection
Wirepad started because we were frustrated with tools. It became something more interesting when we put it in front of real designers and let them tell us where our assumptions were wrong.
The 40-minute efficiency gain is the number we mention because it is concrete. But the more honest measure of whether Wirepad worked is simpler: designers who used it at the hackathon came back and used it again after. Nobody asked them to.
That's the only metric that actually matters.