The Power of Prototyping

“Bring Your Ideas to Life”

This post on design is based on a presentation shared within Wolters Kluwer’s Lunch and Learn sessions called Addicted to Learning (A2L)

I’m David Utt a UX/UI designer with the CIOX team based in New York City with a background in user experience and digital media design. I explore how user-centered design can drive easier-to-use solutions to make complex systems accessible to everyone both digitally and physically.

This post aims to explain the power of prototyping in the product design workflow. In the session, we will understand what is and what isn’t prototyping and why the practice is essential at the start of software development and throughout its entire lifecycle. Lastly, we’ll take you through some of the best prototyping methods you can use in your teams’ workflows, including how to present a prototype to clients and stakeholders for the best possible feedback.

“When we say prototype, that’s anything that gets the idea in your head into an artifact people can experience and offer feedback on.” — IDEO Executive Design Director Chris Nyffeler

Our Definition of a Prototype

An experiment to demonstrate what it may feel like to use a product, feature, or service. It can make an idea tangible and shareable with your audience.

What It Can Do…

• It can share a complex idea fast and inexpensively
• It can assist in capturing and collecting feedback from users or stakeholder
• It should be presentable so others can experience and interact with

Misconceptions about prototyping

Is a prototype an MVP of my product?

• NO - Prototypes and MVP’s serve two very different needs. A prototype is very different from another common “short-win” term in the product design field MVP: Minimal Viable Product. The MPV is used as the first functional instance of the real product. On the other hand, a prototype is an approximation based on a number of assumptions. This can be hard-coded components or placeholder content to represent the end-user experience.

Is Prototyping Expensive?

• NO - It can be very affordable and prototyping saves companies’ money in the long run. Early prototypes are often simplified (and less expensive). Prototypes can be created using accessible materials for anyone to quickly refine and iterate on those solutions.

A prototype must be perfect before moving to the next stage

• NO - Many prototypes are low fidelity or include only partial feature sets

7 Reasons You Should Prototype More

1. Saves Time — The more that can be learned using rapid low-cost solutions means the less time and investment are needed to solve them later
2. Saves Money — Development process more cost-efficient, since dev. cycles becomes shorter with issues tackled ahead of time.
3. Build Common Ground — Prototypes allow stakeholders to have a shared understanding of an experience is vs. what they image it should be.
4. Dive into Edge-Cases — By being able to rapidly iterate with a group of stakeholder’s means edge-cases can be uncovered, understood and delt with.
5. Collect Feedback Quickly — Whether you have customers, clients, or other stakeholders, feedback will be vital for your project’s success. The sooner you can share a prototype means the faster you can get honest feedback. Additionally, people will not be able to tell you what they truly want until they have their hands on it and try it out for themselves.
6. Get Stake Holder Investment — A prototype might be all you need to prove to investors that your company’s opportunity outweighs the potential risk. (ex. Shark tank)
7. More iterations makes a better product — In product development, you want to run through the Build-Measure-Learn loop as many times as you can to build better solutions.

When to prototype in the product lifecycle?

You maybe asking yourself working at your computer, when the heck should I start prototyping or maybe it is too late in the process there is no value now. Well the answer is that there is value prototyping at every phase in the product lifecycle!

Strategy Phase — Assist in stakeholder investment, refine the core product concept with low-cost solutions

Discovery Phase — Build common ground and consensus, more iterations makes a better product

Analysis — Rapidly collect customer feedback

Design Phase — Saves you time, helps you to understand the problems

Production Phase — Save you money when releasing new features and your end-product solution

What kind of prototype should you make

As we have previously laid out prototypes can come in a wide variety of types and forms so as a new prototyper how do you choose which option is best for me? This will be decided based on your testing goals and technical complexity you want to include. You can use the table below to help in your selection. Don’t worry we will go over each option below.

What is Fidelity?

Prototypes don’t necessarily need look like final products nor should they — each can have different fidelity based on what you are testing for. The fidelity of a prototype refers to how your prototype conveys the look-and-feel of the final product. Fidelity is determined across on three areas of your design.

1. Visual design
2. Content
3. Interactivity

Low Fidelity Prototype

Low-fidelity (lo-fi) prototyping is a quick and easy way to translate high-level concepts into tangible and testable artifacts. The first and most important role of lo-fi prototypes is to test the functionality and value you bring to your users.

Early LBA Workbench Dashboard Prototype

Pros — Inexpensive, Fast, Collaborative, Easy to provide feedback

Cons — Uncertainty during testing, Limited interactivity, Content assumptions

High Fidelity Prototype

High-fidelity (hi-fi) prototypes appear and function as similar or close to the actual product that will ship. High-fidelity prototypes are used when teams have a clear understanding of what they are going to build and need to either test it with real users or get approval from stakeholders.

LBA Workbench Hi-Fi Prototype

Pros — Meaningful feedback during usability testing, Testing specific UI elements or interactions, Easy buy-in from clients and stakeholders

Cons — Higher Costs, Higher Production Time, Falling in love with incomplete products, Too Real to Critique

Feasibility Prototypes

Used to address technical risks during product discovery before we decide whether something is feasible or not. When trying a new technology, algorithm or extraction process feasibility prototypes test the limitations of the technology of the technology and not the value of the concept.

The idea is for the developer to write just enough code to be able to answer the feasibility question and nothing more.

Live Data Prototypes

These are used to prove your product/service/workflow really works by using data interacting with a visual. This means accessing real data sources and sending live traffic back interacting with the prototype.

These are limited by the use-case and limited deployment

Azure cognitive search Live Data Prototype

Pros — Working environment of both visual and content, Highly realistic and intractable

Cons — Selective use-cases, Increased production time w/ both design and development requirements

How to Get Started with Prototyping

Understand the goal of the prototype

What is it you are trying to do? Are you looking to answer a specific question or explore a larger topic area? Will it be used for user testing with your audience or just internally with your team

Decide on a medium and scope that serves the goal

Can a paper and pencil work or do you need to demonstrate interactions in a digital format?

Keep it fast, keep it simple, keep it going

Many smaller or simple prototypes will generally be better than a larger single one. If it is a complex problem, try to break it down into its individual challenges and take them on as their own prototypes.

Activities to get your started

Story Boarding

1. Draw 5 Boxes on a a whiteboard or poster in a grid format
2. Identify four or five key moments that will help illustrate the solution
3. Map out the flow you’ll use in the user-interview script
4. Draw out what those 4–5 moments will look like (1 per box) in the context of your user

Crazy 8’s

1. Each team member folds their piece of paper and fold it into eight sections
2. Set the timer for eight minutes
3. Individually, each team member sketches one idea in each rectangle, trying their best until all sections are filled
4. When the timer goes off, all pens are down

Digital Wire-Framing

1. Open your preferred Online tool (ex. Miro Balsamiq, Figma
2. Set a timer for 30 minutes
3. Write down the most important steps on your applications or website’s flow
4. Using boxes and text only draw out the individual frames of the application