Lesson 12: Build a Paper Prototype

Distribute: Make sure each team has their materials from previous lessons available.

Group: Have the students sit at their team tables.

Prompt: Based on what you and your team know so far:

• Who is the target user for your app?
• What will your app look like?
• How will the user interact with it?

Discuss: Have students share out in their teams. It is important for teams to make sure everyone has the same understanding before beginning the activity.

Goal: This is a check-in point for teams to make sure they all have a shared understanding of the app they are making. It’s okay for teams to be unsure about some of these points - time is given at the start of the activity for teams to discuss and come to agreements.

Today we will create a paper prototype for our app and a basic navigation diagram. As with the prototypes you created earlier in this unit, this will allow for quick exploration and testing of your app. Throughout this unit, we will build different prototypes as a way to quickly test our ideas and get feedback - no one is expecting perfection, especially today.

Question of the Day: How can we build a paper prototype for our app?

Prompt: Display the definition for Prototype. Why is it a good idea to build a prototype before jumping straight into making the final app?

Students may come up with any number of valid reasons, but you'll want to make sure to highlight at least the following:

• It's easier and faster to sketch out an idea
• Testing ideas on paper lets you find problems in your assumptions before you spend time programming
• Users are more likely to give feedback on something that looks less polished / finished

Prompt: Show the What’s For Lunch paper prototype. This is an example of a paper prototype you might create during class today. In what ways does this match the definition of prototype?

Encourage connections to the definition of prototype, especially “first or early model” and “test assumptions before developing a final version”. Students might bring up the following features as evidence:

• The screens are neat enough to read the next and have enough detail to understand what they will do, but are still not very polished.
• Some areas are “placeholders”, such as the scribbled lines for text or a bubble that says “picture”
• You can identify the UI features on each screen (buttons, text, images, etc)
• The flow of the app is clear from the navigation arrows
• Enough of the app is ready so a user could test the app and give comments on how it functions

Distribute: Give each group a copy of the Paper Prototype Planning Activity Guide

Paper Prototype Planning

Display: Read through the directions for the activity as a class. This first page provides a table for teams to list all of the screens they'll need, and the second page is mostly blank for teams to sketch their navigation diagram. Let students know that this is a “first draft” of their screens that should cover all of their planned features, and they may end up changing these screens after testing.

Circulate: Monitor students as they plan their screens and create their navigation diagram. As students finish, you can check their work to make sure they have a solid plan moving forward. When they do, you can distribute the 3x5 index cards to each team as part of the next step.

AppLab Elements: We introduced the App Lab elements yesterday so that students would have an understanding of the tools they'll have available. Students can stray from these elements, but when it comes time to develop their digital prototype, they'll need to either switch to one of the supported elements or use an image as a stand-in.

Distribute: 3x5 index cards (or copies of the prototype template), sticky notes, colored pens and pencils, scissors for each team.

Do This: Using this activity guide as a guideline, sketch out each of your apps screens on a separate index card. Each member of your team can work on a different screen.

Circulate: During this extended work period, teams will need to divide and conquer while still ensuring that they're working towards a common goal. Watch to make sure that teams continue communicating as they develop their screens, and encourage groups to frequently see how their screens are working together.

Initial Testing: As teams finish creating their paper prototype, have them test the app within their team to make sure they understand the navigation and didn’t miss any key navigation elements.

Collect: Gather the paper prototypes so they can be used for testing in the next lesson. Access to these prototypes will be essential for the next few lessons, so consider making a dedicated location in the classroom for teams to store them.

There should be a notecard for each screen described on the activity guide. The notecards should be composed of the AppLab UI elements from yesterday’s activity, and it should be clear from the drawing the type of each element on the screen.