The State of User Research 2022 report has arrived! Explore the data.
SUBSCRIBE TO OUR NEWSLETTER
May 10, 2022
You don’t have to start from scratch. Build better prototypes with over 120 inspiring (mostly free!) prototype templates and examples.
Why bury the lede? We searched high and low to find the prototype templates and examples to suit just about every use case, software, experience, and design skill level—and we’re happy to share the fruits of our research. Feel free to bookmark the following Google Slides deck for quick reference.
A prototype is a stripped-down representation of a final product or design that UX teams use for concept validation and usability testing. Prototype testing enables teams to create the best user experience while saving time and money
Designers and researchers create prototypes to:
Usually, the process for prototyping starts simple and layers on more complexity in later stages—from paper, to low-fi, to high-fi, to coded prototypes—with testing and feedback collection happening before moving on to each stage. Once the final prototype has been vetted by research, it’s passed onto engineering teams to build the actual product.
The ‘fidelity’ of a prototype determines how close the prototype is to the final product. A sketch, for example, would be considered at the lowest end of the fidelity scale, whereas a coded prototype would be considered high-fidelity.
You’ll determine the right fidelity for your prototype based on what your goals are and how far along you are in the design process. Here are some pros and cons to consider when choosing the right level of fidelity:
Although paper prototypes can be useful when you’re still collaborating and brainstorming, many UX researchers believe they’re too basic for effective usability testing. Instead, create low-fi, fully-digital prototypes for your earliest stages of testing to improve the quality of your test results without committing to costly high-fidelity designs too soon.
There are many things to consider in the process of creating your prototype, but we’ll just cover the basics here. For the detailed, step-by-step guide to creating a prototype, subscribe to our Field Guide to be notified when the chapter is released.
Along with your design and prototyping tools, you might consider using User Interviews to recruit and manage your research participants. Sign up now and get your first 3 participants for free.
To help you determine the right approach to your next prototype, we’ve rounded up some of the best prototype examples for different use cases. Keep scrolling for top-notch examples of:
As the name suggests, a paper prototype is made with pen and paper. Although not ideal for sharing in a remote environment, here’s a great example of a paper prototype walkthrough video, created by a student in Interaction Design Media at the University of Limerick:
As you can see, the prototype consists of simple, hand-drawn pictures of each screen in the user flow of this particular app design. This designer’s done a good job of presenting it as realistically as is possible with paper prototypes, using the frame of an iPhone to mimic the user’s scrolling and clicking behavior.
Here’s an example of a paper prototype used to demonstrate the user’s journey through an app concept:
This prototype lays out all the different screens in the app and the possible paths a user can take to get to them.
Last but not least, here’s a fun example of a paper prototype for a game, created as a games development project at King Mongkut’s University of Technology Thonburi:
Although the prototype isn’t truly interactive, the moving paper parts help viewers get a real feel for what the final product might look like.
Low-fidelity prototypes are great for presenting your design with some level of interactivity before committing to full product development. This video shows the process of creating a low-fidelity digital prototype using one of the most popular prototyping tools, Adobe XD:
As you can see, the designer starts with static wireframe designs and converts them into low-fidelity prototypes by switching from “Design Mode” to “Prototype Mode” in Adobe XD. In prototyping mode, the designer can connect individual design elements to simulate a user flow.
Here’s an example of a low-fidelity prototype from Focus Lab:
As you can see, this prototype is far more detailed than the paper prototypes and more clearly delineates the user flow throughout the website. Although no brand colors are used, shading and other specific design elements are beginning to take shape to showcase the site’s functionality.
Here’s an example of a low-fidelity, interactive prototype from Draftium:
If you click through to the example site, you’ll see that it’s fully functional, allowing users to navigate to different pages and interact with all of the site components.
Here’s an example of a prototype for an event app designed by Javier Oliver on Dribble:
This is a great example of taking a low-fidelity prototype and building on the user experience in the high-fidelity version.
The designer also created this prototype to demonstrate how the app transitions will look when users scroll through the app:
As I mentioned earlier, high-fidelity prototypes are interactive and designed to look and feel like the final product. Here’s an example of a high-fidelity prototype that reacts to user input and real data from JustInMind:
If you click through to the example on JustInMind’s website, you can click through multiple user flows in the prototype, including making a new transfer, reviewing different accounts, and viewing credit cards associated with your account.
Although some of the elements are clickable (e.g. “My Accounts” and “New Transfer”), not all of them are (e.g. “Notifications” and “User Settings”). This allows you to narrow the scope of your usability test to specific tasks without too many distractions.
Here’s a video walkthrough of a high-fidelity prototype for a web/mobile application by Club UX:
As you can see, the interface is interactive and presents a real experience of multiple user flows through the product. Although not all elements are interactive, there’s enough functionality to give users a true sense of how the product works.
Malik Mannan created this example of a high-fidelity, interactive website prototype:
If you follow the link and click on the image, you’ll launch the interactive prototype, where you can scroll through the webpage as if you’re visiting a real website. None of the buttons are clickable, but it provides a powerful-enough experience for users to understand the look and feel of the final product.
Here’s an example of a coded website prototype built by Youse’s Head of Design, Anderson Gomes, using Bootstrap Studio:
The site is fully interactive and responsive, allowing for greater confidence in usability test results.
Here’s an HTML prototype for a fictional back office system from Atlas Code:
The prototype is online and fully functional, so you can interact with it for early user testing and validation of the site’s flow and functionality.
If you click through to the prototype link, you’ll be able to interact with the prototype to get a sense of the designer’s vision for the user experience.
Here’s another example of a coded prototype from Andreas Johanson:
The original concept was created by Ghani Pradita and shared on Dribble, and Andreas Johansson implemented the design through code. Take a look at both the original mockup and the interactive prototype—it’s a great opportunity to feel the difference between a static design and a functional prototype.
Once you’ve built your perfect prototype, it’s time to test it with your target users.
Recruit from a pool of more than 850,000 participants to reach nearly any target audience with User Interviews. The median time to the first matched participant is just three hours. Or, build and manage a panel of your current users with Research Hub.
Content Marketing Manager
Marketer, writer, poet. Lizzy likes hiking, people-watching, thrift shopping, learning and sharing ideas. Her happiest memory is sitting on the shore of Lake Champlain in the summer of 2020, eating a clementine.