UX Prototyping – What Is It Exactly
Before venturing into UX prototyping, it is worth explaining what a prototype is and what business benefits it brings. A prototype is an elementary design that has the potential to turn into the final product. It is a basic version of a product that enables you to conduct initial product testing and collect feedback from potential users.
Now, let us investigate its various benefits.
What are the benefits of UX prototyping?
UX prototyping provides a plethora of benefits and can be conducted for various reasons:
- Verifying product-market fit: Prototyping gives us tools and resources for testing and validating our ideas and making sure they are fit for the market. If the product is not deemed market worthy after the prototyping results, you can always adjust and add refinements to bring it up to par. The useful insights that prototyping provides always goes a long way in turning your ideas into reality.
- Improving user experience: Prototyping is a vital tool for a UX designer and helps in elevating the user experience as well. It makes the job of a designer easy by gathering important feedback and insights, thus improving the user experience as an end-result. The ability to produce rapid UX prototyping and quick design revisions means a better product that is achieved in a shorter time with less cost and effort put into development.
- Shortening development time and costs: Research shows that prototyping shortens development time and costs. Prototyping reveals bugs ahead of time and lets you fix them before you start working on UI tasks. If you omit the prototyping stage, then you risk creating a less efficient UX design that might eventually need redesigning. Testing early and prototyping is much easier than redesigning the entire UI.
Source: Unsplash
Now that we know the benefits of prototyping, let us discuss the different prototyping methodologies available.
Prototyping methodologies
Prototyping is not a monolith - there are various methodologies, which can be used in UX prototyping. Depending on the types of ideas you are trying to serve, or the types of problems that need to be solved, here are a few major ones that should be incorporated into your UX process:
1. Paper prototyping
Paper prototyping is popular among UX designers due to its inexpensive and flexible nature. Some people confuse sketching with paper prototyping, but they are both quite different. Paper prototypes are more versatile than regular sketches and can be created by using materials like cardboard and stencils to help produce more defined screens. It can be cut out of paper which gives you the flexibility of moving and switching UI elements around. You can also incorporate post-it-notes into your paper prototype to start defining your application flow. Here are a few major benefits of using this prototype:
No special skills required: Even a novice UX designer can create paper prototypes as they are simply made of paper. No special skills are required but a great imagination goes a long way.
They are inexpensive: Paper is very inexpensive and since these prototypes are made from paper, they are very budget-friendly as well.
Low fidelity: Paper prototypes are low fidelity – or so-called limited function prototypes, but that does not make them any less valuable. These wireframes are normally concerned with what goes where in a design rather than how it looks or the colors that will be chosen. Due to this reason, they are faster to create than their high-fidelity counterparts and aid in expediting the UX design process.
Source: Unsplash
2. Digital prototyping
Digital prototypes are interactive and quite robust and are mainly used for app prototyping. You can see the functionality, usability, and realism all come together with these prototypes. Here are the key features:
They are realistic: They are clickable and respond to actions, therefore, they provide a complete and realistic visual picture of your mobile app or website to the stakeholders before it goes into production.
Can reduce development time: Studies have shown over time that digital prototyping allows developers to catch design problems upfront which reduces development time. Early digital simulations in the product development cycle can expedite the development process as most digital prototyping tools have drag and drop interfaces and no coding is required.
A useful reference source for developers: Digital prototypes can be used to understand the functionality of a product in a way that paper or screen specifications cannot deliver. As an example, if a developer needs to understand how a specific widget or control should work, they can use the digital prototype to easily answer functionality questions.
Source: a4plus
3. HTML prototyping
HTML prototypes are getting obsolete, but they still have a secure place in the world of UX design. As the name implies, this prototype is built by using the HTML language. It offers a great advantage to people who are fluent in coding. They are simplistic in design without any fancy typography, imagery, or color choices and can be useful for website prototyping. Here are a few benefits of HTML prototypes:
Can be viewed in any browser: All browsers support HTML. Since this prototype is coded in HTML, it can be viewed in any web browser.
Inexpensive to create: You do not need any special tools to code a prototype in HTML. There are many free HTML editing tools that you can download free of cost. This makes this prototype very cost-effective as well.
Sets the technical foundation: HTML prototypes set the foundation for a product and that foundation can be iterated upon. HTML prototypes also go into the coding stage faster since they have already been partly written in code.
In the next section, we are going to glance into the steps required before creating a prototype.
Source: Unsplash
How to Approach UX Prototyping
Irrespective of whether you are building an app or a website prototype, there are several steps you need to take before creating one:
Step 1: Develop and perfect your idea
The first step before bringing your idea to life is to figure out what problem it is going to solve. For example, if you are trying to build a mobile app that lets users create a to-do-list, you need to ensure your app is unique in terms of solving the problems of your target audience. This idea might seem basic at best, but most successful apps always pay attention to this step before moving forward with the prototype and design phases. To you, your idea might seem revolutionary, but for the end-user, it must offer real functionality as they will be downloading, sharing, and using your app regularly. Questions like “how different is your app compared to similar ones?”, “does it offer extra functionalities or integrations with other apps?” or “does it provide an appealing interface?” should be addressed beforehand.
Step 2: Come up with product requirements
Once you have identified the problems your product or app will solve; it is time to create a list of the cover features and prioritize them. Start by creating a list of main features your app should have and then move on to shortlisting the ones that will form the core of your app. The prioritization of features should be addressed next and should align with the needs and preferences of your target audience. It would be best if you divide the features into “must-haves” and “nice-to-haves”. Take the first 3-4 features on the priority list and begin crafting your prototype with them in mind.
Step 3: Draw sketches of your app or web primary screens
This step is all about the user experience. To keep the features of your app visually organized, start by sketching the primary screens of your app. Once the sketches are ready, you can start adding details and keep building the screens further. The initial flow should already consist of one potential user flow that you can keep on refining as you venture into developing your app.
Step 4: Build wireframes based on your sketches
Wireframing is the next step in developing your prototype. A wireframe is a basic outline of your product and is normally based on elements like boxes, words, and lines. It is wise to add a few descriptions in those elements to communicate your concept better. The idea behind wireframing is to not create the final look for your app but to create a framework that sets your app in the right direction.
Step 5: Build a prototype
Now it is time to employ your wireframes to create a prototype. You can either put them together to create a basic prototype or help transform the initial ideas into interactive prototypes by using specialized tools. These tools build prototypes that have the look and feel of real apps by using fake content.
Summary
Prototypes are the essence of any design project. They bring immense advantages to the entire UX process – from the ideation phase to the completion phase. In this article, we provided a comprehensive insight into the types of prototypes, their benefits, and the types of methodologies used with them. We discussed that a prototype is an elementary draft that provides many benefits of verifying the product-market fit, improved user experience, and shortened development times and costs.
We also glanced over the main types of prototyping methodologies that include paper, digital, and HTML prototyping. Lastly, we discussed the various steps involved in the creation of a prototype: a) develop and perfect your idea b) come up with product requirements c) draw sketches of your app or web primary screens d) build wireframes based on your sketches e) build a prototype.
14 min