In this piece, we’ll explain why rapid prototyping leads to better design, what you need to consider when prototyping, and then show you how to get started.
But first, a prototyping success story from the unlikeliest of places: 5.5 miles above sea level.
When Prototyping Is a Life or Death Scenario
In September 2008, outdoor outfitter Eddie Bauer worked with two world-class, high-altitude mountaineers—Ed Viesturs and Peter Whittaker—to develop and test the first prototype of the Katabatic Tent. A rugged expedition tent, six prototypes were iteratively tested on the world’s most grueling peaks and terrain, including Mt. Rainier, Aconcagua, Everest and Antarctica.
Photo Credit: “everest base camp – ebc” by ilkerender is licensed under CC BY 2.0
Each prototype was rigorously tested in the field by Viesturs, Whittaker and their team of guides, and then refined and improved based on their feedback.
As Viesturs and Whittaker put it, “Nothing goes to market until the guys who will be using it are happy with the product.” Eddie Bauer’s stance was the same: “If we’re going to sell it, it has to work.” Hence, after three years of prototyping and countless cold nights, Eddie Bauer finally had an MVP of the Katabatic Tent in 2012.
Now, you might be asking yourself, what does this story have to do with digital UX design?
A lot, actually. Think about it: if Eddie Bauer had simply gotten approval to sell V1 of the Katabatic Tent from a room full of executives based on 2D and 3D renderings that looked pretty cool, without developing iterative prototypes tested by actual users, what could have gone wrong?
- Best case scenario: Some weekend warriors have a chilly night car-camping in Yosemite.
- Worst case scenario: The product fails to protect its inhabitants at Camp 4 on Everest, which is 26,000 ft above sea level (aka the “Death Zone”) where, from an emergency support perspective, is basically on the moon.
Designing software isn’t typically a life or death situation. However, the implications of a product failing as it is providing a critical need is the same.
Photo Credit: “Climbing through the Yellow Band, Mt. Everest, -May 2007 a” by Lloyd Smith is licensed under CC BY-SA 3.0 via Wikimedia Commons
So, let’s talk about taking the leap from static wireframes to interactive wireframes, or what we’ll refer to as “low-fidelity prototyping” in this article.
Picture this: You followed the Guide to UX Design Process and Documentation and you now have solid, low-fidelity wireframes that represent all the functional features of your product.
Great! Now, how do you ensure those “functional” features are actually functional to your key personas? How do you ensure that you’re going to market with your “guide team’s” buy-in?
Prototyping Your MVP
The answer is… prototype… prototype…. prototype… and keep prototyping, iteratively, until you reach an MVP (minimum viable product).
This is called rapid prototyping, which Smashing Magazine defines as the process of quickly mocking up the future state of a system, be it a website or application, and validating it with a broader team of users, stakeholders, developers and designers.
Photo credit: Wikimedia. Creative Commons. Edited from original.
In an article published on UXmatters, Robert Reimann (Lead Interaction Designer at Sonos, Inc.; Past-President, Interaction Design Association (IxDA)) was quoted as saying:
“I think, without question, that rapid prototyping, when properly employed, can make user experiences better. Getting prototypes in front of colleagues, stakeholders, and target or existing users is a great way to get quick feedback addressing your design direction, business needs, customer needs, and usability.”
While Reimann does admit that feedback from rapid prototypes may not yield the type of results that in-depth, in-context usability testing uncovers, he follows up by stating:
“[Rapid prototyping] can certainly identify gross interaction, navigation, and presentation issues with a design, as well as areas to watch more closely in follow-on testing.”
Using tools that are widely available, you can easily turn your low-fidelity wireframes into low-fidelity prototypes and engage in the rapid prototyping loop of building, reviewing and refining. The goal of your low-fidelity prototype is to accurately simulate your final product’s actual interactions for a group of target users, which is very similar to what Eddie Bauer did with the “First Ascent” team.
A Practitioner’s Prototyping Tale
Now let’s shift to a story from a UX Designer working for a Fortune 500 tech company that’s attempting to break into the healthcare space:
“At [my company], we’ve always been great at consumer tech. But now we’re trying to break into the healthcare space. One of my first projects at [this company] was to build a brand new HIPAA-regulated portal for physicians, nurses and technicians to easily view radiology images in the cloud. My focus group wasn’t responding to my wireframes. They didn’t get it because they didn’t understand the interactions between screens. I decided to build a low-fidelity prototype using my wireframes so that the group could see how clicking a link here would take me to a screen there, or how selecting a drop-down option on this screen would show me an option on that screen. After showing my focus group the prototype, they got it and I received valuable product feedback.”
Photo Credit: “neck check” by woodleywonderworks is licensed under CC BY 2.0
But that wasn’t the final step for this particular UX Designer.
He told me that once the project team saw the low-fidelity prototype in action, they were able to make insightful observations that impacted the future design.
Because the low-fidelity prototypes were so fast and easy to create, the UX Designer was able to crank out a bunch of them with new features and enhancements to test simultaneously. Each prototype yielded valuable usability data from his group’s testing.
Using a Low-Fidelity Prototype to your Advantage
Let’s briefly review some of the key advantages to low-fidelity prototyping:
- Get quicker and potentially more feedback: When you give test users a beautiful visual design, the first thing they may assess are the colors, typography, imagery and general visual “feel” of the design. With a low-fidelity prototype, your testers can jump right into the nitty gritty of the functionality, without being distracted by what makes the design pretty.
- A/B testing can be done faster/easier/cheaper: When you can crank out 10 low-fidelity prototypes in the time it takes to create 2 high-fidelity prototypes, you can see that testing feature and content variations can be done much faster in low-fidelity. You can pivot much quicker.
- Focus on flow: Low-fidelity prototypes allow you to link up multiple wireframes to create flows. In this way, you can test the effectiveness of the order of things, rather than just the elements that the user sees on-screen. You can validate that sequences of interactions / actions make sense for users.
The Power of Low Fidelity Prototyping
What do you think Viesturs and Whittaker asked themselves and their team of guides when testing the Katabatic Tent prototype?
We can only speculate. But the following questions seem reasonable:
- How easy was it to set up the product and how long did it take to set up?
- What was the experience of actually using the product to meet our immediate needs?
- Did the product fail in its usability? Where did it fail?
- Is there room for improvement and, if so, where?
These questions not only apply to testing the Katabatic Tent prototype, but also apply to your low-fidelity prototype.
By putting your prototype in the hands of actual users, you can gain critical insight into how the product is performing (or underperforming) against its value proposition.
If you’d like to learn prototyping techniques and other UX best practices, I recommend checking out the following guides:
- The Ultimate Guide to Prototyping
- The Guide to UX Design Process & Documentation
- Web UI Design Best Practices
You can also practice your prototyping techniques in UXPin with a free trial.
