Prototype
A prototype is a preliminary model or representation of a product used to explore ideas, test concepts, and gather feedback before committing to full development. Prototypes range from rough sketches to functional simulations, but all share the purpose of making abstract ideas concrete enough to evaluate. They're tools for learning and communication, not final products.
Why it matters
Building is expensive; learning is cheap. A fully developed feature that users don't want represents substantial wasted investment. A prototype that reveals the same insight costs a fraction as much and takes a fraction of the time.
Prototypes enable teams to:
Validate ideas before building them. Will this solution work? Does it solve the problem? Prototypes provide answers before commitment.
Communicate concepts more effectively than descriptions. Showing a prototype creates shared understanding that words alone can't achieve.
Gather specific feedback. Users can respond to something concrete. "What do you think of this flow?" yields better input than "What do you need?"
Iterate rapidly. Prototypes are cheap to modify. Problems discovered in prototypes are cheap to fix; problems discovered in production are expensive.
Types of prototypes
Prototypes vary in fidelity and functionality.
Low-fidelity prototypes
Simple, rough representations focused on concepts rather than polish.
Paper prototypes are sketches on paper, often hand-drawn. Users can "interact" by pointing while the facilitator shows appropriate screens.
Wireframes are basic digital layouts showing structure without visual design. Boxes, lines, and placeholder text represent interface elements.
Storyboards are sequences of sketches showing user journeys, emphasizing flow rather than interface detail.
Low-fidelity prototypes are fast, cheap, and good for early exploration. Their roughness signals that feedback on concepts is wanted, not polish criticism.
High-fidelity prototypes
Detailed representations that approach the look and feel of final products.
Visual mockups show design in detail - colors, typography, imagery, spacing - but aren't interactive.
Interactive prototypes built in tools like Figma, Sketch, or InVision simulate real interaction. Users can click, navigate, and experience flows.
Coded prototypes are built with actual code but aren't production-ready. They enable realistic interaction and even data connections.
High-fidelity prototypes are better for usability testing, stakeholder approval, and validating detailed interaction design. But they take longer to create and may invite polish feedback when concept feedback is needed.
Functional prototypes
Working implementations of specific functionality.
Proof of concept prototypes demonstrate technical feasibility. Can we build this? Does the technology work?
Concierge prototypes deliver value through human effort rather than automation, testing whether users want the outcome before building the automated solution.
Wizard of Oz prototypes appear automated to users but are actually human-operated behind the scenes.
Choosing prototype fidelity
The right fidelity depends on what you need to learn.
Use low fidelity when:
Use high fidelity when:
Use functional prototypes when:
Prototyping process
Effective prototyping follows a learning-oriented approach.
Define what you want to learn. What questions should the prototype answer? What hypothesis are you testing? Clear goals focus prototype design.
Choose appropriate fidelity. Match fidelity to learning goals, not to what's technically possible.
Build quickly. Prototypes are disposable. Speed matters more than craft. Don't polish what you might throw away.
Test with real users. Watch users interact with the prototype. Their behavior reveals more than their opinions.
Capture learnings. What worked? What didn't? What surprised you? Document insights before they fade.
Iterate or proceed. Based on learnings, refine the prototype for another test or move toward real development.
Prototypes in product development
Prototypes serve various product development stages.
Discovery uses prototypes to explore solution concepts for validated problems.
Design uses prototypes to refine interaction patterns and visual design.
Validation uses prototypes to test whether solutions actually work for users before building.
Communication uses prototypes to align stakeholders and developers on what will be built.
Common prototyping mistakes
Skipping straight to code forfeits the learning advantages of cheaper exploration. Even if you can code, sketching and mockups first often reveals problems sooner.
Over-polishing prototypes wastes effort on disposable artifacts. Prototypes aren't products; they're learning tools.
Testing the wrong thing happens when prototype fidelity doesn't match learning goals. Testing visual design with wireframes, or testing concepts with high-fidelity mockups, yields misleading feedback.
Prototype attachment makes teams reluctant to discard or significantly change prototypes they've invested in. Remember: prototypes exist to learn, not to ship.
Insufficient testing builds prototypes without actually showing them to users. A prototype that stays inside the team fails its purpose.
Prototypes and customer feedback
Prototypes are feedback vehicles. They make abstract ideas concrete enough for customers to respond meaningfully.
Tools like Klero can help capture and organize feedback from prototype testing, connecting user responses to specific concepts and tracking how feedback informs product decisions.
