Rapid Prototyping
Episode #7 of the course User experience design for non-designers by Lyndon Cerejo
Welcome to Day 7 of our course on design and user experience! Our previous lessons covered design thinking, User-Centered Design, User Research, and UX Design. This lesson discusses prototyping, which brings to life all our work from the prior stages and makes it tangible for users and stakeholders.
Prototyping Basics
The old saying, “A picture is worth a thousand words,” captures what prototyping is all about: using visuals to describe thousands of words’ worth of design and development specifications that detail how a system should behave and look. Prototyping is the process of visualizing the future state of a system, be it a website or application, and validating it with users, stakeholders, developers, and designers. Doing this rapidly and iteratively generates feedback early and often in the process, improving the final design and reducing the need for changes during development.
Prototypes range from rough sketches to interactive simulations that look and function like the final product. The keys to successful prototyping are revising quickly based on feedback and using the appropriate prototyping approach. Rapid prototyping helps teams experiment with multiple approaches and ideas, facilitates discussion through visuals instead of words, ensures that everyone shares a common understanding, and reduces risk and avoids missed requirements, leading to a better design faster.
The prototype usually starts small, with a few key areas mocked up, and grows in breadth and depth over multiple iterations as required areas are built out, until the prototype is finalized. The rapidness of the process is most evident in the iterations, which range from real-time changes to iteration cycles of a few days, depending on the scope of the prototype.
Scoping a Prototype
The prototypes we are discussing here are not intended to be fully functional solutions but are meant to help users visualize and craft the user experience of the final product. With that in mind, when scoping a prototype, decide on a few key issues before beginning any prototyping work.
What needs to be prototyped? Good candidates for prototyping include complex interactions, new functionality, and changes in workflow, technology, or design to ensure a common understanding.
How much should be prototyped? A good rule of thumb is to focus on the 20% of the functionality that will be used 80% of the time, i.e., key functionality that will be used most often. Remember, the point of rapid prototyping is to showcase how something will work or, in later stages, what the design will look like, without prototyping everything.
What are the the stories? After identifying the functionality to be prototyped, weave it into one or more scenarios—paths through the user experience. For a website that sells sports apparel, one scenario could be “Boring Joe” buying the exact same sweatshirt that he bought six months ago (dare he try a different color?), while another scenario could be “Exploring Sam” browsing through the shirts and sweatshirts to find something new that interests her.
What iterations will you have? The entire prototype is usually built in parts. A good approach is to start prototyping broadly and widely and then dive deep into selected areas of the solution. For a website, this would mean building out the home page and landing pages for the main sections in the first iteration, sometimes referred to as a horizontal prototype. Subsequent iterations could drill down into one or more sections of the website, or a vertical prototype.
How to Prototype
I mentioned earlier that prototypes could range from rough paper sketches to interactive simulations that look and function like the final product, and each has its place in the process. We can progress quickly from a low-fidelity sketch to a medium-fidelity wireframe to a high-fidelity interactive prototype, as shown below.
High fidelity means it incorporates UX Design and visual design elements that make it look real. Interactive means you can click through certain scenarios (depending on the scope above) as you would interact with a functional website/application.
There are many prototyping tools available today to meet almost any need. For example, I like Cooper, as it has a nice assessment.
“If a picture is worth 1,000 words, a prototype is worth 1,000 meetings.” —IDEO
Our next email discusses how we can use the prototype to validate that the design meets the user needs through usability testing.
Here’s to refining your design eye!
Lyndon
Recommended reading
How to Choose the Right Prototyping Tool
Share with friends