A complete guide to UX prototyping
Behind that innovative and intuitive product that people love so much are a lot of planning and sometimes endless re-edits. The modern product centers users in the making process and prototypes play a great role in this.
Prototypes are used extensively in different fields to increase the likelihood of meeting user demands or to examine the feasibility of ideas, some prototypes are important for cost estimation analysis as well.
In this article, we will discuss UX prototyping, how designers create prototypes and what they do with them.
What is UX prototyping?
The design of an interface involves a lot of thinking and refinement. Designers work hard to get their concepts down and polish this through feedback.
A prototype is an early model of a product designed to test the initial concepts of the designers. Therefore, prototyping is the process of creating prototypes to visualize and validate the designer's ideas.
UX designers create prototypes at different stages of the product design process, and the kind of prototype they make depends on the goal of each phase.
The design thinking framework popularly used in UX design is prototype-focused. To investigate concepts, features, feasibility, etc, usability studies and other tests take place.
Therefore, an interactive model which closely simulates the product's functions is a necessary component for feedback generation.
Benefits of UX prototyping
UX design prototypes help designers achieve several goals, some of which include:
Identify problems fast
One goal of every usability test is to identify potential problems with the design. As a designer, you can often overlook certain errors in your work, and inviting another pair of eyes could turn out what you need to help identify them.
Using prototypes, designers can present their concepts to fellow designers, stakeholders, and most necessary, the intended users.
This helps in identifying the shortcomings in your design before it gets to a later stage of the design where it is more costly to correct mistakes.
Identify areas of improvement
While some designs might not be necessarily full of errors, even expert designers often overlook simple areas that they could simply do better.
UI UX prototyping puts the designer's idea in the hands of other experts and interested parties who could help point out an area of the product that isn't efficiently designed, a missing feature that could improve the user experience, and so on.
Make design decisions
At the early stages of the product design process, fresh off ideation, designers are often faced with multiple potentially valid ideas. These ideas need to be evaluated and the more irrelevant ones weeded out.
Prototypes are ideal for that, through rapidly creating low-cost prototypes e.g paper wireframes and sketches, designers can test concepts and select only the most suitable ones for the subsequent phases of the design process. This helps them to avoid too much workload and waste of resources on ideas that won't play out fine.
Prototyping for empathy
Sometimes, there's a need to create designs based solely on the user's opinions and motivations, this is known as prototyping for empathy and it involves creating models to interpret the user's needs and then refining those models with more user involvement.
Types of UX prototypes
Depending on the stage of the design thinking process, UX designers can make use of different kinds of prototypes. They include:
- Low and medium-fidelity prototypes.
- High-fidelity prototypes (mock-ups).
Sketches and Storyboards
Shortly after initial ideation, the designers have to immediately interpret concepts using low-cost and easy-to-make prototypes, this is where sketches and storyboards come in.
By rapidly sketching down possible solutions on paper, designers can demonstrate their concepts to other stakeholders and receive feedback to refine these sketches into more meaningful designs.
These initial presentations help designers to streamline early product concepts by doing away with unnecessary features or adding novel ones. And since they are easy and cost-efficient to make— often needing just pen and paper— they encourage rapid integration of new and improved ideas.
Storyboards help the designer plan the expected user journeys while using the product, they are an important tool for user empathy.
Low-Fidelity prototypes
A major usage of prototypes is to test the navigation and user flows of an interface. Paper prototypes and sketches are not clickable and cannot help on that part.
With design tools, UX designers can create low-fidelity prototypes that are similar to paper prototypes but clickable. This enables designers to create a group of pages linked to each other to simulate the navigational flow of actual interfaces.
These prototypes are then presented to stakeholders and users for interaction. The goal, as always, is to observe the user's behaviour and identify ways to improve the experience.
Another form of clickable prototypes, often called the medium fidelity prototypes, are similar to the low fidelity ones but might include the addition of elements like text.
High-Fidelity prototypes
The final stage of the design comes after many iterations and improvements of initial concepts. Here, the prototypes created by UX designers are very close to the look and feel of the final version of the product.
The high-fidelity prototypes include colors, typography, icons and other visual elements that will appear in the final product. The designers usually arrive at these after several iterations in previous stages of the design process.
At this stage of the design, the UX designers ideally should be testing out the overall functionality and incorporating minor changes in preparation to release the final version. If as a designer, you encounter feedback that means you need to tear the whole design apart at this stage, then you possibly didn't conduct enough tests in the early phases.
High-fidelity designs are made using similar tools as low-fidelity prototypes, but they are expectedly more refined. Creating these prototypes involves adhering to UI principles that have the best interest of the users.
What is the best prototyping tool for UX designers?
Several tools enable designers to create clickable prototypes with ease, a lot also come with features to share these prototypes with a team or other participants.
While there might be slight differences, the steps involved in creating prototypes with these digital tools are similar.
Steps involved in creating UX prototypes:
- Create designs representing screens of a website or app.
- Connect these screens using transitions or advanced animations.
- When an interactive element is clicked, the present frame is replaced by the destination frame.
- Share the prototypes using a link.
After sharing the prototype, the next crucial task is to receive feedback. The real goal of prototyping is to see where a design can be improved. While a lot of tools make it easy for creating prototypes they might not be able to help designers conduct usability tests.
Popular tools for creating UX design prototypes include:
While the best is down to personal preference, Figma and Adobe XD are two widely recognised tools. Figma's collaborative features allow designers to prototype and communicate with ease. Justinmind is also gaining much recognition recently thanks to the ability to create prototypes and conduct user testing on the platform.
Key elements of successful prototyping
Speed: for the most part, prototyping is about failing fast, the goal of designers is to —as quickly as possible —spot areas in need of improvement through feedback. It is important to create several prototypes during the creation of a product. With techniques like rapid prototyping, more time-saving practices can help achieve more results in a shorter time.
Have goals in mind: every stage of prototyping must have clear goals that the designer wishes to achieve. Before testing prototypes with users or stakeholders, the designers need to state realistic goals for the test. What features of the prototype do you need feedback on? What metrics are you using to measure the feedback?
Keep it simple: prototypes should be as simple as possible. Often, only core features or unique additions need to be tested. For instance, if you are building an app that includes a chat feature very similar to what is available on other chat apps, it might be more productive to focus on testing other more unique features in your product.
Room for feedback: feedback is most vital to the designer, feedback from users has to fuel every step of the design process. It is one of the major reasons to create prototypes. Therefore, for a prototype to be successful, there has to be room for feedback. Prototypes shouldn't be finished products but a presentation of ideas that need refining.
What are wireframes in UX?
Wireframes are sketches of the user interface of a digital product, they essentially illustrate the skeletal design of the interface.
While people confuse wireframes and mockups, they aren't the same. Wireframes use shapes like rectangles, circles and lines to represent visual elements. On the other hand, mockups are polished designs that include color, text, icons, etc.
Wireframes are low-fidelity designs created at the early stages of the design process. The two kinds of wireframes include:
- Paper wireframes: drawings made on paper by the UX designer closely depicting an interface.
- Digital wireframes: designs similar to paper wireframes but made with design tools like Figma.
What is rapid prototyping?
Rapid prototyping is a popular term in UX design. But it isn't peculiar to that, in fact, it originates from the manufacturing industries where engineers create 3D models to test out ideas before building the product.
In a way, all forms of UX design prototyping can be considered rapid prototyping, but sometimes this term refers to an even quicker method of making prototypes.
Following the traditional design process, designers observe the steps below:
- Sketching – designers through brainstorming illustrate their ideas on paper
- Wireframing – the designer creates the skeletal framework for their ideas, this is a rough representation of the interface.
- Mockups – designers refine the wireframes by adding colors, typographies, images and other visual design elements using UI principles.
- Prototyping – designer links the mockups together to simulate the product's navigational flows and interactivity.
- Testing - the prototypes are tested by users, and this test provides feedback to designers to make improvements.
- Development – The engineering team turns the prototypes into the final product.
Rapid prototyping, however, involves a much more accelerated prototyping approach. Here, the goal is to test out ideas really fast and at various stages of the design process, this includes creating multiple paper or wireframe-based prototypes and iteratively enhancing that to the mock-ups based prototypes.
In rapid prototyping and lean UX, designers focus on key ideas and user experiences, reducing the time and cost needed to create prototypes. Building a prototype for an entire website at once and at the very start could be a bit time-consuming. Using rapid prototyping, designers can test core functionalities and novel features instead and iteratively build their way up.
Conclusion
UX prototyping is the fourth stage of the design thinking framework and an irreplaceable part of the design process. By creating prototypes and presenting them to users, designers can quickly incorporate feedback to help them ensure that they deliver products that closely align with the user's needs.
Interested in bringing your UX prototyping skills to mobile? Start with our introduction to mobile UI UX design for a comprehensive overview.
Blog
Marketplace
Secured payments
Axure official store
