How Using Rapid Prototyping Tests Product Efficiency & Usability

It was a strange sight: a 40-year-old man taking a block of wood out of his shirt pocket, then pretending to scribble something on it with a stick. He stopped, then tap, tap, scribble again. After that he put it back into his shirt pocket.

The man is Jeff Hawkins, the inventor of the PalmPilot, the first handheld device that put computers into our pockets.

Hawkins had launched a similar venture a few years earlier, an amazing handheld computer called GRiDPaD. This was before we had LED monitors, when laptops weighed more than 10 pounds, so it was an impressive piece of hardware — but it was a flop because it wasn’t small enough for people to carry around. This is why he decided to simulate the experience of carrying around the device by cutting a block of wood representative of its size, sticking a piece of paper on it to simulate the interface, and carrying it around for months. Every time he needed to make an appointment, he’d take it out and pretend to check his calendar on the “device” and add the appointment to it.

This story illustrates prototyping — a quick and cheap way to simulate a product experience in order to reduce risks — very well. In the Palm Pilot example, the biggest risk was that the device might be too big to carry around. This type of prototype looks very crude because the focus is on realistic scenarios.

Prototypes can be really close to the final product with all of the features that will be included when the product is launched. But designers often start out by making a rapid prototype, the quickest and easiest way to prototype, in which the designer tries to mimic the experience without actually building or creating anything.

In software development and product design, rapid prototyping refers to techniques used to simulate the experience of using the software. In most cases, these techniques involve no coding in order to optimize speed and minimize cost. The goal is still to reduce risks — in this case, having to do with the product’s efficiency and effectiveness.

Effectiveness and efficiency are essential in user experience (UX) design. Effectiveness means the product’s user is able to get the value they come to the product for. If you’re an Airbnb user, you want to be able to book a place to stay while traveling. How do you do this? You would visit Airbnb’s website or open its mobile app. Can you accomplish this task (booking a room) using the website or app? If you can, then it’s effective — it’s giving you the result you desire.

Now, just because a product is effective doesn’t mean it’s efficient. Efficiency means you can complete the task with very little effort. If booking a room on Airbnb’s website takes you over an hour or too many steps, you probably wouldn’t use it often.

To determine whether a product is effective and efficient, we need to test it. And if the product is not built yet, we create a prototype and test it with real users.

The UX design process is based on design thinking framework, a problem-solving approach used by designers that’s centered around the target audience for which they design. It starts with understanding who they’re designing for (called a persona) and the problem the persona has before coming up with solution ideas. This way, the solution directly addresses an actual problem the target audience is experiencing.

The design thinking framework looks like this:

1. Empathize: Understand who your users are and the pain point(s) they experience.

2. Define (the problem): Using the problem as a starting point, generate ideas for potential solutions.

3. Ideation: Generate ideas and choose the one or two most promising.

4. Prototype: Create prototypes of the best idea or two.

5. Test: Test the prototypes, and use the learnings to improve the solution. After testing, you’ll return to the appropriate step. For example, if the idea is not effective, you’d go back to ideating more or simply choosing another idea to prototype, then test again.

UX designers go through this iteration loop multiple times until they find an effective and efficient solution.

The focus of prototyping is to get as much learning as possible with the least amount of effort. This means we only put into the prototype what we need to test, based on what we want to learn about our product idea. In Lean Startup, a methodology to build businesses and products, this concept is called building the minimum viable product, or MVP. The focus here is the viability of the product idea — is it going to work?

When creating prototypes for digital products, like apps and websites, there are many tools available. These tools allow designers to create prototypes, regardless of whether they know how to code. Some of the platforms commonly used by professional product and UX designers include InVision, Marvel, Flinto, UX Pin, proto.io, and Axure.

Creating a prototype with these tools is very easy. Here are the steps:

1. Use a UI design application like Sketch or Adobe Photoshop to upload screen mockups (typically in the PNG file format).

2. Add hotspots — areas with which users can interact — to a screen and define what should happen when the user interacts with it (e.g., take the user to another screen, transition between pages, etc.).

3. Preview the prototype to make sure it’s doing what you want it to do.

4. Repeat steps 2 and 3 for each screen.

Once you’ve connected all the screens, you can then use this prototype to test your design in usability test sessions. You’d show the users your prototype, then ask them to complete the specific task for which you’re designing the prototype. This would allow you to discover, then address issues that block them from completing the task.

At General Assembly, students in our full-time User Experience Design Immersive and part-time User Experience Design course (on campus and online) learn hands-on how to create a rapid prototype by using Sketch to create the screens, then InVision to connect those screens and make them interactive. This portion of the course happens right before the students learn how to conduct usability testing to make sure their design work well.

In order to determine what to prototype, students create user flows, wireframes, and information architecture before they create the screens in Sketch. By the end of the course, students have both the theory and hands-on experience of applying the design process.

Students in GA’s part-time Product Management course also learn to create rapid prototypes; after drawing drafts of their wireframes on paper, students turn to platforms like Sketch, InVision, and more to digitize their designs and create interactive prototypes.

Danny Setiawan is a UX professional with 15-plus years of experience. He is currently the managing director of CoCreate, a UX consulting firm, and a product mentor at Starta Accelerator. Danny has worked with brands like Yahoo! Finance, The Economist, PwC, MSN, Kimberly-Clark, and Microsoft. Danny teaches the part-time User Experience Design course at General Assembly’s New York campus.