TheDesignProcess
Ch. 1
1
2
3
4
5
6
7
8
Ch. 2
9
10
11
12
13
14
15
16
17
18
19
20
21

Lesson 8: Project - Paper Prototype

Overview

Question of the Day: How can I develop an app prototype for a user?

Based on user interview from the previous lesson, each student comes up with an idea for an app that will address their user's problem. Students then get to create their own paper prototype of their app ideas by drawing "screens" on individual notecards. A project guide directs students through the process including building the paper prototype and testing it with their user to see if their assumptions about the user interfaces they created are accurate.

This is a two-day lesson, with specific timings outlined in the lesson plan below

Purpose

This lesson concludes the first chapter of Unit 4 and is another opportunity to practice the problem solving process for designing an app. The focus in this project is on the design process, especially empathizing with their user and the testing & feedback steps of the app design process. In the next chapter students will continue using this process to design apps and learn how to program their prototypes in App Lab.

Assessment Opportunities

Use the project rubric attached to this lesson to assess student mastery of learning goals of this chapter.

Agenda

Warm Up (5 mins)

Day 1 (40 mins)

Day 2 (40 mins)

Wrap Up (5 mins)

View on Code Studio

Objectives

Students will be able to:

  • Design a paper prototype of an app to address the specific needs of a user
  • Identify improvements to an app based on user testing
  • Design the user interface of an app

Preparation

  • Print one copy of the project guide for each student
  • Print one copy of the rubric for each student
  • 6 notecards for each student
  • Drawing supplies (colored pencils, markers, rulers, etc.)
  • Poster paper for each student

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the Teachers

For the Students

Support

Report a Bug

Provide Lesson Feedback

Teaching Guide

Warm Up (5 mins)

Discussion Goal

Goal: Before sending students off to design their paper prototypes give them an opportunity to brainstorm attributes of effective designs. For example they may bring up

  • Simple interfaces
  • Reusing design elements
  • Placing common elements in the same place on each screen
  • Draw attention to what's important

Journal

Prompt: Today we will start making the interfaces of our paper prototypes. Before we get started reflect on the "Txt Ur Grndkdz" app we improved or other apps you've used in the past. What features make a good user interface? How can we make sure apps are easy to use and address our user's needs?

Discuss: Have students share their ideas. You can record them on the board for reference throughout the class.

Remarks

Yesterday we used user interviews to identify a user's needs and interests, and brainstormed different apps that can address these items. That was just the first part of the design process - empathizing with a user. Today we'll continue that process and begin making a paper prototype for the app we brainstormed yesterday!

Question of the Day: How can I develop an app prototype for a user?

Day 1 (40 mins)

Getting Started

Distribute: Give each student a copy of the Paper Prototype Project Guide. If you collected the User Interview Activity guide from yesterday, re-distribute this to students as well so they can use it as a reference for today’s activity.

Paper Prototype Project

Overview: As a class read through the overview of the project reviewing what they will need to produce and how it will be assessed.

Teaching Tip

Scoping Projects: Encourage students at this point to scope the functionality of their app to the minimum amount necessary to address their user's needs. As they work they'll likely discover new components they need to add so it's best to start with a small set early on.

Define: Have students complete the Define section of the project guide. They should reference their User Interview Activity Guide from the previous lesson.

Prepare: Students should brainstorm the minimum set of features their app would need in order to address their user's needs. This can be completed as a bulleted list on the activity guide.

Teaching Tip

Why Six Screens?: There's nothing magical about the number six. It's a rough estimate of the number of screens most students should be able to work within for their ideas and is a concrete way to help scope students' apps. It also just fits nicely on one piece of paper. Feel free, however, to impose any other limit you like.

Navigation Diagram: Students are provided space on their activity guide to sketch out their ideas for the screens of their app and create a navigation diagram. This is an opportunity to make a quick first draft of their app. This should take about 10 minutes and focus primarily on

  • How many screens they'll need
  • What information or functionality appears on each screen
  • How screens will be connected to one another

Paper Prototyping

Distribute: Give each student up to six note cards for creating their screens as well as drawing supplies.

Do This: Have students create their paper prototype screens based on their navigation diagram. Leave enough time for students to begin filling in the table for User Testing before Day 1 ends.

Circulate: Monitor student progress as they create their screens, keeping an eye on time management. If possible, have a timer available for students to see so they know how much time they have remaining. Encourage students to start with the basics on their screens so they are usable, then add more details once all the screens have the basics and are usable.

Remarks

I’m really excited by the prototypes we’re developing! Tomorrow, you’ll get a chance to see what each other have made because we’ll be testing our prototypes, just like we did with the Text Your Grandkids app. Before we leave, we’re going to do one last step to prepare for our user testing tomorrow.

Wrap Up

Display: Have students turn to page 4 of their Project Guide, which focuses on User Testing. Have students fill in the left-most column of the table with the main tasks they would like to test with a user. This will be the first activity students start with the next day.

Collect: Decide how you would like to collect or store the notecards for students who have finished their paper prototype. You may decide to collect and redistribute them, or you may have students keep their materials in a specific location.

Day 2 (40 mins)

Warm Up

Distribute: As students enter, have them gather their paper prototype notecards and Paper Prototype Project Guide. Instruct them to test the app themselves and practice “navigating” the app as if they were a user by pressing buttons and switching screens. Once all students are ready, jump right into the next activity.

Remarks

Now that our paper prototypes are prepared, we need to test them! Today we’ll spend time testing our prototypes and getting feedback, making a plan for improvements, and making a poster to showcase our app prototype and share our results.

Teaching Tip

Timing: Students should spend no more than five minutes each testing each other’s paper prototypes. This ensures there is enough time for the remaining activities in this lesson.

Challenges: Students may struggle to empathize with their users while they are testing the app. Decisions that may seem “obvious” to the creator of the app are not always so clear for the user, which may be frustrating. App designers may try to clarify their app or interject and say “you’re supposed to…” as the user navigates the app. Encourage students to avoid these instincts and instead let the user explore the app in whatever way seems intuitive to them.

This is exactly what is supposed to happen with user testing - it challenges our assumptions and helps us see from another person’s perspective, uncovering problems we may not have even known existed. This will enrich the Reflect stage of the process, since there will be many places that the app can be improved

Prototype Testing

Group: Group students into pairs. Have students decide who will test their app first and who will test their app second.

Test Your App: Using the same structure as an earlier lesson with one person as the user and another person as the computer, have students take turns testing their app with each other. One person acts as the user and navigates the paper prototype, the other person acts as the computer and changes the screens. The user should try and complete each of the tasks outlined on the User Testing section of the activity guide. Further instructions exist inside the project guide.

Circulate: Monitor students as they complete this task, making sure users are able to explore the app from their own perspective.

Reflect

Display: Have students turn to page 5 of the activity guide for the Reflect prompt. Students have a T chart on the project guide to interpret their user feedback and identify potential changes or improvements. On the left side of the T chart, students list all of the interesting observations they made during testing (such as assumptions the user had, ways they tried to interact with the app, or statements they made while using the app). The right side of the chart is an area to interpret what each of those observations might mean. This process will help students identify what changes they should consider for their app.

Circulate: Monitor students as they reflect on their feedback from user testing. If students appear discouraged because the app didn’t work as intended, encourage them to see this as a good thing because it means the feedback was valuable and will lead to real improvements.

Remarks

Congratulations - we’ve completed the full steps of the design cycle! We started by empathizing with our users through user interviews. We defined our problem based on their needs and interests. We prepared to make the app by brainstorming with a team. We developed our paper prototypes so we could try and test the app. And, based on our feedback, we reflected on the improvements we could make. To close out this project, we’re going to create a poster to represent our app prototype. However, the larger goal is to showcase the whole process we went through - empathize, define, prepare, try, and reflect.

Display: Have students read the Create a Poster section of the activity guide. This step requires students to cut out pieces of their activity guide and paste them on a poster. Additionally, they will write a small summary of their app based on the questions on the bottom of the activity guide. An example poster is included in the unit slides.

Display: Show students a copy of the rubric for this project, which will be distributed to students in a moment. All the criteria from this rubric should be evident in the activity guide and on the poster when it is finished.

Teaching Tip

Displaying the Posters: As students finish their posters, encourage them to hang them around the classroom. If there is time in class, students can also participate in a gallery walk and give positive feedback and “shoutouts” to other student posters via post-it notes. Even if the posters are not discussed at the end of the lesson, they can remain prominently displayed throughout the rest of the unit as a reminder of the successful design process.

Distribute: Each student needs a piece of poster paper and a copy of the rubric. Groups of students can share tape or glue-sticks, scissors, and markers or colored pencils.

Circulate: Monitor students as they create their posters, clarifying any questions. Emphasize that the goal is for the poster to describe the entire design process, not just showcase the app idea and paper prototype. Encourage students to use the rubric to help guide what information they include on their poster.

Wrap Up (5 mins)

Discussion Goal

Goal: Highlight the difficulty in viewing projects from another person's perspective, especially when you are the one doing the creating. This is a skill students will need to continue to use in this unit. Call out skills like interpreting user needs from interviews and live tests, scoping large projects, designing user interfaces, and general organization that students will continue to use in the second chapter of the unit.

Journal

Prompt: Think about the entire development process for your paper prototype, from the initial interview to designing the prototype, to testing, to brainstorming further improvements.

  • What were the biggest challenges involved in designing a piece of software for a different user?
  • What skills from this project do you think will be useful when programming app prototypes later in this unit?

Discuss: Ask students to share their reflections with the class.

Survey: Send students to Code Studio to complete their reflection on their attitudes toward computer science. Although their answers are anonymous, the aggregated data will be available to you once at least five students have completed the survey.

View on Code Studio
  • Reflection
  • 2
  • (click tabs to see student view)
View on Code Studio

Student Instructions

This level is an assessment or survey with multiple questions. To view this level click the "View on Code Studio" link.

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-15 - Seek and incorporate feedback from team members and users to refine a solution that meets user needs.
  • 2-AP-17 - Systematically test and refine programs using a range of test cases.