I’m going to come right out and say it: prototyping is the most powerful tool in your UI/UX tool belt.
Let me clarify. I still think of prototyping as one of the many ways to extract valuable information and iterate on a design–like user research or card sorting–but I now put prototyping at the top of that list. The sooner I can get a prototype in front of users and stakeholders, the better.
“If a picture is worth 1,000 words, a prototype is worth 1,000 meetings.“
David Kelley of IDEO
But there’s no budget (or time)!
Unfortunately when we’re talking UX, especially on smaller projects, the biggest constraint is often budget. I can understand why, but in my experience this is a shortcut that often leads to user interface reworks later on because the initial user problem wasn’t properly understood. Prototyping is not only beneficial to the user experience, but by jumpstarting the feedback loop, getting concepts in front of users, and uncovering issues early–it’s often the best business decision too.
The reason is that once you start writing code you’re much more locked in to any decisions you’re making, and it requires much more effort to make changes based on user feedback, evolving priorities, or any number of other reasons. In my experience, we NEVER get everything right the first time, resulting in spent time and money to rebuild a given feature, or worse, scrapping the entire thing.
Prototyping 101
There’s a range of ways to prototype an idea, from a quick paper brainstorm to fully interactive digital and coded prototypes. Below I try to illustrate when it’s best to use each, and how to get started.
Paper Prototypes:
Time Investment: 5min. – 1 hour / Value: Low – Medium
These are best in the very early stages for testing ideas. You can make a quick prototype in 5 minutes to walk through and test ideas with your team. Paper prototypes can help flesh out early problems and get everyone on the same page, however I find many of the same insights can be gained through a whiteboard session.
To get started first lay out exactly you’re going to prototype so as to keep the brainstorm focused, and then just grab some post-it notes and a couple team members!
Interactive Digital Prototypes:
Time Investment: 1/2 day – 7+ days / Value: Medium – High
This form of prototyping has quickly become the most common in the UI/UX community and has become my go-to for the vast majority of work I do because they require minimal time but can still provide the same insights as a fully coded website.
To get started you’ll want some form of UI design software, such as Sketch, Figma, or Adobe Photoshop. The goal is to create a handful of static screens, which are then loaded into a tool such as Invision or Marvel, allowing you to set clickable “hot spots” that navigate to your other screens or provide specific interactions. (See also: Building an Interactive Prototype in Sketch in Minutes)
If you’ve never used this software before there will be a small learning curve, but it’s very simple and certainly requires less time commitment that building out the same interactivity in HTML and CSS.
For those teams with very little time or budget, you can commit as little as 1/2 a day to prototyping a new app or feature, and spend the 2nd part of that day testing out your ideas with potential users and stakeholders. That said, with any interactive prototype its ideal to commit at least few days in order to take the first round of feedback and iterate on your designs.
In addition to a small learning curve, the other downside to the digital prototype is that the prototype ultimately will get scrapped for actual code, so at a certain point it becomes counter-productive to build every piece of functionality.
Coded Prototypes
Time Investment: 3 days – Multiple weeks / Value: Medium – High
The most common type of coded prototypes are built using HTML & CSS, but there’s other options as well for those more technically savvy. While HTML prototypes have numerous advantages, they come with technical cost, and I find they are only useful in specific situations.
The biggest benefits of coded prototypes are:
- They can provide baseline code and stylesheets from the start
- They are the most realistic, and able to be run anywhere
- No extra software needed to write HTML/CSS and test in browser
The biggest drawbacks are:
- Time investment is much higher than the digital and paper
- Not every designer can write code, and not every developer who can code can design
- Creativity can be inhibited while dealing with constraints of code
Prototyping lets you solve user problems and interface challenges faster by decreasing the amount of time it takes to get something tangible in front of a user. The method you use is mostly up to personal preference and available time–the important part is that your prototype process gives you a way to refine a design based on user feedback. Experiment, practice, and you’ll soon find a sweet spot for prototyping on your next project.