Phase 4: Prototyping
Ideas on a whiteboard are cheap. The Prototype phase is about bringing those ideas into the real world so they can be experienced, interacted with, and ultimately tested.
Failing Fast and Cheap
A prototype is an early, scaled-down version of your product. The golden rule of prototyping is to expend the absolute minimum amount of effort required to learn what you need to know. You want to fail fast and fail cheap. Finding a critical flaw in a paper sketch costs nothing; finding that same flaw after a team of engineers has spent three months coding it costs a fortune.
The Goal of This Phase
The objective is to create tangible artifacts that users can interact with. Prototypes evolve in fidelity as you gain more confidence in the solution. It is up to your team to decide the fidelity of the prototype. Also, with the prototype you can have the entire team on the same page while also use it to learn from the users. You don't need to simulate the entire application with a high fidelity. If you can get the same outcome with paper prototypes or wireframes, there is no need to go the extra mile dedicating design and development efforts to it.
Prototyping
Prototyping could mean different things to different people in the organization. For example, a designer might think of prototyping on creating an interactive design in Figma while a developer might think of creating static HTML pages without backend that can be used in the the next phase of testing. In addition, prototyping as what is acceptible is evolving becuase you can generate a high fidelity wireframe with AI that would have taken weeks to complete. Therefore, you use what is available in your company of what makes sense in your project.
Common prototyping approaches include:
- Paper Wireframes: Low-fidelity, rough sketches focusing purely on layout and hierarchy.
- Interactive Prototypes: Medium-fidelity digital screens linked together to simulate flows.
- High-Fidelity Mockups: Pixel-perfect designs with exact typography, colors, and micro-interactions.
The following chapters will guide you through the transition from low-fidelity wireframes to high-fidelity masterpieces.