Every UX Designer Needs To Learn Prototyping

It’s always better to overexplain than underexplain. Going back and re-doing something you’ve spent days, if not weeks, creating, is decidedly not fun. We all know that communication is the cornerstone of any working relationship — but it’s even more important for a designer handling big projects.

Communicating your vision & ideas in a clear way is the foundation of doing the work correctly.  It means the difference between doing a project in five days vs in ten. An essential tool for a designer communicating with their clients is prototyping, as it cuts down the risk of redoing your work all the time.

Definition of Prototyping for UX Design

There are various definitions of prototyping, but let’s focus on the crucial meaning. Prototyping is simply creating a low-effort, low-fidelity object which reflects what we want to design in the end. Its purpose is three-fold:

1. Test how your design will look and feel like
2. Explore and change things around without spending much time on it
3. Communicate what the final product will look like to everybody interested

For each project, you’ll have to figure out what kind of prototype you’ll need to communicate your design know-how perfectly.

When To Create Your First Prototype

While it seems natural that prototyping should be ubiquitous, there are some tasks that particularly cry out for extensive prototyping first.

1. When you’re designing across multiple devices.

The reality of work as a designer for software products today is that our work will likely be used across multiple devices.

This means that in order for us to make our stuff excellent, we need to take into account not just different screens, but also wildly different modes of input: the users will use touch, remote control, keyboard & mouse — whatever you can imagine users employing to interact with your product.

And it’s not likely that there will be fewer types of input in the future — the opposite, in fact! 

In designing across multiple types of input devices and forms of interaction, the prototype is our best friend. 

Added to that, various prototyping apps allow you to showcase your prototypes on differing devices, which helps you to:

1. Test your design on actual users in the format they’ll likely be using your designs.
2. Provide your clients with a clearer view of the holistic approach to design.

2. When you’re designing a new structure/informational architecture

When designing for a product/website with a huge content load, a simple sitemap diagram might simply not be enough. Besides, a diagram doesn’t allow you to go ahead and test the structural elements you’re developing.

Let’s zoom in for a second, and we’ll see that without a proper prototype with in-built interactive elements (even if perfunctory), it’s very tough to actually test and present how the structure is supposed to work, and what behavior the user is supposed to display.

However, with an interactive prototype, any informational architecture will be considerably easy to test out. 

By providing our users (i.e. experiment subjects) with real buttons and modules to click on, it will give us a much more accurate picture of user behavior. 

Both the clients and the potential users will have a much more visceral, tangible experience with your potential product. 

That benefit of visualization and real exploration makes selling your idea much easier.

3. When you’re designing interactive elements

Any website page and any app have at least a single interactive element, be it a link or a button. But the vast majority of things we design in 2021 will have a lot more interactivity. 

For example, think about a website selling clothes and accessories. Users tend to have varying requirements in narrowing their clothing searches, whether it's by size, color, season, garment type, fabric, brand, and so on.

This means that we’ll need to design filters and create advanced navigation patterns. And trust me, this is not easy. Being able to mess around in the prototype saves a whole lot of time because you’re essentially designing the elements without spending any extra effort.

The Principles of Prototyping

Now that we know when to prototype, it's time to move onto prototyping principles. In order to make your prototype correctly, you need to have a plan first.

Principle #1 — set your goals first. 

Your goals for your prototype should be very specific. For example: “Explore five UI ideas to improve conversions from the initial login step of the checkout process”. 

This goal is specific, measurable, and at the end, you’ll have on your hands a working way to increase the conversions, which is what you’ll be after the entire time. Remember, though, that your goals will change in the process, and that’s okay too! 

Principle #2 — know when to stop.

The entire purpose behind prototyping is to save time and money on designing an entire project. But it’s easy to get carried away, so you’ll have to set some boundaries. You definitely don’t need to recreate the entire app if you’re only designing one module for it. 

On the other hand, when creating a new website architecture/navigation from scratch, you might have to map out every single nook and cranny of that website.

To know when to stop, you need to consider how your prototype will fit into the whole of the object you’re building, and place appropriate placeholder content where needed.

Principle #3 — know what you’ll use your prototype for.

A successful prototype is not the most filled-out, nor is it the one that was the quickest to do. The best prototype is that which fits its purpose perfectly. In other words, consider your audience. If you’re making an early-stage design with your close collaborators, making your prototype detailed is out of the question, as most anything will really do.

In that case, you can prototype using Powerpoint/Keynote, InVision, or Marvel.

On the other hand, when you’re working with a bigger company or your direct clients, you’ll need something that works not only for you but for them as well.

Principle #4 — it’s going to be quick and dirty.

As far as I’m concerned, the most important point of prototyping is to do it. Prototyping is fast, cheap, and aimed, appropriately, at saving time and money.

For a designer, it might be tough to accept that the object you’re designing is going to look subpar, but the reality is that prototype is made to be changed, edited, thrown out.  As you’re prototyping, you should have the mindset that everything can and will be cut if needed. With those principles in mind, what’s left is just to start doing it and never look back.