Why should you incorporate prototyping into your design process?
Make a compelling prototype, boost your product development process, and learn the value of prototypes.
In nearly 5 years of UI/UX design, I’ve got different levels of feedback depending on how I present my work to stakeholders.
I discovered that if I only show my static design mockup with some basic user flows, people can roughly understand how I intend to approach the problem, but it’s difficult for them to visualize how this design would work in reality.
As a result, it is very important for me to be very articulate about the interaction details of my design in order for my audiences to be able to better visualize the whole design concept.
However, sometimes when I’m designing for a large-scope project or a complex feature, it’s a bit difficult to clearly describe my idea by just showing static design mockups. So I’ve been looking for a better way to help me showcase my work without explaining too much? Then I finally landed on prototyping.
I started translating my ideas into an animated or playable prototype from different levels of tasks, it helps me largely reduce the communication cost and give people a simpler way to absorb the idea I provided.
In the past few years, I’ve tried a lot of prototyping tools in different use cases, I learned a lot from building those interactive experiences, it makes my design more vibrant and compelling, it’s also an important skill to me being a UX designer.
So in this article, I will be sharing with you some basics of prototyping, and why I think prototyping is crucial in your design process, also cover some great practices from my past experience. Alright, let’s get into it!
What is a prototype in UX design?
Prototyping is a pretty common approach in the product development process these years. The prototype is basically a simulation of a real product which is used for getting feedback or testing, it empowers designers and product team to rapidly iterate on solutions based on what we learned from people.
The prototype can be low-fidelity which has minimal functionalities with limited design detail or high-fidelity which can include fully interactive experience, more detail of polished design, even with real data. Depending on your goal, time and resource, you can choose either way to build your prototype as long as you are able to validate your idea by using them.
🎆Prototype.jpg
Why do we need a prototype?
There are many advantages of the prototype. Here are some common examples:
- Prototype helps designers to align the design direction with team before investing too much time in the wrong direction.
- Prototype helps the team to validate ideas or discover problems from the real users in the early stage of the project before investing too much time & resources on the development.
- Prototype helps designers to get quick feedback from peers or teams in a short period of time.
- Prototype helps designers to better demonstrate ideas and explain the complex interactions in a more intuitive way.
- Prototype helps designers really think-through the interaction detail and come up with a more compelling solution.
- Prototype helps people to imagine how this new experience works on the real product.
I wouldn’t say there’s no downside of prototyping, sometimes building a prototype can be quite time-consuming if you’re not familiar with the tool or the project scope is really big.
But here is a nice quote from Tim Brown, the CEO of the “innovation and design” firm IDEO, which I feel exactly the same way of why he says.
“They slow us down to speed us up. By taking the time to prototype our ideas, we avoid costly mistakes such as becoming too complex too early and sticking with a weak idea for too long.” — Tim Brown
Oftentimes, one problem could lead to multiple solutions, prototyping is an effective but lost-cost approach to get the answer of which solution makes the most sense to people.
Why do designers need to learn prototyping?
As I mentioned above, I believe the answer is fairly clear. Your design proposal must be very solid in order to convince your stakeholders, so making your design interactive is absolutely a good approach to bring to your design to the next level, which also closer to the final product experience.
Additionally, if you’re designing an experience for the user, how would you know how that experience would look like without really use it yourself? When you’re building a prototype, you will get a chance to really deeply dive into processing every piece of design detail or discover potential usability issues, those might not be able to produce when designing a non-interactive mockup.
Lastly, human beings are highly visual creatures. It’s always not an easy job for people to visualize something before they really see it or feel it. Of course, if you’re a great storyteller, maybe you can bring people into your story and understand your idea, but with the prototype, your story will become even powerful and persuasive.
So, as a prototype how realistic the prototype should be?
A lot of people think the prototype supposed to be very complicated and pretty much feels like a real product. Surprisingly, sometimes prototype can be very simple and rough. Here are two types of prototype commonly used:
Low-fidelity prototype
Low-fidelity prototype means this prototype has limited functionality and unrefined appearance, but it is enough to showcase core user flow, the transition between pages or the logic of design. Due to the inherent of low-fidelity, people can more focus on flow & logic instead of visual treatments.
The low-fidelity prototype can be done by just pen & paper or sticky notes to assemble a paper prototype. If you’re more comfortable doing it in digital tools, you can use design tools such as Sketch, Figma, Axure, etc to build a digital prototype. These tools usually have basic prototyping function built-in that you can easily create a click-through UI flow and share with your co-workers.
Usually, we use the low-fidelity prototype to get quick feedback from internal peers, it normally happens in the early phase of the project, since it is easy to build and low cost, we should try to explore more ideas with low-fidelity prototype until we land on the ideal solution.
High-fidelity prototype
In opposite to low-fidelity prototype, a high-fidelity prototype offers many more details in terms of functionality and interaction presentation, it supposed to very close to the real product and pretty interactive that people can clearly perceive the idea we want to convey. I often use High-fidelity prototype for user testing to validate the concept of feature, discover usability issues, and get more insightful feedback from people.
Sometimes I also use the high-fidelity prototype to explain specific micro-interaction or animated transition which is hard to be understood by low-fidelity prototype or design mockups. There are many great prototype tools out there such as Principle, Framer, ProtoPie and other alternatives that allow you to build high-fidelity prototype effectively.
Our team also has a prototyper who can build coded prototype with real data which makes the prototype feels even more realistic, but it’s a bit costly and taking time to build. So depending on your purpose and what you want to achieve, you can take any approach as long as it fits your situation.
When should I build a prototype?
Prototyping can happen in almost any phase in the design process, from a very early idea exploration to more concrete design, there are different scenarios that you might want to use the prototype to boost you decision-making process:
1. Exploratory phase: Get quick feedback from your UX peers
As a designer, we usually explore many ideas in the early design phase, this stage is perfectly fit for using the low-fidelity prototype to get feedback, it’s quick, cheap and disposable, and usually you can get very valuable feedback to refine your design.
2. Communication & Decision-making: Present your design to the internal stakeholders
I believe there are some non-designer such as PM, engineer, sales, marketing or any other people in your team. Everybody has different expectations on the feature, their own view to interpret an idea. It’s difficult to bring everybody on the same page. But if you’re able to show a prototype that is playable, it would help to accelerate your communication and easier to make a decision.
3. Execution: Handoff interaction detail to engineer
There is always a gap between Design and Engineering, the engineer doesn’t know what’s the expectation from the designer in terms of interaction, designer doesn’t know how engineers will implement their design. There are so many missing areas that can not be presented on the static mockup, so there’s an inevitable back and forth discussion between engineer and designer every time when it comes to the implementation phase.
To bridge this gap, the prototype could be a perfect candidate, in my personal experience, engineers usually feel appreciated if designers can provide some kind of prototype(video is also fine) to demonstrate the micro-interaction, page transition and how the user will behave, that way they don’t need to guess or infer these tiny details by themselves.
4. Validation: Put your design in front of real users.
Prototypes play a key role in solving the usability issues before launching the product, most of the teams are trying to avoid a situation where after they spent so much development resources but eventually created a bad user experience or useless feature. Putting your design in front of real users can help the team to validate ideas and evaluate the feasibility of your design.
What tools can be used for prototyping?
There are various and wide-range tools that you can use to build a prototype, each of them has different focus and strength, most of them have trial period that you can play around, pick one that you feel most comfortable then start building up the knowledge of it, the more you use it, the more you can achieve.
There are many options out there, I would just share the most common tools that people use:
1. Figma / Sketch / Adobe XD
Those are mainly UI design tools but also offer basic prototyping functionality, which allows designers to create a link-through page flow pretty quickly.
2. Invision
Similar to the design tools above, Invision is a prototyping & collaboration tool that allows the designer to create page flow and able to share across the team. it also has a handoff function that engineers can easily inspect design spec on the mockup.
3. Axure
A design & prototyping tool with versatile features, it streamlines the design process into one single app, it has a ons of pre-built functional components that designer can immediately use to build an interactive prototype, also it supports cloud share that everybody who has shared link can try your prototype.
4. Principle / Flinto / ProtoPie / Proto.io / UX Pin
These tools are pretty similar, though the functionality might different, but generally you can use them to build a prototype with rather detailed interaction and transition, for example, you can trigger an object to control other elements in your design, or transform the element from one page to the other, it empowers your prototype to be more realistic.
5. FramerX
Framer X is high-fidelity prototyping tools with very powerful features that perfectly connect design and code, even though it’s not easy to learn for designers, but you can literally use FramerX to build a production-like prototype with code-component, API integration to display real data.
The tools above have their own pros and cons and learning curve, I suggest you can play around with them first then decide which one you would like to dig into.
Things to keep in mind
- Most of the time we don’t need to reproduce the entire product in the prototype, we only need to focus on core user flow or something we want to validate.
- Prototyping is not a one-off thing, it has to be iterative and improvable.
- The prototype doesn’t need to be perfect, if something really hard to do, just fake it. It is all about getting feedbacks and iterations and definitely not artifacts.
- The purpose is the key, the main point of prototyping is to get feedback and iteration, choose the right prototype approach wisely to fit your case.
- Prototyping shouldn’t be taking too long even it is the high-fidelity prototype, because you will lose the changes to iterate your idea if it takes too long.
- If you want to test your prototype with real users, make sure to plan your tasks beforehand, and make sure your prototype can help you learn what you want to learn.
- Focus on the goal of evolving your design & prototype which will bring you lots of different ways to solve a specific problem.
Prototyping is just the other way of communication
As a designer, we all want our designs to deliver the best experience and eventually comes to life. It’s not as easy as what we think most of the time, there are so many people we have to work with, in order to make our design more convincing and strong.
Whatever we do in the design process tie to one goal: ship the best product and best experience, it requires many hours of design iterations and countless conversations, and prototyping is just one approach to help designers to better communicate their design, as well as think through their idea better.
Hello, UX/UI people! I’m Simon, a UX designer from Taiwan, currently working in Tokyo. I like sharing and passionate about design, if you want to chat with me or share any opportunity with me, feel free to drop me a line: linsimon.design@gmail.com, or find me on my Facebook & Dribbble, Looking forward to hearing from you soon!
