Lesson 12: Build a Paper Prototype
Overview
Question of the Day: How can we build a paper prototype for our app?
Students work in their teams to create paper prototypes for the apps they’ve been developing. They begin by making a plan for each screen, then assigning different team members to work on each screen so the task can be completed in time. They can use 3x5 index cards to develop their paper prototypes, or the Paper Prototype template.
Purpose
This lesson kicks off the actual design phase of this project. Students last created paper prototypes in Lesson 7, but at that point very few constraints were placed on the prototype user interface. Because these prototypes will eventually be converted into App Lab apps, it's important to better scope the types of apps teams design and the interface elements they use. Teams will use their paper prototypes tomorrow to test their apps and get feedback.
Assessment Opportunities
-
Explain the role of paper prototypes in app development.
Activity discussion: Students should identify several key ways that paper prototypes contribute to app development, and these reasons should highlight the advantages over both a full product and digital prototypes.
-
Create a paper prototype that incorporates the user flow for a computational artifact.
Students' prototypes are collected at the end of the lesson, but there are also opportunities in the second activity to circulate, assess, and give feedback to students as they work. Each notecard should be drawn with enough detail to identify the functionality of each element on the screen.
Agenda
Warm Up (5 mins)
Activity (35 mins)
Wrap Up (5 mins)
View on Code Studio
Objectives
Students will be able to:
- Explain the role of paper prototypes in app development.
- Create a paper prototype that incorporates the user flow for a computational artifact.
Preparation
- Prepare 3x5 index cards (or copies of the prototype template), sticky notes, colored pens and pencils, scissors for each team
- Print a copy of the activity guide for each team
Links
Heads Up! Please make a copy of any documents you plan to share with students.
For the Teachers
- Unit 4 The Design Process - Slides
- Paper Prototype Planning - Exemplar
For the Students
- Paper Prototype Planning - Activity Guide
- Phone Paper Prototype - Template
Vocabulary
- Prototype - A first or early model of a product that allows you to test assumptions before developing a final version.
Teaching Guide
Warm Up (5 mins)
Discussion Goal
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.
Getting Prepared
Distribute: Make sure each team has their materials from previous lessons available.
Group: Have the students sit at their team tables.
Journal
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.
Remarks
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?
Activity (35 mins)
Review Paper Prototypes
Assessment Opportunity
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
Discussion Goal
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
Prompt: Display the definition for Prototype. Why is it a good idea to build a prototype before jumping straight into making the final app?
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?
Distribute: Give each group a copy of the Paper Prototype Planning Activity Guide
Paper Prototype Planning
Teaching Tip
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.
Display: Read through the directions on both pages of the activity guide 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. These two pages can be completed in any order, and teams may find it easier to go back and forth between sketching the diagrams and writing the descriptions
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.
Paper Prototyping
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.
Wrap Up (5 mins)
Collect Prototypes
Assessment Opportunity
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.
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.
- Lesson Overview
- Teacher Overview
- Student Overview
- Prototype Brainstorming - Exemplar (PDF | DOCX)
- Example App Types
- Teacher Overview
- Student Overview
In this activity students will be introduced to a small number of relatively constrained apps:
- Quiz Me
- Decision Maker
- List Manager
- Crowdsourcing
For younger or more inexperienced students you may want to restrict them to just these app types. We've specifically chosen these examples because they are relatively easy to prototype in App Lab.
If you allow students to stray from these, be aware that some types of apps are more difficult to create in App Lab and may require more creativity in developing a prototype. For example, App Lab has no mapping functionality, so if students wanted to create a mapping app, they would need to find or create a static image of a map to use in their app.
Example App Types
In the following levels you see several different example apps. They will give you an idea of what the UI (User Interface) could look like for apps with different goals.
For each example app:
- Click through the example to get a feel for how it functions.
- In your activity guide, make a note of any features or UI elements you find and what they are used for.
- Discuss with your groups how that app and any of its UI features could be applied to your chosen topic.
A Note About Functionality
These apps are prototypes; they allow a user to interact with the design without worrying about the underlying functionality. For example, when you take use the Quiz App, each question will always respond the same way, regardless of which answer you choose.
By focusing on an interactive prototype first you can learn a lot about how users might use your app before investing too much energy in making it actually work.
Student Instructions
Quiz Me
A quiz app can be used to teach, or help reinforce, information important to your chosen topic.
At its most basic, a quiz app is composed of a screen for each question with two or more buttons for multiple choice answers. Each button links to a page that either confirms that you were correct, or gives you information about why you were were wrong.
More advanced quiz apps could include features such as:
- Different types of questions (such as matching, free response, or even interactive games)
- Randomizing the order of questions
- Changing the questions based on how we'll you're doing
- Providing a final score
- Incorporating study material
Functionality Missing from this Prototype
- Questions aren't actually checked for correctness
Student Instructions
Decision Maker
Similar to the quiz app, a decision tree app asks the user a series of questions. The primary difference between the two is that a decision tree doesn't check for right or wrong answers, but instead attempts to give the user a suggestion or help them make a decision based on their answers.
This simple decision maker asks only three questions, but more advanced ones actually take the form of a tree as seen below:
Depending on the user's answer to each question, they're given a different page for the next question. This allows the app to gradually narrow down the decision one question at a time. This type of app can be really useful to help users understand complex processes - for example, you might introduce a recycling program by using a decision tree app to help users figure out which bin to sort items into - first asking what material it's made out of, then whether it is clean or not, and so on.
Functionality Missing from this Prototype
- Question buttons don't direct you to different screens
- The final screen doesn't give you a recommended decision
Student Instructions
List Manager
The list manager app allows user to keep track of the state of information and can be modified to serve many different purposes, such as checking in / out loaned items, tracking personal To Dos, or keeping track of where things are in a multi-step process.
While this example focuses on a single list, more sophisticated list apps could allow the user to create multiple lists, or even move items between lists. This app also only keeps track of the name of an item and whether or not it is "Done," but it could be extended to track and organize any amount of information about the list items.
Functionality Missing from this Prototype
- Delete buttons don't actually delete items from the list
- Add screen doesn't actually add an item to the list
Student Instructions
Crowdsourcing
Crowdsourcing apps allow multiple users to submit content for everyone to use (the source of content is the crowd). This app is very similar to the list app, with the main difference being that the list app assumes a single user while this app allows all users to add to the same list and "like" submissions.
This example uses a list of crowdsourced information for simplicity, but you could display any kind of information in many different formats. A crowdsourcing app could allow users to submit locations for display on a map, images to go into a gallery, or any number of other types of information.
Functionality Missing from this Prototype
- User's can't create accounts or profiles
- Submitted things aren't added to the list
- Clicking on the "like" icons don't change their state
Standards Alignment
View full course alignment
CSTA K-12 Computer Science Standards (2017)
AP - Algorithms & Programming
- 2-AP-10 - Use flowcharts and/or pseudocode to address complex problems as algorithms.
- 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
- 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.