Dear reader, I've written this article while working as a UX-designer at Lab Digital. This article represents my own opinions but is published on our company blog as well. Hope'll you enjoy it 🙂

At Lab Digital, we use prototypes for various purposes. Being it to communicate specs in our development-phase, or wow a client during a pitch. The thing they have in common is that they always span the gap between creation and realisation.

As digital creators, we grew accustomed with MVP-thinking (Minimum Viable Product). Features that will not make it to the first acceptable version of a product, are not included in the MVP. The same thought-process can work for prototypes. Hence, I’ll introduce and define a Minimum Viable Prototype.

In this article I would like to point out the changing shapes of our prototypes during every phase of the design process. Also the difference in focus points and characteristics for prototypes. These parameters have to be different in every phase. It will make gathering feedback easier, and helps managing expectations.

Leaving holes for your imagination

Luckily, (UX) designers are questioning the fidelity of their own deliverables. Wireframes and prototypes included. Supporting the idea that prototypes should confirm assumptions, rather than mimic final products.

But our search for the perfect prototype is endless, and two-sided.

  1. We want to be as thorough as possible,
  2. Contrary, we don’t want reviews to derail into a talk about styling.

In other words, we need to define what problems a prototype needs to solve.

Bill Buxton describes the place of a prototype (or sketch) in a design process. Guess what, it’s everywhere! It’s used to fail fast, and fail often.

If you want to get the most out of a sketch, you need to leave big enough holes for the imagination to fit in.

— Bill Buxton, Sketching User Experiences

Goal-based prototyping

As mentioned earlier, prototypes have different goals and meanings to creatives at Lab Digital. They can take on different forms, depending on the phase of the process we’re in. Throughout these steps, we diverge and define.

Discover

  • We challenge all stakeholders to come up with as much creative ideas as possible.

Define

  • Here we’re making big decisions, narrowing the amount of sketches and prototypes.

Develop

  • UX- and visual design deliverables begin to take shape. Prototypes are begininning to look a lot like the end-result.

Deliver

  • Our team creates deliverables that are high of quality. They provide clients, creatives and developers with the details they need.

Can it be done quickly, and good as well?

It takes time to make a well thought-out prototype. Time is always of the essence. Especially during the design process where the most budget cuts take place.

But somewhere along the way we stopped respecting the characteristics of a rapid prototype in order to sell our designs in an earlier stage. In order to understand a prototype, you have to use some imagination. A gap between a wireframe and a fully interactive prototype. That’s one thing some of us find hard to cross.

At Lab Digital we like to involve all stakeholders as early in the process as possible. Keeping lines short and deliverables accessible, avoiding situations such as these…

Our designer can draw up a quick sketch for you. You’ll have it by the end of the day.

Thus trading in the amount of options, with higher levels of fidelity. Resulting in less options, but sleeker designs in an early stage.

Still, it has become fairly easy to create a good looking prototype, using design tools and free resources. Stakeholders see a rather clean version of their idea. Initially to explore the design space, rather than refining specific problems. The actual demo looks an awful lot like the final product.

Turning the knobs of fidelity!

If we look at the dictionary, we’ll get the following definition:

Fidelity: accuracy in details: Exactness.

We all know low-fi and high-fi prototypes, but we rarely get to talk about what makes it high or low, or what characteristics they embody.

In reaction to this, McCurdy et al. (2006) defined five points of fidelity. As a result, proposing mixed-fidelity prototypes, using a mix of the following levels:

  1. Breadth: the amount of paths and functionalities.
  2. Visual: higher level of details and styling.
  3. Interaction: the liveliness of the prototype. Animation as a key ingredient.
  4. Depth: level of detail of processes on a page.
  5. Data: possibilities to gather data (clicks, user flows and analytics).

This gives us some knobs to turn, and helps us to manage expectations. Above all, it creates boundaries and expectations.

In comes the MVP: Minimum Viable Prototype

A mixed-fidelity prototype can solve the endless debate. Discussions unleashed during reviews on looks over interactivity, data-collection over styling.

I’d like to point out the importance to define focus-points for a prototype, choosing from two or more of the five points suggested earlier.

1. Discovery

During discovery, a prototype gets extra attention in terms of:

  • Breadth
  • Data

During the discovery phase we need a prototype to be as flexible as possible. It must be easy for stakeholders to explore the demo and provide their input in the form of comments and suggestions.

Prototyping during discovery: used to show breadth and gather data.

2. Definition

During definition, a prototype gets extra attention in terms of:

  • Breadth
  • Depth

We define the scope of a project, the prototype provides a good view on the scope of the project. It gives us a good amount of pages and what is part of the MVP, or not.

Prototyping during definition: used to show breadth and depth (scope).

3. Development

During development, a prototype gets extra attention in terms of:

  • Interaction
  • Depth

Prototypes must be accessible to development. Bridging the gap between UX, design and development. Modular and flexible enough, to be taken apart by developers. It shows a range of pages, and its place in the bigger picture.

Prototyping during development: used to show interaction and depth.

4. Delivery

During delivery, a prototype gets extra attention in terms of:

  • Visual
  • Breadth
  • Interaction

It’s critical that a stakeholder gets a good understanding of the total spectrum of the solution. This is the time the prototype needs to look and feel good. Designers should embrace motion as their biggest friend.

Prototyping during delivery: used to show visual, breadth and interaction.

Why care for levels of fidelity?

That’s nice and all. But why would you consider the characteristics of your prototype?

  1. Focus: single-issue prototypes, prevent meetings from derailing. They also enable collaborative client relationships in an agile process.
  2. Conversation: client and stakeholder involvement increases, when prototypes are approachable. Think of leaving notes, or suggesting other solutions.
  3. Range: smaller prototypes that are low on fidelity, have less distractions. Making it easier for the whole organisation to understand.
  4. Tooling: designers like to show off their design skills, mastering a range of tools. It’s less limiting when tools are accessible.
  5. Ego: designers love their prototypes. While showing a fancy prototype is great for your Dribbblelikes, it will not raise your feedback quality. Sharing is caring, it eases the ego.
  6. Money: apart from selling squeaky-clean designs, we’re selling hours. Our time is precious, and having all the above-stated on point, will lower costs greatly.

In conclusion: stay flexible, stay low-fi

What’s the goal of your next prototype?

Prototypes have different goals and meaning to us at Lab Digital. They offer focus on getting the design right as well as the right design. They serve a specific goal in every phase of the process.

In short, prototypes have to be:

  • Used to span the gap between creation and realisation,
  • Flexible and shareable at their core,
  • Low on fidelity where they can,
  • High on fidelity where they should,
  • Presented as an ongoing product up for discussion.

It’s our job as (UX) designers to keep the fidelity and characteristics in sync with the requirements of every design phase. It will help managing expectations. Resulting in happier stakeholders 😙