In simple terms, a prototype is a preliminary version of a digital product (e.g. an app or a website). You need a prototype to have some idea about how users will interact with the solution and find potential issues early on before they get the opportunity to ruin the user experience.
Here we will discuss what a prototype is in UX design, different types of prototypes, why you need one, and how to make the most of it.
What is a Prototype in UX Design?
Let’s say you are building an app. There are some stages involved in the design and development process; i.e., research, wireframing/mockup/prototyping, UI design, development, testing, and deployment.
Once you know what features and elements to include, you have to create a simple design to have some initial idea about the final product. This is where prototyping comes in. However, if you want to be more specific, there are two more steps that come before prototyping – wireframe and mockup.
First, you take a pen and paper (or use an app like Figma) to create a few sketches. You need this to decide which features should be placed.
Then you have to finalize a final design that’s called wireframing. In other words, this is the sketch that you have picked from a few versions by taking the best elements of each version.
After you are done with wireframing, now you have to add visual elements like colors, patterns, typography, imagery, and iconography to have a better idea of how the final product will look.
However, this is not interactive yet; i.e., you cannot use the app the way you would in real life.
After the mockup, you are finally at the prototyping stage. Prototyping is a way to determine what the experience of using the final version of the product is going to be.
There are many ways to do this but ultimately, the idea is to find faults within the design and make changes to it early in its life cycle to avoid complications later.
During prototyping, you try to figure out different things like convenient button placements, optimal website navigation, and correct element choices.
Here is an example of a low-fidelity prototype. You can see that it demonstrates how the navigation in the application is supposed to go. This gives a clear idea to the designer how to make the app easy to use.
In case you didn’t know, fidelity refers to how close a prototype is to the final version of a product. They are usually referred to by low, medium, or high fidelity depending on their functionality when compared to the final version.
| Wireframe | Mockup | Prototype | |
| Fidelity | Low | Mid to high | Low to high |
| Visual representation | Basic visual representation without design elements | Visual representation with design elements | Can range from basic to full-on implementation of all design elements |
| Purpose | Outline the skeletal framework | Understand how the design and aesthetics look | Understand the functionality for users |
| Elements | Lines, simple shapes, and placeholders | colors, patterns, typography, imagery, consistent styling with brand identity, etc | Ranging from simple elements to final elements |
| Interactivity | None | None | High |
| Importance on decision making | Very little | Can be used to make a decision if the website or app is not complex | Very important when designing any digital product |
Types of Prototype
There are a few types of prototypes that you can create for your project. Which of these types of prototypes you will be creating will depend on some factors like the type of project, your budget, expected returns, required fidelity, etc.
The different types of prototypes are:
Paper prototyping
Paper prototyping is arguably the simplest form of prototyping. It is a low-fidelity design where you do not need to be an expert. All you need is a pen and paper to start drawing it out by hand.
Here is an example of a paper prototype. There is nothing complex or detailed here, yet it gives a great demonstration of how users will interact with it. This also takes very little time to create so it can help speed up your development process.
Linked wireframe prototyping
Linked wireframing is a way of connecting several pages of wireframes to understand their usability. This is a low fidelity and easy way as you will already have the wireframe ready.
Looking at the picture, you can tell that the pages are connected depending on the buttons indicated. Very little technical knowledge is required here since you can use software to get it done.
This also takes very little time to create which can help you save time or if you are working on a deadline.
Digital prototyping
There are many tools available that can help you with creating digital prototypes (we will talk about these tools later). They require some technical knowledge to create a prototype and are considered mid to high fidelity.
They are a great way of creating user-ready prototypes that you can use to conduct public testing for more effective feedback.
Coded prototyping
Coded prototyping is the hardest type of prototyping requiring your coding knowledge to pull off. This is a high-fidelity prototype that will be the closest to the final version of your digital product. This code can be the foundation to create your final product.
While it is difficult to implement, the scope for customization is higher since there are almost no limitations you would find in a digital program. You can build it up from the ground up with countless ways to add any element to your product.
Here is an example of what these types of prototypes look like. If you are a coder, you will understand how it has been designed. If you enjoy coding or want full control of your projects, go for coded prototypes.
Why Do You Need to Prototype?
While you can design and launch a product without prototyping the user experience, doing so can cause a lot of users various issues you did not think about during development.
Tom and David Kelley said it best. “If a picture is worth 1,000 words, a prototype is worth 1,000 meetings.”
Prototypes help understand how effective the initial design is and bring up problems that are almost impossible to spot during the planning stages. It is especially important for expensive projects as an ineffective project with a lot of investment can result in devastating losses.
Sometimes if we get too far into the dev cycle without resolving some seemingly small issue at the root, it can cause irreversible problems in the long run.
What to Do When Prototyping
Define specific goals and reasons for prototyping
Do not just prototype because you heard you need to. Have specific goals and mindsets when delving into it. Be mindful of where you might encounter issues and where the button placements make the most sense. Be diligent in understanding what issues the users might face, and take corrective actions whenever necessary.
Only prototype what is needed
If you are using a high-fidelity prototype, it might be best to devise only the necessary parts that might have issues with end users. High-fidelity prototypes take up a lot of time and money to create, and creating parts that you know do not have any doubt about will be a waste of resources which you might as well put in the final products.
Understand your user base and how they would interact
When creating your UX, you will need to understand how intuitive and tech-savvy your user base is going to be. If the target demographic is people over a certain age, for example, 40, chances are they might have trouble navigating a complicated site. Design your UX around the technical knowledge of your target.
Design for applicable devices
One of the biggest mistakes one can make is designing an interface not considering the device the majority of the user base uses. Make sure to already know the preferred devices or platforms the target audience uses.
Otherwise, you may find yourself in a position where you focus on designing the mobile interface of a website where the majority would use it from a desktop.
Monitor feedback and make adjustments
The whole purpose of prototyping can be described as collecting feedback. Analyze them and try to understand where the root of the problems and concerns are coming from. Make all the necessary changes based on your analysis.
Ask for opinions from other specialists
Since the project you are creating has an emphasis on visuals and functionality, you should ask everyone around for their opinions. Obviously, the opinions of the end users and experts will be crucial but you should also ask members of other departments of your company. They can give you valuable insight from an outside perspective that otherwise you would not think of.
What Not to Do When Prototyping
Just as there are tasks you should be doing, there are a few things you should AVOID to make sure your prototyping is not hampered by them.
Inadequate research
No matter what project you undertake, a lack of research will always be an issue. Make sure you know the ins and outs of the relevant fields so that you do not have to pay a heavy price due to oversights.
Having too many wireframes
Having too many of anything is not a good thing. That is also the case with wireframes. Having more than required will cause unnecessary complications in the process and cause you too much trouble.
Setting up the wrong type and fidelity for prototyping
As we have seen, there are several types of prototypes with their own fidelities. You should pick the appropriate specification for your prototype.
Otherwise, you will not only waste time and resources, you will not get the required feedback you need to make adjustments. Only select the specifications you need.
You do not need to go overboard if you have a simple product and at the same time, you cannot go for a simple measure if your final product is complex and needs a lot of supervision.
Complicating the prototype
We have mentioned that you need to select the right type and fidelity for your project. Having a high-fidelity prototype for any simple project will needlessly complicate procedures and waste much of your efforts.
Weaknesses of Prototyping
While prototyping is a necessary step, there are some drawbacks you need to be aware of.
One of the primary ones is that mid to high-fidelity prototypes can be quite expensive to create than what you expect. As a result, your budgeting needs to account for that. There will be costs for recruiting users, testing, making alterations, and testing again which will take up time and money not initially thought of.
If you are planning on creating a high-fidelity prototype on your own, you may have to go through a learning curve with the software you are using. This will undoubtedly cost you time and a lack of experience can make you spend more time than what is needed.
There is also a case of the quality of the feedback. If your sample size of testers is not accurately representative of your target audience, you may find yourself working on data that is useless for you.
This can happen for various reasons like not having a large sample or not selecting the correct demographics as testers.
Top Prototyping Tools
If reading this so far has inspired you to create prototypes, then worry not, as we have provided some suggestions on what type of tools you can utilize to help you on your way. Of course, if you plan on doing paper prototypes, a simple pen and paper along with your artistic capabilities will be all you need.
Microsoft PowerPoint
There is a very high chance you already have Microsoft PowerPoint installed on your computer. There is even a good chance you have used it for various projects in your student and work life. Why not get started with a program you already have some experience with?
Powerpoint presents its users with lots of templates that can suit whatever design or aesthetic you want to go for. It is very easy to use to create layouts and its familiarity makes it a popular choice for non-technical users.
If you are using Microsoft Windows, you most likely have it installed on your device.
Adobe XD
From the Adobe family of products which you are also likely to be familiar with, Adobe XD can be used to make prototypes for your design. It has all the features a designer might need like wireframes, animations, storyboards, sitemaps, flowcharts, team collaboration, prototype testing, and anything else you might need.
Figma
Figma is one of the go-to interface creation tools for designers. It is convenient and easy to use along with a lot of features letting designers create what they want. The ability to collaborate with your team online also makes it very popular among groups of users.
Sketch
Sketch is an iOS-exclusive software, meaning you will only be able to use it from Apple devices like Mac computers. Despite its exclusivity, it has a lot of active users with a lot of resources that can help you figure out what you are looking to create. It is simple to use and rich in features, making it a must-have design tool for any Mac user.
Not to mention, an active community with a lot of user-created content makes it the best place to look for any sort of inspiration.
Invision
Invision is another easy-to-use prototyping tool with all the necessary features. It allows you to connect images together in an easy way and it has the function of letting a team work on projects together.
Aside from all the features, the website provides excellent blogs and tutorials to help newcomers get started.
Framer
Framer is a tool that allows you to create coded prototypes. In fact, it is one of the first tools that integrated coding in prototyping. It has all the features one may want along with the scope for complex coding techniques opening up a lot of options for arranging your product.
You can work on it through a browser and collaborate with your team. This makes it a great choice to create high-fidelity prototypes.
SwiftUI
If you are a coder and looking to create digital products for iOS, SwiftUI is the tool for you. Using Xcode, the tool allows you to create code that can be used for all of Apple’s platforms, namely iOS, iPadOS, macOS, tvOS, and watchOS.
It is intuitive and easy to use and is very flexible in how you apply it. You can create high-fidelity prototypes and apps for any Apple platform and switch between the platforms with the same codebase.
Final Words
What is a prototype in UX design? Now that you know the answer, you can start creating an amazing UI/UX design that will deliver value over the long haul.
If you still feel unsure and need an experienced professional to work on your projects, contact us to meet our fantastic team experienced in serving brands and companies globally. We will provide the best support money can buy and have your dream projects come true.
