If you’re a designer working on a project and you face a problem that you want to solve, you most likely will spend some time ideating and, after a while, come up with a potential solution. Without any doubt, you’ll then put some effort into building this idea. But what happens if your solution is wrong? A well-executed bad idea is a big waste of time and energy. With so much at stake, it’s critical to reveal a bad idea as early as possible. So, how do you distinguish a good idea from a bad one?

Fortunately, we have a tool that allows us to do that — a prototype. A prototype is an experimental model of an idea that allows you to test it before fully building the solution. In this article, I’ll review the concept of rapid prototyping and provide a few recommendations on how to do it.

Rapid Prototype Definition

The definition of rapid prototyping is an analogy for proof of concept — it’s a process of quickly creating the future state of a product, be it a website or an app, and validating it with a group of users, stakeholders, developers, and other designers. The ‘rapid’ part of rapid prototyping implies this type of prototyping is quicker and cheaper than creating a full-blown version of your idea in code.

The whole concept of rapid prototyping is based on the idea that by setting a direction for a design team and iterating rapidly it’s possible to get to a product that will present the maximum value for people who will use it.

A prototype often starts small by designing a few core parts of a product (e.g. key user flows) and grows in breadth and depth over multiple iterations as required areas are built out. The finalized version of a prototype is handed off for development. The process of rapid prototyping can be presented as a cycle with three stages.

  1. Prototyping. Creating a solution that can be reviewed and tested.
  2. Reviewing. Giving your prototype to users/stakeholders and gathering feedback that helps you understand what’s working well and what’s not.
  3. Refining. Based on feedback, identify areas that need to be refined or clarified. The list of refinements will form a scope of work for your next design iteration.
Prototype process

What is rapid prototyping? Rapid prototyping is an iterative approach to user interface design that includes prototyping, reviewing, and refinement stages. Designers move through each step and, when they reach the end, they return to the beginning (over and over again) until they have the result that satisfies initial expectations.

Why is rapid protoyping important?

There are many advantages of rapid prototyping over other design approaches.

  • Communicate design decisions better. In comparison to a static specification, a prototype is much easier to understand. It’s also much easier to get feedback on design decisions if everyone can see how things might work with their own eyes. This is the best way to ensure everyone shares a common understanding of how the upcoming product should look and behave.
  • Save time by writing less documentation. Developers can use prototypes to understand how things work. Even when engineering needs documentation for specific user flows or interactions, designers will need to write much less description text for a prototype than for a set of wireframes.
  • Allows for experimentation. Rapid prototyping helps teams experiment with multiple approaches and ideas. It facilitates discussion through visuals — presenting information in a visual format is the fastest way to get them to engage with that information. This leads to better, faster design.

Prototyping techniques

To prototype successfully, designers have to revise quickly based on feedback gathered during testing sessions and use an appropriate prototyping approach. Prototypes range from rough sketches on a piece of paper to interactive simulations that look and function like a real product. Depending on the stage of the design process and the goals of the prototype, you need to select the appropriate prototyping technique.

Paper prototyping

We have a lot of digital prototyping tools today that allow you to create prototypes with the least possible amount of effort but sketching on paper still remains the most important tool for any UX designer. Sketching allows designers to quickly explore lots of different design alternatives without investing too much time and energy in each one. It forces designers to concentrate on the essence of a product’s design (what it does), rather than its aesthetics (how it looks). And what’s especially great about sketching is that it opens up design to everyone — anyone can sketch, and no special tools are required. The fact that anyone can participate in the design process makes sketching an ideal tool during brainstorming sessions.

Designer sketch of a mobile app
Image by Steven Scarborough

Many people believe sketching can be used only during the early stages of a design cycle — that’s not true. Sketching can be helpful during development and even post-launch when you need to rethink your design and visualize your ideas. You might even use pen and paper when you already have high-fidelity digital prototype, simply because it’ll be faster to communicate your new ideas through sketches.

Tips

  • Don’t get stuck with the first solution that comes into your head.  In most cases, your first ideas won’t be good enough because, at the early stage of ideation, you won’t have a good understanding of the problem you’re trying to solve. You want to use rapid prototyping to generate as many different designs as possible instead of focusing solely on your first solution.
  • Establish a clear purpose for each prototype. Before starting to sketch, it’s good to have a clear understanding of what pages/layouts you’ll need and why. For example, you can create a series of sketches representing certain screens in a user flow that you want to demonstrate to stakeholders.
Designers paper prototype of a mobile app
Image by Martha Eierdanz
  • Use a stencil when sketching. When you sketch on paper, it can sometimes be hard to imagine how certain UI elements will look like in the real size. Using a stencil will help you to draw elements for the actual size of the device you’re designing for. This is especially great when you need to understand whether UI elements you’ve just drawn are large enough for interaction.
Mobile icons template
Image by Amazon
  • Don’t worry about making your sketch look pretty. When creating sketches, it’s often tempting to spend some time making them look beautiful, but it’s better to avoid that temptation. Don’t focus too much on polishing your sketches, instead focus on getting the essence of the design right.
  • Take photos of your sketches. During the active phase of sketching it’s far too easy to lose some important sketches in a pile of paper on your desk, or even accidentally throw them in the trash can. Take photos of your sketches as soon as possible so that you have a digital copy. Digital copies will help you avoid carrying a paper prototype from meeting to meeting. Instead, you’ll have everything you need on your phone. A digital copy is a good design artifact that you can reuse, make a copy of, or send to other people.
  • Share your sketches with your team. Feedback from colleagues is a perfect way to filter your ideas before showing anything to your stakeholders. Thus, share your sketches with your team and ask for their opinions.
  • Make sketching a team sport. If you’re working in a team, then you should get everyone on the team to sketch out ideas. After each person sketches their ideas, you can then discuss and critique them as a group afterward.

Digital Prototyping

With paper prototyping, explaining complex interactions in words can be tough. When designers need to explain a complex design detail such as an animation to a developer or want to run a user research session to validate a design, they usually use digital interactive prototypes.

Digital prototyping is the process of creating an interactive design that other people can experience themselves. Just a decade ago, in order to build a high-fidelity prototype, you actually had to code the solution using programming language. These days, prototyping tools allow non-technical users to create high-fidelity prototypes that simulate the functionality of a final product in just a few clicks.

Picture is a screengrab. Actual GIF on live webpage
Image by Adobe XD

Digital prototypes are well suited to defining dynamic on-page interactions, such as expanding content and animations.

Tips

  • Know your technical limitations. Avoid prototyping features or functionality that cannot be implemented. When in doubt, ask developers whether or not something is technically feasible before starting any rapid prototyping.
  • Avoid dummy text. Dummy text like lorem ipsum should be avoided in early stages of digital prototyping. Use real content to understand how it affects the overall design.
  • Use digital prototypes as an up-to-date specification for developers.
Screenshot of a gif from a webpage.

Native prototyping

When you prototype natively, you write code and build a prototype to test on real devices. Native prototyping has a goal of understanding how your product works in the real world — it’s often used to validate your ideas with real users.

While native prototypes often look like fully functioning versions of a product, it’s important to remember that a coded prototype isn’t the same thing as a final product. The point of rapid prototyping is to showcase how something will work without building the entire product.

You should have solid development skills if you’re going to build native prototypes. Without good development skills, creating a native prototype might take too long. You should be able to prepare an effective prototype in just a few hours, rather than days or weeks.

Native prototype
Native prototyping is writing code. Image by Apple.

Tips

  • Use real devices and data. Since the goal of native prototyping is to understand how an app will work in real world, you’ll need a realistic experience that you can put in the hands of your users to collect valuable feedback. As much as possible, use real devices and real data to validate your design decisions.
  • Don’t worry if some of the parts of your prototype aren’t functioning. If you use the prototype for user testing, make sure that people who interact with it understand this it is just a prototype, not a final solution.
  • Reuse code. It’s recommended to develop prototypes, when possible, with the intention of reusing code from the prototype in the finished product. While this may add additional costs at the rapid prototyping stage, it should save money over the lifecycle of the product’s development.

Conclusion

Rapid prototyping can put you and your team on the fast track to success. By investing in prototyping early on in the design process, before you get locked into the engineering phase, you’ll save a lot of time and money down the road. When designing your next project keep the following simple rule in mind: the more prototypes you build (and test), the better your solution will be.