Lesson 7: Project - Paper Prototype
Overview
Based on the peer 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 app and testing it with their user to see if their assumptions about the user interfaces they created are accurate.
Purpose
This lesson concludes the first chapter of Unit 4 and is an opportunity to showcase the skills student have developed. They will develop a user interface based on the needs of their classmate that they identified in the previous lesson. Additionally they practice getting user feedback by testing their paper prototype. In the next chapter students will continue to use many of these skills but will be programming 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
Lesson Modifications
Warm Up (5 mins)
Activity (45 min)
Wrap Up
View on Code Studio
Objectives
Students will be able to:
- Design the functionality 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 if you have not already
- 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
- Paper Prototypes - Exemplars
For the Students
- Paper Prototypes - Rubric
- Computer Science Practices - Reflection
- Paper Prototype - Project Guide
Teaching Guide
Lesson Modifications
Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please read the full lesson plan below, then click here to access the modifications.
Warm Up (5 mins)
What Makes a Good User Interface
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?
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
Discuss: Have students share their ideas. You can record them on the board for reference throughout the class.
Activity (45 min)
Getting Started
Group: If they are not already, place students with the partner they interviewed in the previous lesson
Teaching Tip
Reducing Printed Materials: Both the Project Guide and the Rubric can be completed online or as a journal activity.
Distribute: If you collected them after the last class give each student a copy of the project guide and rubric.
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.
Define: The first several steps of this project ask students to record the results of their interview and subsequent class discussion from the previous lesson. If this is not completed then complete it now.
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.
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.
Decide Your Screens: 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
Paper Prototyping
Distribute: Give each student up to six note cards for creating their screens as well as drawing supplies.
Teaching Tip
How Much Time: Let students know early how much time they'll have to work on their projects. It's recommended students have at least an hour to design their screens and they will likely need more. Help students plan by reminding them how much time they have to work on each individual screen.
Create Screens: Students should create the screens of their app.
Create Navigation Diagram: Students can make their navigation diagram whenever they want but in general it will make sense to wait until their screens are finished.
Prototype Testing
Test Your App: Students should regroup with the partner they designed their app for. Using the same structure from Lesson 4 they should test the app. Each should act as the "computer" for the app they designed and allow their user to interact with the different screens of the app. Further instructions exist inside the project guide.
On the project guide students have space to record what they observed from testing their app. Students can and should also ask their user if there's anything else they would like to see in the app.
Interpreting User Feedback: 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 should drive their next iteration.
Wrap Up
Share Your Work
Create a Poster: As an optional extension of this project students can create a poster of their project to present. The poster could include:
- The screens of their app
- Some way of demonstrating the navigation diagram, perhaps this time using the screens themselves
- A description of what the user is trying to learn and their barrier
- A description of how the app works and how it addresses the user's needs
Reflect on the Project
Journal: 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?
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.
Discuss: Ask students to share their reflections with the class.
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.
- Lesson Overview
- Teacher Overview
- Student Overview
- Paper Prototypes - Sample Marked Rubrics 1 (PDF | DOCX)
- Paper Prototypes - Sample Marked Rubrics 2 (PDF | DOCX)
- Reflection
- 2
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.