Prototyping is the cornerstone of the design process, requiring a blend of creativity and practicality.
We create and test the features that are most appropriate. Finally, our vision comes to life.
(Image credit: Adapted from Naked Design Labs)
As shown in the above illustration, prototyping gives you something functional to test with users so you can iterate accurately. But while prototyping is an important technique, designers can choose from a variety of styles, methods, and processes.
The fidelity of your prototype helps determine the appropriate process.
When we talk about fidelity, we’re referring to the functionality and visual detail. How close is your prototype to the final product? Low fidelity prototypes (like those created on paper) translate rough design concepts into something tangible and testable. High fidelity prototypes, on the other hand, are usually later iterations created in prototyping tools to help refine interactions.
Multiple factors affect the level of fidelity to build into a prototype, including:
- Client & company budget in terms of time and money
- Company’s resources and specializations (e.g. simpler prototypes can be more feasible for startups)
- Tech savviness and creativity of users (less savvy users might have difficulty imagining a low-fidelity prototype as the final product)
- Potential conflicts of interest (e.g. if the person prototyping will also help in coding the product)
- Responsive design (lower fidelity prototypes aren’t as helpful for visualizing how a design adapts to different devices)
Designers can also choose to build their prototype from wireframes midway in the design process, from more detailed mockups later on, or jump right into prototyping from the very start.
As described in the free Ultimate Guide to Prototyping, there is no “best” way to prototype, only the right tool and process for the job at hand.
In this guide, we’ll explore the spectrum of prototyping processes, fidelities, and tools so you can find the best fit for your project.
When to Start Prototyping: 3 Points of Convergence
There’s no green light that will magically blink when it’s time to start prototyping. When to prototype is the subject of just as much debate as how to prototype. The traditional linear process looks something like this:
- Sketching — Brainstorm by drawing quick and rough sketches on paper.
- Wireframing — Start laying out the skeletal framework with boxes and rough shapes.
- Mockups — Inject detail into wireframes with colors, typographies, photos, and other visual design elements.
- Prototyping — Add interactivity to mockups by stitching screens together for basic prototypes or adding animations/interactions for advanced prototypes.
- Development — Code in language of choice to turn the prototype into the final product.
But with the popularization of new ideas such as Lean UX and rapid prototyping, plus the school of thought that wants to get into coding as quickly as possible, this traditional sequential method is becoming outdated.
Let’s look at some new variations, and explore their advantages and disadvantages.
1. Sketches/Wireframing & Prototyping
Some designers prefer to start prototyping right away, and for good reason.
This is a core concept of Lean UX, devised by Jeff Gothelf, Director of UX at Neo Innovation Labs (you can hear him describe it in this thorough webinar). Lean UX emphasizes prototypes as “the fastest way between you and your code.”
The Lean UX process offers three simple advantages over other methods:
- Speed: Skipping and consolidating phases will get you to the end product faster, but possibly at the cost of quality.
- Efficiency: The nature of the method is to avoid waste, so the only work done will be the essentials — no time spent on “busy work.
- Experience, not deliverables: Part of “trimming the fat” is minimizing documentation. Teams communicate better and faster, improving collaboration in designing the experience. State the design vision, then iterate with that in mind.
One of the core processes of Lean UX is going straight from a detailed sketch or wireframe into a prototype. You can do this as simply as adding a few animations and basic interactivity to your prototype (if you’re using the right tool), testing with a minimum of 5 users, and iterating as needed.
Low fidelity prototype created during a Yelp redesign exercise. (View large version)
In our Yelp redesign exercise, our goal was to increase frequency and time on site for occasional Yelp users. We started with some rough sketches to explore concepts. Once we narrowed it down to a single concept, we created a wireframe. As we created the wireframe, we also created functionality by adding a few interactions.
You can see above that the lo-fi prototype created in UXPin was far from complete, but we were already able to arrive at the following structural decisions:
- Distinguish the search field as the primary visual element through generous white space
- As a secondary visual element, “Best Of” content is presented in a dropdown menu for fast acces
- All categories are presented in a card format for ease of selection
While we don’t yet know exactly how the design will look, we certainly have a clear idea of how it will function. Not bad for roughly
If you’d like to know more about Lean UX and rapid prototyping, UX Matters features a great discussion thread about it in which 9 industry experts weigh in with their opinions.
2. Mockups & Prototypes
Mockups are better-dressed wireframes.
Neither require functionality, but mockups give a better idea of what the final product will look like, and at times suggest how it will function. You could build a hi-fi mockup in a prototyping tool (if it includes enough visual libraries), but you could also create them directly in Photoshop/Sketch.
The main difference between building a prototype based on a mockup instead of a wireframe is that mockups automatically provide the baseline design for a mid- to high-fidelity prototype.
Because wireframes are more concerned with the broad strokes of design (such as overall layout), they usually lead to low-fidelity prototypes. You’ll definitely want to consider this since, while low-fidelity prototypes are great for quick collaboration and exploration, high-fidelity prototypes can be better for product definition and estimates.
High fidelity prototype created during a Yelp redesign exercise. (View large version)
When redesigning an existing website, creating prototypes from a mockup makes a lot of sense. Since you already have the high-fidelity visual assets, you don’t necessarily need to restart with a wireframe (unless you are doing a drastic rehaul).
In the second half of our Yelp redesign exercise, we created a new iteration in UXPin for the hi-fi prototype. We then created custom UI patterns and icons, saved them as Symbols for easy re-use, and then started layering them over the old lo-fi prototype. As a finishing touch, we added basic interactions like page transitions and dropdown animations.
The result was a hi-fi prototype that looked and worked much like the end product – perfect for another round of usability testing.
3. Coding & Prototyping
Introducing code early into the design process produces a lot of benefits, namely a more solid foundation when beginning development (which can mean less revisions in code). But it’s not so much a question of whether or not you should code with the prototype, but whether or not you can.
As Andrew Fitzgerald, Senior UX Architect for Deloitte Digital, points out, most designers have a “complicated” relationship with code.
When it comes to coding prototypes, it helps to start with a sketch and then dive straight into HTML or another language of choice (just make sure you check your work on smartphones and tablets). This lets you explore ideas on a whiteboard or on paper (where they’re easy to alter) so you aren’t trapped with mediocre concepts just because they’re cemented in code.
Regardless of whether you choose to add coding to your prototype, involve your developers each step of the way. You don’t want the first time your developers to see the prototype to be in an email with a long list of notes.
How to Prototype: The Rapid Prototyping Process
Rapid prototyping is less a separate process and more a filter for efficiency.
Designers consider it a core principle of Lean UX, but it also applies to any of the prototyping processes we previously described. In rapid prototyping, you revise quickly based on feedback and shift to multiple prototyping approaches based on the requirements.
We can break down the process into three stages:
1. Create your information architecture and user flows
Your information architecture (usually represented in a site map) lays out the breadth and depth of the content. You create the the blueprint for the entire experience by laying out all your screens.
Photo credit: Adapted from UX Movement’s site map chart
Once you’ve built the IA, you can dive one level deeper with user flows. User flows show common paths for moving between different screens in your information architecture.
2. Scope the prototype
Your first prototype should focus on just the core user flows. Focus on the 20% of functions that deliver 80% of your product’s value.
If you were creating a mobile banking app, the first prototype must build out the flows for primary functions such as:
- Logging in to the app
- Reviewing monthly statements
- Paying off monthly credit card balance
- Redeeming rewards points
- Disputing payment claims
3. Iterate, Test, & Repeat
Start with breadth, then dive into depth.
You’ll usually begin with a “horizontal prototype” that covers all your main screens (like a home screen and category screens).Your next iteration will dive deeper into user flows for each screen (like updating account information in the settings page, selecting different rewards programs on the home page, etc).
Make sure you test major iterations with at least 5 users.
What to Prototype: 4 Ways to Combine Fidelity & Functionality
Most prototypes fall into four categories, depending on how you combine high- or low-fidelity visuals and functionality. All of these types are useful — but at different times for different needs.
A quick landscape of prototyping fidelities. (Image credit: Fred Beecher, Boxes & Arrows, used with permission.)
As Bill Buxton once said, and Fred Beecher (Director of UX at The Nerdery) illustrates in his excellent article: there’s no such thing as “high” or “low” fidelity — only the right fidelity.
Let’s explore the different combinations he mentioned here so you can select the right fidelity.
1. Low Visual Detail + Low Functionality
These prototypes are usually made from paper, look rough, and require someone to act as a “human computer” to move from screen to screen.
Popular low visual/low functional prototypes include:
- Paper prototypes
- Paper sketches
- Digital static wireframes
The main advantage here, at the cost of both visuals and functionality, is speed. These prototypes are made quickly, and can be thrown away and replaced just as quickly. They’re great for horizontal brainstorming in which you explore a wide range of concepts.
Photo Credit: Fairhead Creative
You can build this type of prototype over and over until some fundamental questions about UX concepts, feature completeness, and high-level page flows are answered. If you’re following the rapid prototyping process, this will be one of the earliest prototypes you produce.
You’ll be able to answer questions such as:
- Did we offer enough features to meet our user’s needs?
- Does the overall content deliver content at the right pace?
Understand, however, that when you test this prototype, you won’t be able to answer questions regarding interactivity such as:
- How well does the design adapt to other devices?
- Do the animations feel smooth, or are they jarring?
- Does the interface provide the appropriate feedback to the user?
- Can users scroll smoothly (either vertically or horizontally) between sections of content?
The beauty of this stage, however, is that you can explore multiple page layouts, page flows, and basic functionalities with very little friction and time.
For example, when redesigning UXPin, our design team spent 4 hours paper prototyping the Preview mode. Even though all of the work had to be recreated in a digital tool, our designers were able to review current usability issues and walk out with new positioning of elements. In that sense, paper prototyping was an excellent exercise in restructuring the layout.
For paper prototypes, grab some paper, scissors, pens, and keep it lightweight and conceptual.
i. Use printer paper and cheap pencils/pens.
The form affects your creative freedom. If you use a Montblac and a Moleskin, you might subconsciously restrict your thinking since you don’t want to draw something “ugly”.
ii. Start by loosening up.
Maybe you need to take a sheet of paper and scribble all over it. Or maybe you need to just start sketching out thoughts and ideas in your head as rapidly as you possibly can. Whatever works for you, start by loosening up. It’ll make your lines more confident, and your sketches stronger.
iii. Prototype mobile-first.
Because of the limited space on a mobile viewport, you’ll be forced to prioritize content. When you prototype mobile-first, you create a 100% experience that you can scale up for other viewports.
iv. One sketch per screen.
No matter how big or small they are, draw a separate sketch for each screen.
v. Iterate as the ideas happen.
Don’t question your ideas as they come – just let them out. You can question them all later. Remember, sometimes great ideas can come from a little detail within a terrible idea. Let them out, nobody’s judging you.
Aside from paper prototyping, you could also create a low visual/low functional wireframe in a digital tool. For prototyping purposes, we recommend selecting a tool that also allows you to add interactions later (otherwise your low visual/low functional wireframe is a dead-end document).
Pro Tip:
In the earliest stages of prototyping, consider creating a “content wireframe”. Instead of diving straight into the boxes and arrows, you’re first carving out space for broad categories of content.
Not only do you focus on the most design element (the content), but the approach is also responsive-friendly.
If you’re using UXPin, you could start mobile-first by creating a 320px breakpoint for your prototype.
From there, simply add box elements sized appropriately for the content. For example, as you can see below, we set the dimensions of 320px wide and 225 px high for the smaller videos (Video 2, Video 3).
Once you can start to see the whole content hierarchy for your design, you can then create a second project for your low visual detail/high functionality prototype.
For your second prototype, you’ll be able to design faster since you’ve already answered your main structural questions in the content wireframe.
