Paper Prototyping

LEARNING OBJECTIVES

After this lesson, you will be able to:

• Explain what prototyping is and why it is important to the UX process.
• Identify different prototyping methods.
• Apply what you have learnt by creating a paper prototype

STUDENT PRE-WORK

Before this lesson, you should already be able to:

• Watch the IDEO video: www.youtube.com/watch?v=M66ZU2PCIcM
• Watch the Nordstrom video: www.youtube.com/watch?v=szr0ezLyQHY

Opening (5 mins)

Let's discuss: How do you know if your app design or process is working?

Instructor Note: Have an open conversation with students about the ways they would go about determining if their app design or process is working. Ask them to think about individual pieces and not just the entire system. This may also be a good opportunity to bring up the term "MVP".

Introduction: What is a Prototype? (15 mins)

A prototype is an early sample, model or release of a product built to test a concept or process or to act as a thing to be replicated or learned from. It is important to test early and as often as possible.

Check: Take 30 seconds and discuss with person next to you the difference between the term "production" and "prototype". Share out!

Instructor Note: Correct any misconceptions.

So why do we prototype? Well, we use prototypes primarily as a way to refine and explore a concept. We can also use prototypes to communicate with our team and additional stakeholders.

Check: Take a few minutes to have students discuss "design debt" and what that means to them. When you bring the group back together, emphasize the point that we should test as early and as often as possible.

Let's review some prototyping methods and tools...

Instructor Note: Explain and provide examples of the various prototyping types/methods you have used. Then, explain and provide examples of the various prototyping tools/methods

Guided Practice: Discuss Prototyping (15 mins)

Imagine this prompt: You are designing an app that helps people find the nearest subway station or bus stop.

• What questions do you have as the designer?
• What do you want to test?
• Based on the methods we just discussed, What prototyping methods will you choose? Why?

Work with the person next to you to discuss these questions.

Check: After 5 minutes of discussing, have students share out.

Introduction: Why Paper Prototyping? (10 mins)

Paper is flexible cheap and quick, key aspects to ensure testing happens as frequently and as early as possible. Here's some great context from a StackOverflow post:

_- It's faster. Significantly faster than any other prototyping tool for many situations.

• It encourages different kinds of feedback. People respond differently to sketches on paper than they do to things on a computer - even rough looking things on a computer. One is very obviously temporary. People seem to be more open to different kinds of feedback.
• It's adaptive. I can change what a paper prototype does in the middle of an interaction. Somebody clicks on the photo rather than the edit button next to the photo I can go "gosh - they think that will let then edit" and just throw up the edit page. A new interaction model comes to mind during a session - and you can sketch something out and try it live._

Let's practice creating paper prototypes.

Instructor Note: Using a prompt of your choosing, walk students through the process of creating a simple lofi paper prototype. Explain to students that the key to paper prototyping is to think and create modularly. Take a few moments to speak to the pros and cons to this modular style paper prototype.

Independent Practice: Jump In (30 mins)

Let's practice prototyping using an activity taken from Stanford:

Your goal is to design the interface of an Android app that controls the climate in your house or apartment.

Assume you are able to get the data about your house/apt layout into this app.

The interface should be able to:

• Set the desired temperature and air flow for a room or for the whole house/apt
• See what the temperature and setting is for a room in the house/apt
• Schedule temperature changes according to a fixed plan (day and night, weekends,…)
• See energy use information in a way that helps determine the best settings

Spend 5 minutes on each of the following steps:

• Sketch the different screens of your app (feel free to use cards, Post-Its, tape, etc., and design a “working” paper prototype)
• Test this prototype on a member of another group, making notes on the problems and potential design changes.
• Revise the aspects of the interface that are most in need of change.
• Test again!

Conclusion (15 mins)

Instructor Note: Discuss the following bullets as a class.

• Let's reflect and note what you learned about your techniques and specific design from the previous activity.
• Were your designs realistic?
• Could you test the actual interactivity?
• Were your “users” satisfied?

Instructor Note: Be sure to come back to emphasize the importance of paper prototyping.