Prototype

The word prototype comes up in many different industries, each time with the same meaning. The screen design industry is no different, minus the tools that are used.

What is a prototype?

Prototypes are interactive mockups of websites and mobile applications designed to look and feel like the real thing. They’re much quicker to make, and although they aren’t full-featured, they allow us to spot mistakes before we build the real thing.

Prototypes are built using screen design tools, most of which come with collaboration features to help stakeholders assist with feedback. Some also come with ideation tools to help flesh out the initial wireframe, while others have hand-off tools that help designers hand over the final mockup to developers.

That’s right, prototyping is a process. Let’s dive into a little more detail.

The importance of prototyping

There are approximately seven billion humans on this earth; designing an optimal experience right off the bat for even a small fraction of them would be quite an achievement. So whenever we design something, it’s important to understand that the earlier iterations won’t be very good. Design is rarely an overnight success, which is why we need prototyping.

Where failure is inevitable, prototyping allows us to fail faster. When combined with an effective feedback and collaboration workflow, it provides the additional eyes that help identify flaws and turn them into improvement opportunities.

Without prototyping, we spend a lot of time, money, and resources to build a product that users won’t or can’t use. Assuming we didn’t burn through our budget, we’d be back to the drawing board.

Prototyping is a preventative workflow that reminds us that ideas are disposable. It saves us a ton of time in long run, and helps us fix issues before they become too expensive. We shouldn’t think of prototyping as a waste of time, but rather a method of identifying and discarding the ideas that simply aren’t going to work.

The different forms of prototypes and when to use them

Prototyping happens in stages. With so many factors contributing to effective user experience, we could never hope to design them all at once. These are the stages:

Low-fidelity prototypes

Low-fidelity prototypes typically resemble wireframes, and focus more on user needs, navigation, and information architecture. They answers the question, What does the user need and how will we divide it all up onto screens in a way that’s easy to understand?

This important step arranges various functions and information so that they make the most sense. Failure to get this right before moving onto mid-fidelity prototypes can result in wasting time applying visuals and UI design to a wireframe that fundamentally doesn’t work. It’s normal to ideate and iterate literally hundreds of times before your wireframe feels just right.

Because of how disposable the iterations are, it’s somewhat normal to use sketching as a method of prototyping at this stage.

And of course, it’s totally fine—and even recommended—to introduce user testing this early on. As they say, test little and often for best results.

Mid-fidelity prototypes

Mid-fidelity prototypes are usually still wireframes. However, with foundations somewhat validated, we should use them to start mocking up what the actual user interface might look like. This means switching to a screen design tool.

With the functional requirements of a screen in mind, our next task is to decide how best to help the user accomplish their objective. Everything we know about design principles, usability, and accessibility is put into practice as we begin to mockup the interface.

Colors, fonts, and other visual styles are left out of the equation for now.

High-fidelity prototypes

High-fidelity prototypes tend to be the most appealing to designers due to the inclusion of visual design, sometimes known as the “surface” layer. With the user interface mostly figured out, the surface layer becomes the next major concern.

Prototyping with high fidelity means having to manage more visual elements and components into what’s called a design system. It’s very likely that we’ll want to start forming our design system around the mi-fi prototyping stage, so it’s quite normal to enter the high-fidelity prototyping stage with at least a few reusable components.

There are two main advantages to creating a design system:

• It helps maintain consistency, visually and conceptually.
• It helps other designers explore concepts using existing elements.

The prototyping process

We’ve mentioned the various stages of prototyping, as well as feedback and user testing. But where do feedback and user testing actually fit into the prototyping process?

Let’s take a look.

Internal testing

Whether we’ve designed a low-, mid-, or high-fidelity prototype, each one starts with the initial concept. This is the iteration that most likely has the most flaws, which actually makes it somewhat difficult for real users to test. Before anything, it’s recommended to run through a low-key feedback session with other designers.

This will eliminate any obvious design flaws and desaturate the more valuable feedback that we’ll derive from real users later on. Before moving forward, we should address the feedback that’s been offered by designers.

Stakeholder testing

This step is often the most uncomfortable. After restricting feedback to designers, it’s term to cast a wider net and start involving other stakeholders, which can include the client and/or non-designers. On one hand, non-designers can weigh in on the solution that we’ve delivered from a different perspective; on the other hand, they may suggest ideas that to a designer might seem …nonsensical.

This actually offers a basis for some low-key A/B testing, where we create two versions and see which version users respond to better. As mentioned, since prototyping is very quick and inexpensive, it doesn’t take a lot of time or resources to create several iterations, test them, and discard the failed ones.

User and usability testing

Wait, user and usability testing? What’s the difference?

The aim of user testing is to see whether or not the design solves the user’s problem; it works best around the low-fidelity prototyping stage. Usability testing, on the other hand, works best around the mid- and high-fidelity prototyping stages, where the aim is to measure the effectiveness of the design in terms of usability and UX.

Each stage (low-, mid-, and high-fidelity) is accompanied by these two rounds of feedback, then user testing in the low-fidelity stage, and either user or usability testing in the mid- and high-fidelity stages.

Create a smooth, efficient prototyping process

Prototyping is not an easy task. Different stages require different tools, and raise different concerns, whether that’s user needs, navigation, information architecture, usability, accessibility, UI, or visual design. Attempting to make all of these considerations at once and diving straight into high-fidelity prototyping is commonly known to be bad practice. A range of tools is recommended to tackle each consideration in a logical sequence, and collect feedback at regular intervals.

InVision delivers an entire suite of tools in a single subscription: Freehand for wireframing and real-time collaboration; Studio for screen design and interactive prototyping; and Inspect for design handoff and collaboration with developers.

Each comes with a unique approach to collaboration that’s specifically suited for the task at hand, with Freehand allowing stakeholders to sketch and annotate in realtime, and Studio allowing for comment-feedback that can be converted into actionable tasks.