Sitemap

The Prototyper

10 min readMay 6, 2025

As Scott Belsky puts it…

“A prototype is like a hot knife through the butter of bureaucracy.”

I’ve spent the past six years designing Messenger, from in-thread interactions that help billions of people express themselves daily with friends and family, to conversational commerce tools that enable small businesses to transact across the globe through Messenger.

Over that time I’ve come to rely heavily on prototyping (using Origami) to communicate and convey ideas — primarily due to the fact that Messaging, by its very nature, is dynamic and behavioural and to use any other tool would limit my ability to emulate the experience of using Messenger accurately.

But to many, prototyping is still treated like a bonus round or a nice to have, great if you can squeeze it in, but hardly essential and rarely feasible given time constraints put on designers these days. Yet in a world obsessed with moving fast, I’ve found that being able to prototype in high fidelity (at speed) is somewhat of a super-power that yields better results and saves time in the long run.

The truth is, there’s nothing quite like holding an idea in your hand, something you can tap, swipe, and feel through the screen. Static mocks can only take you so far. A working prototype can validate (or invalidate) ideas fast, surface edge cases you hadn’t considered, cut through stakeholder doubt, align teams faster, and most importantly, unlock meaningful user feedback before it’s too late.

I can trace my passion for prototyping back to my final year of university, during an internship at a gaming company. Someone on the team installed Macromedia Flash on my computer and walked me through a few tutorials. It was pretty basic, but the idea of designing an experience, testing it in real time with a quick ⌘ Return, and instantly iterating back and forth, felt like magic. It was the first time I realised design didn’t have to be static when it came to designing interactive experiences.

Since then, the interactive arts and its tools have changed dramatically. Flash (RIP) gave way to HTML5 and JavaScript-based prototyping; Quartz Composer evolved into Origami Studio; and InVision, Flinto, Principle, Framer, Protopie, and Figma each introduced their own take. Today, AI-assisted environments like Cursor, Lovable and LLM-powered workflows are starting to play a more active role in the prototyping stack (more on that later).

Something I’ve noticed that remains consistent across every tool is that prototyping forces two parallel modes of thinking. On one side, there’s the expressive act of breathing life into an idea; mapping user journeys, defining flows, fine-tuning micro-interactions, and shaping moments of delight. This is where cause-and-effect, motion, and timing start to influence how an experience feels, and where small details, like easing curves or a playful transition, can change how a product is perceived.

On the other side, there’s the technical layer, learning the capabilities of the application (i.e. overcoming the steep learning curve of Origami) and implementing the logic beneath the surface that makes a prototype functional and dynamic. This means building out conditional logic, managing component states across nested interactions, accounting for all kinds of gestures. It includes handling input validation, managing user data, simulating asynchronous updates and loading states, storing session data, and integrating live system feedback like network conditions or sensor input. That technical depth extends further when prototyping with platform-specific capabilities: haptic feedback, location data, ambient signals, or multimodal inputs like the camera, microphone, gyroscope or accelerometer.

It’s the interplay between these two modes — emotional design and the logic of systems and technology — that makes prototyping such an important part of my design process. It pushes me to think far beyond what’s possible in the static form. It compresses the space between concept and implementation, revealing what’s essential, what breaks, and what can scale. More importantly, it transforms speculative ideas into reality that you can interrogate, refine, and build upon.

Does fidelity matter?

There’s a common argument in design that fidelity doesnt matter and that prototypes are just stepping stones, temporary artefacts on the way to validating an idea. And because of that, many designers hesitate to invest in hi-fi protos. Why spend time polishing something that’s ultimately going to be thrown away?

But I’ve found the opposite to be true. Don’t get me wrong, there’s value in low-fi protos much like a simple sketch of an idea on the back of a napkin, but as stakes get higher, the more believable and hi-fi the prototype the more valuable the insights and takeaways become. High-fidelity prototypes yield clearer, more actionable feedback, especially from users. There’s less cognitive dissonance. Participants don’t have to “imagine” how something will feel or behave, they can experience it directly. And as a result, the feedback you get is more honest, less speculative, and ultimately more useful.

One of the most memorable and technically ambitious projects I worked on at Messenger was rebuilding the entire iOS app in Origami to test a major update to the information architecture. It wasn’t just a visual replica, the prototype was wired with real user data made available when participants logged into their Facebook account directly within the prototype. That level of fidelity changed everything. It blurred the line between simulation and reality. Participants weren’t imagining how something might work — they were experiencing it with their own content, in context. The insights we gathered weren’t hypothetical; they were grounded in actual behavior and gave us the clarity and confidence to move forward with our design proposal.

The same is true when collaborating with stakeholders and engineers. A prototype that feels real doesn’t just communicate an idea, it builds trust in it. It answers questions you didn’t think to ask, and often becomes a foundation for the final product, not just a throwaway artifact.

Prototyping with AI

By definition a prototype is a preliminary version of ‘thing’ ’from which other forms are developed. So it stands to reason that regardless of what industry you’re in (from software to automotive manufacturing), prototypes play a key role in the design process. However the barrier to entry has historically been quite high (think of the learning curve of Origami or AutoCAD), but that all changes with AI tools. All it takes is just a few tailored prompts to manifest a working prototype into reality — from a simple idea or sketch, to production-ready code in seconds*.

While Origami is my go-to, there’s no question we’re in the middle of a huge shift. I wouldn’t call it a renaissance just yet, but for the first time in the short history of the internet, non-technical people, those who’ve historically been locked out of building things, now have the ability to bring ideas to life using AI, and that’s awesome!

I for one fall into that category. I’m not an engineer by any stretch (even though ive worked with 100's). I have a graveyard of ideas on my laptop that for one reason or another never saw the light of day because they required additional engineering support or bespoke knowledge of a particular platform. Now it feels like Christmas everyday! I can open any number of AI tools like Cursor, Lovable, Windsurf, V0, Replit, Bolt (some of which are more design-friendly than others) and generate working prototypes in a matter of minutes*.

The tools are impressive to say the least but I need caveat that last statement and tampen expectations. In some instances it can take just a few minutes to go from idea to working prototype depending on the complexity. Its easy to buy into the idea that AI tools have democratised software development to the point where its that easy, but, and this is a big but, the quality of what you can generated in minutes is objectively sub-par (lovingly known as ‘AI-slop’).

In my experience so far, to really get the most out you AI-prototyping-friend you need to invest hours, days, and even weeks to achieve the kind of results that you’d expect out of a high-end prototyping tool. For most people, quality isnt a goal and a rough working version of an idea will suffice. But as a professional designer, the true litmus test of an idea is whether or not it withstands the scrutiny of a trained eye. Its through this lens that i argue that most AI tools aren't meeting my expectations… yet.

That said, I’ve been using AI enough over the last few months to share a few insights on how to get the most out of your chosen AI tool, and how to avoid the pitfalls.

Firstly, even if you have a clear idea of what you want to build (you might even have a detailed mockup in Figma), I’ve found that ill spend a good portion of my time getting the the AI to reproduce and match the design 1:1. Even if I upload a reference image, it still takes a considerable amount of coercion to get the design right (which can get really frustrating). So far theres no single bullet solution that i know of, and you just need to persevere.

My second observation is that once your up and running, its easy to fall into a false sense of security and be lulled into the AI’s way of interpreting your prompts. What I mean by that is that even though it looks like your making progress and thousands of lines of code are being generated in front of your eyes, it can quickly go off the rails without you even noticing (until its too late). At which point you’ll spend more time debugging the issues or designing within or around the limitations than actually being productive and pushing beyond them. My general tip here is to be very clear and concise with your prompts and ask the AI to play back your request (for comprehension purposes) before it fires off 600 lines of new code.

Additionally, I’ve spent hours, even days working on an idea that I know I could’ve built in a third of the time using traditional tools (and achieved a better result), but for some reason I wanted to bend the AI to my will even though there was no logical reason behind it other than to prove to myself that the Ai tool was useful. My advice here it only use AI tools to prototype if it brings unique value to the experience. Don’t try and reproduce something you can just do in Figma in 15 minutes.

On the flipside, there are some rare moments when AI will recommend or suggest something that truly feels magical and serendipitous. Ive experienced moments where Ive asked AI to generate ideas that leverage unique technologies or APIs that ordinarily I wouldn't have been able to conceive on my own. These moments feel more creative and kin to the design process i’m used to, only now I have a super computer as a collaborator with infinite wisdom.

As AI tools advance, it’s probably a good reminder that the role of the designer isn’t just to produce output; it’s to bring perspective, discernment, good taste, to question, to refine, and to push boundaries beyond the status quo. And while AI can absolutely speed things up, I think the real value comes when you combine the technology with first-principles to create something truly unique.

Prototype with intention

Following on from my previous point, not every prototype can be created in Figma, and not every idea makes sense in Origami. One of the most important skills in prototyping is choosing the right tool for the idea. Some concepts just don’t fit neatly into the default design stack. While some tools are great for sketching layouts or user journeys, they often hit a ceiling when you’re crafting micro-interactions or trying to leverage platform-specific technology. The goal is to match the tool to the ambition of the idea, not the other way around.

Context matters just as much too. A prototype doesn’t live in isolation, it lives inside a story. Just like a scene in a film only works in relation to what came before and after, a prototype only makes sense within its technical, emotional, and behavioral context. Tool selection, interaction fidelity, even the environment it’s presented in, all shape how the idea is perceived. It reminds me of Marshall McLuhan’s quote, “The medium is the message”, a reminder that how you communicate an idea is just as important as the idea itself.

That’s especially true during the discovery phase. When you’re exploring a new space or direction, you’re not just designing screens, you’re part architect, part counselor.

Like an architect, you’re testing the physicality of an idea, mapping flows, stress-testing spatial relationships, thinking in systems. You’re asking: How does this interaction hold up over time? Where does it break? What happens when we push it further than expected? Prototypes give form to those questions. They allow you to simulate how a product behaves in motion, across different user states, devices, or entry points. It’s not just about what it looks like — it’s how it holds together when you actually use it.

But the counselor side is just as critical. Discovery isn’t a solo exercise, it’s relational. You’re absorbing business constraints, listening to users, mediating stakeholder tensions, and reflecting back priorities that may not be explicitly stated. In this context, prototypes become more than artefacts, they become instruments. They surface assumptions. They clarify intent. And often, reveal a more accurate picture of the problem than any strategy deck ever could.

Intentional prototyping reframes the work. It shifts the focus from output to understanding, from guessing what might work, to building clarity around what matters most.

At some point, prototyping stops being just a phase in your process and starts becoming core to how you design. The more time you spend building ideas that move, the sharper your intuition gets — and the stronger your instincts as a designer. You start anticipating how things will feel before they’re built. You learn to test assumptions quickly, push creative boundaries with more confidence, and communicate ideas in ways that leave little room for misinterpretation.

It’s been a while since I launched my first Flash prototype, but the feeling hasn’t really changed. There’s still something uniquely satisfying about bringing an idea to life (whether its with Origami, Figma, or AI), seeing it move, respond, and behave to human inputs. In an environment that’s increasingly abstract and compressed, prototyping remains one of the few places where I genuinely enjoy working and where I feel I have the most influence on the final experience. It creates space for decisions that aren’t just functional, but expressive. The small moments that give a product character — timing, rhythm, playfulness; often emerge here first and end up defining what makes an experience the most memorable.

--

--

Shane Allen
Shane Allen

Written by Shane Allen

Creative Director and studio founder (Haelo). Designing experiences for iconic brands around the world including Airbnb, Instagram, Messenger, VSCO, and Nike.

Responses (1)