Lesson 8: Project - Paper Prototype

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.

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

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?

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.

Also distribute a copy of the rubric or the student checklist.

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. Students can use the rubric or student checklist to self-assess and reflect as they progress through the project.

Class Brainstorm: Before diving into individual projects, consider leading a class brainstorm of what some example projects could look like that fit this criteria. You may also decide to show one or two of the exemplar apps to help inspire the brainstorm. Using these ideas, students may find it easier to latch onto an initial idea for their project

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.

Scoping Student Projects: Students may ideate projects that are beyond the skills they currently have or that would take longer than the allotted time to implement. Rather than asking students to choose a different project, consider asking students to imagine a more scaled-down version of their initial idea. As an analogy, if students initial idea is the "Run" step, imagine a less intense version that represents what the "Walk" step would look like. If necessary, you can keep going back further to a "Crawl" step as well.

Digging Deeper: This is sometimes referred to as the Minimal Viable Product - you can learn more about this process and adapt it into your project strategies by reading this article: Making Sense of MVP by Henrik Kniberg

Navigation Diagram: Students are provided space on their activity guide to sketch out their ideas for the screens of their app. 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

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.

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.

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.

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.

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.

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.

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.

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

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

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.

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.

Display: Show students a copy of the rubric for this project. All the criteria from this rubric can be found in the activity guide and on the poster when it is finished. Students can also use the student checklist to self-assess how well they are meeting the criteria for this project.

Rubric and Checklist: Students have two resources they can use for self-reflection and making sure they are on the right track: the rubric and the student checklist. We recommend having students use the checklist for their own self-assessment and reflection, since it may be easier to digest and understand when reviewing their own project. However, we recommend teachers use the full rubric for evaluating projects to give more accurate feedback to students. You can see examples of this with the Sample Marked Rubrics resource at the top of the lesson plan (only visible to verified teachers)

Distribute: Each student needs a piece of poster paper. 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.

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.

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.

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.

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.