Prototype. Everything.
On one project we reviewed static screens right up until late development. Then we clicked through a build. Our header — the one with the search bar — jumped between two states as you moved from screen to screen. A prototype would have caught it in an afternoon.
Why Prototype?
Prototyping isn’t only for code. Workflows, dependencies, the order you build things in — all of it can be prototyped. Here’s how prototyping can aid your project:
- Find problems early: Each prototype tests a part of your project, revealing any issues early so you can tweak things before the costs pile up.
- Test what you assumed: Prototypes test your plans, ensuring that your project steps are based on solid facts and realistic plans. Your prototype can come in handy with end-user research but also showcases well-thought-out plans when making improvements and adding features. If your prototype links break, your updates break a part of your flow.
- Keep stakeholders honest: Getting prototypes in front of stakeholders early keeps them in the loop and improves the feedback you get. You’ll reduce the risks of getting feedback later with the note, “I didn’t realize it was going to work like this!”
Beyond Technical Prototyping
Sure, check the tech. But don’t start there:
- Design prototyping: Use Figma’s prototyping. Click every screen, every button. That’s how you find out you never linked the Terms & Conditions — and that nobody’s written them yet.
- Process Prototyping: Try your project workflows early by drawing them out to spot any hitches or slowdowns before fully implementing them into your team or organization. Drawing out your process forces you to think about it in more detail, just like drawing out a schedule forces you to think about dependencies.
- Dependency Checks: Use prototypes to see how different parts of your project interact and depend on each other.
Practical Tips for Effective Prototyping
- Start Early: Bring prototyping into your project planning right from the start. The first thing you want to see in a UX design is a flowchart and then iterate on that in the UI design of the product.
- Iterate Often: Keep trying new ideas and refining them through frequent, smaller prototypes. Why would this make for a good addition? What does it do to the rest of your product or workflow?
- Include everyone: Show the prototype to stakeholders — is this how you pictured it working? Show it to the developers — what have we missed, and what integrations aren’t in this flow yet? You’ll get answers you wouldn’t have thought to ask for.
- Document Findings: Keep notes on what each prototype teaches you—what worked, what didn’t, and what you decided.
Is your Figma design file a prototype? Why not?