Why prototyping is essential for your product team?
While browsing through design positions on LinkedIn, you’ll find ‘prototyping’ listed more and more as a required skill for a Digital Product Designer; no matter if it’s for UX or UI. For me personally, it’s an exciting sign and an indication that companies are starting to realize the importance of prototyping within the design process.
After years of being a UXer within a digital consultancy, I’ve created prototypes for various uses. The concept of prototyping is pretty straightforward for designers, yet sometimes clients can still get confused about what a prototype actually is and its purpose. In an agile set-up, even your teammates, such as your Product Manager could argue the necessity of prototyping. So what exactly is a prototype and why is it so important?
—
What is a prototype?
“A beta version of the product to test with and to be learned from”.
While looking for a definition of ‘prototype’, you’ll probably come across a statement like the above. The key point to highlight is that the prototype is not the final product, instead, a ‘beta version’ — something you can test with and learn from by collecting feedback.
It’s hard to say when the first prototype in history was made. Such a concept has always existed but didn’t get much attention until somewhere during the 1970s, along with the “revolt of the audience”. That was a sign of modern science: innovation was no longer made by experts in a closed lab, instead, via an open creation, involving both the “experts” and the “laypeople”. This is also likely how user feedback came to the stage. (Read more about the history of prototypes here👈)
Following this, a prototype of a digital product is a communication tool, that helps digital designers (the experts) communicate their ideas to users or clients (the lay audience); which returns with feedback to help refine the product before production or release.
Obviously, prototyping isn’t the only way of conveying the concept of a digital product. We have a mass of alternatives, such as wireframing, flow diagrams, information architecture, visual mock-ups, and so on. (You can read more about those here 👈) But what is it that makes the prototype so special compared to these other techniques?
—
Why choose prototype over other methods?
Because it’s real & tangible!
“If a picture is worth 1000 words, a prototype is worth 1000 meetings.” — Tom & David Kelley
Our brains are programmed in such a way that we can quickly process information via visual and tangible experiences but not so much with abstract info. A prototype, in this sense, magically explains a concept via only a few clicks; reducing the potential complexity of the product along with communication.
For the clients, a (high-fidelity) prototype is usually the closest demonstration of the real product before development. The intuitiveness of the prototype not only empowers the stakeholders to make better decisions but also helps them to easily convey the concept to other stakeholders to gain buy-in.
For the users, a prototype allows them to experience the product in the most realistic form possible, which generates real reactions, rather than perceived feedback. In any testing, when asked for feedback, users think and then answer. It’s difficult to validate whether these answers are real thoughts or something made up because you’re asking. That’s why you observe. A smile in the face, confusion in the eyebrow, a pause in the action, all reflect the real thoughts in a user’s mind. In many cases, these observed results are more powerful than the reported ones. That’s why the fidelity of the prototype matters.
“If the product doesn’t look real, the user reactions won’t be real.” — Jake Knapp
For the team itself, a prototype can be used for clarification and alignment; especially for behaviors and transitions. You may have 20 lines of acceptance criteria on Jira for a design system component but a link to the prototype explains everything.
Because it’s fast & iterative.
Testing ONLY with the final product is risky.
A prototype can be made and tested at any stage of a design process, collecting feedback for product refinement. This helps the team reshape the product in an agile way before development or release (once released, you might turn to analytics). NEVER prototype and test at the end of the process, do it throughout.
To do this you need to prototype fast. This might’ve been impractical ten years ago but now, with the help of modern prototyping tools, prototypes can be created and adjusted very quickly. Within 3–4 days, a prototype can be made from sketch to test-ready (of course varying from project needs and capacity).
Because it saves money.
Coding your product is expensive. Prototyping is not.
In my current team, prototypes are usually created by the designer(s). Such set-ups allow the development team to focus on the devving, while the designer is exploring or validating the concept. Coding a test-ready product involves front-end, back-end, design and quality assurance testing (QA), while a prototype only needs one designer.
Moreover, the subscription fee of prototyping tools is usually not that expensive. For instance, Framer X is just $15/month and proto.io $29/month. Many other popular tools are ‘freemium’ or free, such as InVision Studio and Origami. It’s up to you to choose the right tool. Try, learn and practice. (See an overview of some tools here 👈)
—
When & how to prototype?
ANYTIME! Whenever it’s a good time.
As said already, a prototype can be made at any stage of the design process but what makes it a good time? You need to:
Consider the objective(s), audience, and capacity.
Each stage of the design process has its own objective(s). Let’s take the Double Diamond model as an example, where prototyping usually happens in the phase of “Define”, “Develop” and “Deliver”.(Read more about the Double Diamond model here 👈)
“Define” is the Synthesis Phase where research findings are wrapped up to generate a product scope or direction. In this phase, lo-fi prototypes can be used as “proof of concept”. The audience of these prototypes involves both the users and the clients. Quick responses are collected. Assumptions are validated. Key questions to answer are mainly around “whether or not users see values in the product (prototype)”? Once the team has consolidated the direction, the product requirements are revamped and from there comes the next phase “Develop”.
“Develop” is the Ideation Phase where diverged solutions are created and validated. Prototypes are mainly made for testing purposes and are usually more in detail (mid-fi or hi-fi). The team quickly tests out different options and make better decisions based on the test results.
“Deliver” is the Implementation Phase where the team builds, tests, learns and iterates. Most likely the dev team has already started the development. A prototype can still be made for testing, yet it can also be used to communicate and align the design with the teammates.
Do NOT forget to evaluate the capacity before prototyping. If a solution is aimed to be delivered within only one week and you clearly know prototyping would cost you a whole week, look for other alternatives, e.g. prototype only the minimum viable feature(s) or a lo-fi instead if the visuals and content do not impact much on the test results.
Start from low fidelity (lo-fi) to high fidelity (hi-fi).
We use the level of fidelity to differentiate prototypes, which varies on:
- Interactivity (static or clickable)
- Visuals (sketch, wireframe or final interface)
- Content (close-to-real or actual content)
Starting with a lo-fi and progressively moving towards hi-fi is the most common approach. However, if you aim to impress your stakeholders with your design skills, a hi-fi prototype with fancy visual tricks usually works better, even if it is an early stage.
—
To sum up
Great user experience is always based on empathy, this applies to the users, the designers, and the clients. Prototype as a communication tool can easily bridge the gap between designers and the audience, validating if the concept(s) goes along with the end-customers and the business.
Prototyping and testing iteratively are probably one of the best ways to reduce risks along the product development process. If you have any doubts, prototype and test it, the reactions from end customers are the best inputs for refinement. Do NOT rely on assumptions or gut feelings.
Last but not least, prototyping is just one of the paths to success. Always keep in mind the objective(s), the audience, and the capacity to help you make a better choice.
Thanks for reading! 🙏
I am Huī Lín, a UX researcher & designer focused on creating meaningful digital experiences. I am currently living in Amsterdam and working at Accenture Interactive. Super happy to share my UX stories with you. 😆
Got any thoughts or feedback? Feel free to say Hi 👋 (Twitter, Dribbble, Linkedin, Instagram)
Special thanks to Irene Falgueras, and all my dear writing group members! 💪
References:
- [The Long History of Prototypes]
- [Paper prototyping is a waste of time]
- [Wireframes, Prototypes, Mockups: what’s the difference?]
- [Top 20 On-The-Go UI Prototyping Tools of 2019 You Must Try]
- [Is this a prototype or an MVP? Well actually, it’s a proof of concept]
- [How to apply a design thinking, HCD, UX or any creative process from scratch]
