Welcome to Prototyping—the fourth stage of the Design Thinking process. After understanding your users in Empathy, identifying what problem you need to solve in Define, and generating possible solutions in Ideation, you are ready for Prototyping. In the Prototyping phase, you build simulations of your ideas to test their viability. Prototyping is where your project begins to take physical shape.
By prototyping your ideas, you can put them in front of people early in the design process and gain valuable feedback. This not only saves time, money, and resources but also improves the final product. The risk of not Prototyping can be detrimental to a product’s success or a company’s reputation. Take Google Glass, for example. Despite its advanced technology, the release of Google Glass was a total flop. Instead of receiving praise and popularity, it faced massive concerns over privacy and surveillance, and its users were met with unflattering (albeit hilarious) nicknames like “glassholes.”
By prototyping your ideas, you can put them in front of people early in the design process and gain valuable feedback. This not only saves time, money, and resources but also improves the final product.
As described by Rose Eveleth in an article for Wired Magazine, “a reference to Google Glass is shorthand for hubris, foolishness, a tech company completely missing the mark on what regular human beings like. Glass represents everything we love to mock about Silicon Valley — a bunch of nerds making ugly products that nobody actually wants to use.” Google Glass teaches us what can happen if we don’t prototype and test ideas early and often with users. We may end up walking down a long, expensive path in the wrong direction.
Google Glass teaches us what can happen if we don’t prototype and test ideas early and often with users. We may end up walking down a long, expensive path in the wrong direction.
Low-Fidelity Prototyping
Low-fidelity prototypes bring a sense of tactility to any rough idea. They are fast, cheap, and consist of little detail. Anyone can create a lo-fi prototype—at a minimum, all you need is a pen and paper and the ability to draw fundamental shapes like squares and circles. The moment you have a seed of an idea, you are ready to create a low-fidelity prototype. Doing so will help you test any assumptions and make smarter design decisions in future iterations.
Low-fidelity prototypes aren’t meant to be perfect. Instead, they are intended to communicate your idea simply so you can receive high-level feedback on them. As Laura Busche writes for Smashing Magazine, “Its purpose is not to impress users, but to learn from them. Instead of wowing people with our product, the goal of low-fidelity Prototyping is to have users wow us with their insight.”
“Its purpose is not to impress users, but to learn from them. Instead of wowing people with our product, the goal of low-fidelity Prototyping is to have users wow us with their insight.”
Laura Busche, Smashing Magazine
By creating something quick and cheaply, you are also more inclined to change or scrap an idea knowing you have invested so little into it so far. Equally, users are more willing to provide feedback without worrying about tearing your work apart because it doesn’t look finished or refined. Also, since low-fidelity prototypes are not detailed, users don’t get distracted by subjective preferences like color and imagery. Instead, they can focus on the conceptual (idea), structural (layout and information architecture), and interactional (user flow) elements. Embrace your user’s feedback openly during your testing. The more flaws found now, the better the next revision will be, and the stronger the final product will become.
Benefits of Low-Fidelity Prototyping
- You can test ideas early and cheaply—saving you time and money in the long run.
- You can get honest feedback from users during the design process and refine and iterate your product before it launches.
- Prototyping produces better end results that are more likely to meet user needs.
- Because prototypes are low cost and low effort, it’s easier to change or scrap ideas before designers become too attached to a direction or too many resources are spent building something potentially futile.
- Prototyping enables you to test multiple ideas or variations to determine the best approach to push forward.
- Prototyping helps designers keep users at the center of their work.
There are multiple prototyping levels—from low to mid to high-fidelity— and different methods used for each. In this article, we will focus on low-fidelity Prototyping.
Low-Fidelity Prototyping Methods
There are two common types of low-fidelity prototypes: wireframe sketches and paper prototypes. This video by Google provides a good introduction to each.
Low-Fidelity Wireframes
Lo-fi wireframes are usually rough sketches made in black and white. They can help designers explore the layout, visual hierarchy, and navigation of an interface rapidly. This is a great method for exploring a range of possibilities, and getting ideas out of your head and onto paper.
Paper Prototyping
As described by Carolyn Snyder in her book Paper Prototyping, “In its broadest sense, paper prototyping can be considered a method of brainstroming, designing, creating, testing and communicating user interfaces.”
In its broadest sense, paper prototyping can be considered a method of brainstroming, designing, creating, testing and communicating user interfaces.
Carolyn Snyder, Paper Prototyping
Paper prototypes are highly interactive and extremely low-fidelity—meaning they don’t require a lot of time and effort to make; yet, they can result in important discoveries about an interface’s usability. They are great for exploring your product’s high-level concepts like navigation, information architecture, and user flow.
How to Build a Paper Prototype
Gather Supplies
At a minimum, the only supplies you need are scissors, a pen, and paper. But you may also want to consider using other affordable supplies like construction paper, rulers, stencils, double-sided tape, markers, or colored pencils.
Identify Your Goals
Determine what insights you want to gain from your users. Are there different ideas you want to explore, specific user-flows, or layouts? Create a list of tasks you are interested in testing so you know which screens and elements to make.
Make Your Prototype
Create your screens, dropdowns, pop-up modules, etc., based off of your goals. While drawing, ask yourself if your screen represents the idea clearly and simply. Only include relevant and actual text (i.e., no lorem ipsum). Explore different ways to communicate interactive elements like dropdown or filter menus and different element states (like inactive vs active). Most importantly, don’t forget to get creative and have fun!
Building Low-Fidelity Prototypes for The Shanghai Source
Recently, I have been working on a mobile app for the city of Shanghai, called The Shanghai Source. Using my updated site map and user flows for reference, I began prototyping early ideas for the app.
I started with some rapid wireframe sketches to explore how my content could be structured on main screens and most importantly, put me into a creative mindset. I found myself referencing my sitemap quite a bit during this process and thinking through which content could be considered a higher priority than others. What would a user need to see right on the home screen? What content would a user need to access from anywhere in the app? What content needs to be accessible, but only occasionally?
Afterward, I started making my paper prototype. During this process, I found myself referencing my user flows quite a bit—making sure I was considering all of the possible actions and their corresponding screens/modules. As I made my paper prototype and the product took a physical, tangible shape, I discovered areas where my user flows could be simplified or tweaked. It was interesting to experience how each exercise continues to build on the previous and provide new insights.
As a graphic designer, I really enjoyed the process of stepping away from the computer, working with my hands, and building something unrefined. I found myself more focused on structure and flow than the pixel-perfect details of a digital design.
Within one day, I went from having nothing to represent my app to building a physical, interactive model that I can now get in front of people. I’m sure many elements will change based on user testing, and I look forward to discovering what those are. After all, my low-fidelity paper prototype isn’t meant to represent the final direction—just the first.
Resources and References
Complete guide to paper prototyping by Justinmind
How to Make Paper Prototypes by Sitepoint
The Ultimate Guide to Prototyping by Marvel
The Magic of Paper Prototyping by Marvel
Design Thinking Phase 4 – Everything you Need to Know About Prototyping by Workshopper
The Skeptic’s Guide To Low-Fidelity Prototyping by Smashing Magazine
About Google Glass
Google Glass Wasn’t a Failure. It Raised Crucial Concerns by Wired
Google Glass Picks Up Early Signal: Keep Out by The New York Times
Writings by Michelle Ovalle 