5 Prototyping and Design Iteration
Learn how to choose, create, and iterate prototypes to explore design ideas and answer specific questions before committing to a full build.
What prototypes are for
A is a model of a product or service made so a team can explore ideas, communicate them, and learn before committing to a full build. It can be as simple as a paper sketch or as realistic as a coded, interactive interface. Choose the simplest model that can answer the question at hand; a does not need to be production-ready software.
Representing design ideas
Different formats make different aspects of a design easier to examine. The boundaries between them are flexible: a can be clickable, and a sketch can serve as a paper . The important distinction is what the model lets the team investigate.
Sketches are quick drawings of possible screens or flows. They help generate and compare ideas and discuss basic structure without spending time on visual details.
Wireframes show screen structure more deliberately, including the placement of content, controls, and navigation. They help clarify hierarchy and how users might move through a task, often using simple shapes and placeholder text.
Interactive prototypes let someone try a simulated flow, such as selecting a button to move to another screen. They range from linked wireframes to coded models that look and behave much like a real service.
Choosing
describes how closely a represents the intended product. It is not just about visual polish: a may look realistic but simulate few interactions, or look rough while accurately representing a complex flow. Match the level of detail to the question being tested.
, such as sketches or paper screens, is fast to make and change. Use it to explore concepts, compare layouts, or check whether a basic task flow makes sense.
, such as a clickable design or coded , takes more effort. It can reveal issues with realistic content, interaction, screen sizes, or implementation when those details matter to the question.
For an appointment-booking service, a team might first sketch two alternatives: one long form or a sequence of short steps. A simple paper can help compare how users understand the overall flow. After choosing a direction, a clickable can test whether people can select a date, recover from an error, and confirm the booking.
Exploring alternatives and iterating
Use prototypes to learn, not to promise that the depicted design will be built. A focused process helps teams investigate uncertainty while keeping the model’s effort and detail appropriate:
State the question. For example: “Can users find the right appointment type?”
Create alternatives. Sketch materially different solutions rather than polishing the first idea.
Choose the minimum useful . Include only the detail needed to investigate the question.
Try the with people or teammates. Observe where they hesitate, misunderstand, or take an unexpected route.
Revise, compare, or discard. Use what was learned to make another version or choose a different approach.
Quick, inexpensive models make it easier to change direction before substantial development work is invested. More realistic prototypes support testing of more detailed interactions, but take longer to create and can make unfinished ideas appear settled. Keep the model focused on the uncertainty being investigated, and make clear that it is a rather than a finished service.
In general, sketches help generate and compare ideas, wireframes clarify screen structure, and interactive prototypes let people try simulated behavior. Begin simply when exploring broad alternatives, add detail when realistic content or interaction is necessary to answer a question, and iterate based on what the reveals.