In a world where technology is constantly changing and rapid iteration to grow products is the norm, knowing how to prototype as a UX designer is more important than ever. Prototyping is a vital part of the process of creating successful user experiences.
In this guide, you’ll learn what prototyping is, what is not a prototype, why they’re important, how interactive a prototype should be and four ways prototypes are created.
What is prototyping?
Prototyping is the act of creating a prototype. Prototyping usually happens during the research and development phase of a product’s lifecycle. It often occurs before developers begin coding as well as the final phase of product development before the final rollout.
What is a prototype?
A prototype is a preliminary model of something from which later iterations are developed or copied. It’s essentially a way to show design intent.
In UX design, a prototype is usually some sort of simulation that shows developers, stakeholders and other team members how users will interact with the final product. This could be a UX design plan for an entire app or only a singular interaction.
What isn’t a prototype?
A prototype is not wireframes or mockups. In UX Design, prototypes are expected to have some level of interactivity. Mockups and wireframes are considered static, non-interactive design assets. Sometimes sketches are acceptable versions of a prototype, as long as multiple sketches are laying out an experience.
What is the purpose of prototyping?
It’s nearly impossible to design a great product without testing. Prototyping allows for testing before development for maximum efficiency throughout the building process. Effective testing during the research phase will save the product’s reputation. Plus, it’ll make the time and money spent on developing the product much more efficient.
Prototyping allows designers to make sure their concept will work as they intended. UX research and testing will also help maximise usability. Iteration based on the feedback gathered from real-life user testing is incredibly important to finding and resolving issues before a product is launched.
What is fidelity?
Fidelity refers to how precisely a prototype lines up with the final product. The fidelity of a prototype might vary in its functionality, visual design or content.
Lo-fi prototypes
A product that is not autonomously interactive, has an incomplete visual design or lacks content would be considered a low-fidelity or lo-fi prototype. Lo-fi prototypes are an easy method to communicate a high-level design concept tangibly.
Lo-fi prototypes are generally used for testing functionality rather than visual design. During testing, the designer will simulate how a user will interact with the product through a prototyping kit or by manually shifting through sketches or wireframes.
Lo-fi prototypes are affordable, speedy and helpful for team collaboration. They’re especially handy when a designer needs to clarify an idea to a stakeholder or developer. While they’re helpful internally, lo-fi prototypes can confuse users during testing. They can require a good deal of imagination to get the gist with their limited design and dynamics.
Hi-fi prototypes
High-fidelity or hi-fi prototypes are essentially functional prototypes. They look and act as closely as possible to the final product. A hi-fi prototype is realistic, detailed, dynamic and functional. They look like a real app or website, have the same content that will appear in the final design and are interactive.
Once a team has tested, iterated and clarified their designs, they create a hi-fi prototype. Hi-fi prototypes are typically used for – you guessed it – more testing. They can also be presented to stakeholders for approval in the final stages.
Generally, hi-fi prototypes are more expensive because they take more time and work to develop. They’re great for usability testing with real users. They allow designers to test very specific aspects of their design choices like animated transitions, stages of the user’s journey and micro-interactions.
How are prototypes made?
Prototypes can be made analog – on paper – or digitally. Digital prototypes are typically made using wireframe software and prototyping tools like Figma, Sketch, Framer or Adobe XD.
Paper prototype
Paper prototyping is when a digital product or interface is sketched out on paper. This is a low-fidelity form of prototyping. Usually, designers create hand drawings of the different screens they want to explore. One designer will act as the “computer” by switching out different buttons, drawings or “screens” based on a user’s action.
Linked wireframe prototype
To create a linked wireframe prototype, designers create digital mockups of each part of an app or website and link them together. When users click on something, they will be taken to another corresponding wireframe, mimicking how the final product will work. Clickable wireframes can be created with wireframe software. Linked wireframes are generally considered to be lo-fi prototypes.
Digital prototype
Digital prototypes are high-fidelity mockups of an entire app. They can be created with prototyping software. Digital prototypes allow designers to optimise the responsiveness of their design choices and perform accurate user testing.
Coded prototype
Coded prototypes are typically a hi-fi mockup of the proposed final product. They are the closest thing you can get to the ready-to-launch design. Coded prototypes will provide the groundwork for future versions of the product. Often, coded prototypes are only used in later stages or by designers who know how to code.
How interactive should a prototype be?
All prototypes in user experience design should have some interactivity. The level of interactivity your prototype has will depend on why you’re building the prototype, what stage of design you’re in and how much time you have to create the prototype.
If you’re developing a prototype to show the user’s journey or start designing a specific feature, a lo-fi prototype might be enough to work through your challenges. However, if you’re creating a prototype for user testing, hi-fi prototypes will get you more accurate data.
Prototyping is meant to help designers test their intentions. In the long run, prototyping also helps teams save money and time. If creating a hi-fi prototype won’t help you save time, money or allow you to test it effectively, then a lo-fi prototype might be enough for this phase of design.
The takeaway
Whether you’re attempting to present your final design idea to stakeholders or attempting to communicate with another designer, prototyping is the way to do it. It’s an essential skill for any designer.
As a designer, you’ll likely create prototypes throughout each product development phase on every project throughout your career. It’s useful to learn the lingo, the process and the expectations of prototypes.
