Prototyping & usability testing

Prototypes

Colton Schweitzer
October 14, 2020

A prototype is an early sample, model, or release of a product built to test a concept. This is the perfect definition. 

First off, prototypes are built early in the process. That way, not much time and money has been invested in the project if you discover what you designed doesn’t work. 

Second and most importantly, a prototype is a sample created to test a concept. It’s not the full product with everything figured out. 

Prototypes are all about getting your ideas out as early as possible in a manner that will allow you to learn and iterate on them. They’re created to put it in front of people and see if the idea has any value.

There should be a specific reason to make a prototype. Don’t do it just to check an imaginary box saying you built one.

They can be anywhere on the spectrum between low to high fidelity. Because there aren’t any detailed interactions, low-fidelity prototypes are typically used to help validate navigation and the journey a user would take when using the product.  

High-fidelity prototypes are more detailed, have a more involved experience, and feel much more like the final product. High-fidelity prototypes focus on the exact interactions of the product. They typically include things like animations, visuals, or conditional logic, where based on your actions with the prototype, you’ll get a different result. 

You can sum up what a prototype is with these three statements: A prototype is...

... anywhere on the spectrum of fidelity.

... cheaper to build than the final product as software/product development is expensive.

... made to test the usability of the product and validate concepts.

There are a three basic categories of prototyping for digital products in UX:

First, there’s HTML/coded prototypes. These are prototypes that have been created to model the final product using real code. These can be useful because depending on how you build them, they can actually help lessen the development time of the product. Also, depending on how you build them, they can be fairly low cost to create. The only cost is time.

That said, they can take a long time to create. Also, if any glaring issues come up from user testing, it’s much harder to make any changes to the design in code. 

Coded prototypes require a high skill level because you need to have coding and development knowledge. We have only known a few UX designers who can actually do this. They’re typically referred to as unicorns. 

Second, are paper prototypes.

These are the sketched versions of the website, feature, or product that are strung together either by a software program or by you during a usability test. The purpose of these is to validate a concept early on to get feedback before you start creating the designs on your computer. 

Paper prototypes are valuable because they get your ideas out of your head and into a semi functional form that you can get feedback on super quickly. This is fantastic because you don’t have to spend loads of time creating a masterpiece before hearing that something about it doesn’t work from a user perspective. 

You only need two things to create paper prototypes: pen and paper. That’s it! 

Finally, there are digital prototypes.  

Digital prototypes have both the interactions and appearance of the intended design. They’re created using software that links together wireframes or mockups.

They don’t have to be high fidelity to be useful. Wireframe prototypes can be just as helpful for gathering feedback as high-fidelity prototypes. That said, sometimes you need to prototype highly detailed interactions to make sure that everything works together and makes sense to the user. It all depends on the goals that you have for building the prototype. 

Back to vault

304

Back to vault

304

What is UX?

2
Getting started

Why is UX important?

3
Getting started

What is the UX process?

4
Getting started

What is design thinking?

5
Getting started

What do UX designers do?

6
Getting started

UX vs UI

7
Getting started

Do UX designers need to know how to code?

8
Getting started

Recommended UX books

9
Getting started

UX university programs: Pros & cons

12
Getting started

UX bootcamps: Pros & cons

13
Getting started

6 brutal truths aspiring UX designers don't want to hear

14
Getting started

Difference Between Graphic Designer vs UX Designer vs UI Designer

15
Getting started

Intro to research & understanding

101
Research & understanding

Finding a problem to solve

102
Research & understanding

SWOT analysis

103
Research & understanding

Competitive analysis

104
Research & understanding

Heuristic evaluation (usability evaluation)

105
Research & understanding

Task analysis

106
Research & understanding

Stakeholder interview

107
Research & understanding

Framing the problem

108
Research & understanding

Research plan

109
Research & understanding

Survey

110
Research & understanding

User interview

111
Research & understanding

Card sorting

112
Research & understanding

Customer journey map

113
Research & understanding

Empathy map

114
Research & understanding

Affinity diagram

115
Research & understanding

Personas

116
Research & understanding

Contextual inquiry

117
Research & understanding

Diary study

120
Research & understanding

Eye tracking

121
Research & understanding

Intro to IA

201
IA & wireframing

Layout + CRAP

203
IA & wireframing

Site map

204
IA & wireframing

Scenarios

205
IA & wireframing

Storyboards

206
IA & wireframing

Low vs high-fidelity

207
IA & wireframing

Sketching

208
IA & wireframing

Wireframes

209
IA & wireframing

User flows

210
IA & wireframing

Intro to usability testing

301
Prototyping & usability testing

Usability testing plan

302
Prototyping & usability testing

Prototypes

304
Prototyping & usability testing

Research report

305
Prototyping & usability testing

Typography basics

401
Visual design & handoff

Color basics

402
Visual design & handoff

Color accessibility

403
Visual design & handoff

Pixels vs points

404
Visual design & handoff

Layout + 8pt grid system

405
Visual design & handoff

Design system

406
Visual design & handoff

UX writing

408
Visual design & handoff

"Final" usability test

409
Visual design & handoff

UX portfolio basics

501
UX portfolio

Your portfolio is just another UX project

502
UX portfolio

Choosing a site builder for your UX portfolio

503
UX portfolio

UX portfolio inspiration

504
UX portfolio

5 tips for junior UXers asking for portfolio feedback

505
UX portfolio