TheDesignProcess

The Design Process

The Design Process unit transitions students from thinking about computer science as a tool to solve their own problems towards considering the broader social impacts of computing. Through a series of design challenges, students are asked to consider and understand the needs of others while developing a solution to a problem. The second half of the unit consists of an iterative team project, during which students have the opportunity to identify a need that they care about, prototype solutions both on paper and in App Lab, and test their solutions with real users to get feedback and drive further iteration.

Chapter 1: User Centered Design

Big Questions

  • How do designers identify the needs of their user?
  • How can we ensure that a user's needs are met by our designs?
  • What processes will best allow us to efficiently create, test, and iterate upon our designs?

Week 1

Lesson 1: Designing With Empathy

Unplugged

  • Warm Up (5 min)
  • Activity (35 min)
  • Wrap Up (5 min)

The class explores a variety of different shoe designs to consider design choices. Building on this, you will explore the relationship between users, their needs, and the design of objects they use.

Teacher Links: Exemplar | Slides Student Links: Activity Guide | Image

Lesson 2: Understanding Your User

Unplugged

  • Warm Up (5 min)
  • Activity (35 min)
  • Wrap Up (5 min)

Using user profiles, you will explore how different users might react to a variety of products. Role playing as a different person, each member of the class will get to experience designs through someone else's eyes.

Teacher Links: Slides | Exemplar Student Links: Activity Guide | User Profile | User Profile | User Profile | User Profile

Lesson 3: User-Centered Design - Define and Prepare

Unplugged

  • Warm Up (5 min)
  • Activity (35 min)
  • Wrap Up (5 mins)

In small groups, you will use the design process to come up with ideas for smart clothing. From brainstorming, to identifying users, to finally proposing a design - this activity serves as the first of several opportunities for you to practice designing a solution for the needs of others. Today's lesson focuses on brainstorming users and ideas that will meet their needs.

Teacher Links: Exemplar | Slides Student Links: Activity Guide | Video

Lesson 4: User-Centered Design - Try and Reflect

Unplugged

  • Warm Up (5 mins)
  • Activity (35 mins)
  • Wrap Up

In small groups, you will use the design process to come up with ideas for smart clothing. From brainstorming, to identifying users, to finally proposing a design - this activity serves as the first of several opportunities for you to practice designing a solution for the needs of others. Today's lesson focuses on creating your design and reflecting on how well it meets the needs of your users.

Teacher Links: Slides | Exemplar Student Links: Activity Guide

Lesson 5: User Interfaces

Unplugged

  • Warm Up (5 min)
  • Activity (35 min)
  • Wrap Up (5 min)

In this lesson, you get to see how a paper prototype can be used to test and get feedback before writing any code. To help out a developer with their idea, the class tests and provides feedback on an app prototype made of paper.

Teacher Links: Slides Student Links: Resource | Activity Guide | Activity Guide

Week 2

Lesson 6: Feedback and Testing

Unplugged

  • Warm Up (5 mins)
  • Activity (35 mins)
  • Wrap Up

Users have been testing an app, and they have lots of feedback for the developer. The class needs to sort through all of this feedback, identify the common themes and needs, and start revising the prototype to make it better meet the users' needs.

Teacher Links: Slides | Exemplar Student Links: Resource | Activity Guide | Resource

Lesson 7: Identifying User Needs

Unplugged

  • Warm Up (5 min)
  • Activity (35 min)
  • Wrap Up (5 mins)

In this lesson, we begin thinking about designing our own paper prototype for an app that can solve a problem in our community. Using interviews from different users, you will identify needs and interests that you can use to design an app for these people in your community.

Teacher Links: Slides Student Links: Activity Guide | Resource

Lesson 8: Project - Paper Prototype

Unplugged | Project

  • Warm Up (5 mins)
  • Day 1 (40 mins)
  • Day 2 (40 mins)
  • Wrap Up (5 mins)

Using the interview information from the previous lesson, you will come up with app ideas to address the needs of your users. To express those ideas, and test out their effectiveness, you will create and tests paper prototypes.

Teacher Links: Slides | Exemplar Student Links: Project Guide | Rubric

Chapter Commentary

This chapter introduces the design process as a specific version of the problem solving process in which empathy for a user's needs is consistently integrated. Students learn strategies for identifying user needs and assessing how well different designs address them. In particular they learn how to develop a paper prototype, how to gather and respond to feedback about a prototype, and consider ways different user interfaces do or do not affect the usability of their apps.


Chapter 2: App Prototyping

Big Questions

  • How do teams effectively work together to develop software?
  • What roles beyond programming are necessary to design and develop software?
  • How do designers incorporate feedback into multiple iterations of a product?

Lesson 9: Designing Apps for Good

Unplugged

  • Warm Up (5 min)
  • Activity (35 min)
  • Wrap Up (5 min)

To kick off the app design project, the class organizes into teams and starts exploring app topics. Several examples of socially impactful apps serve as inspiration for the project.

Teacher Links: Slides | Teacher Resource Student Links: Activity Guide

Week 3

Lesson 10: Market Research

  • Warm Up (5 min)
  • Activity (35 min)
  • Wrap Up (5 min)

In this lesson, we dive into app development by exploring existing apps that may serve similar users. In groups, you will identify a handful of apps that address the same topic you are working on, and use those apps to help refine the app idea you will pursue.

Teacher Links: Slides | Exemplar Student Links: Activity Guide

Lesson 11: Exploring UI Elements

  • Warm Up (5 mins)
  • Activity (35 mins)
  • Wrap Up

Paper prototypes allow developers to quickly test ideas before investing a lot of time writing code. In this lesson, teams explore some example apps created in App Lab and use these examples to help inform the first paper prototypes of your apps.

Teacher Links: Slides | Exemplar Student Links: Activity Guide

Lesson 12: Build a Paper Prototype

Unplugged

  • Warm Up (5 mins)
  • Activity (35 mins)
  • Wrap Up (5 mins)

In your teams, you will create your paper prototype for the app you've been developing. Each team member will create a different screen and design how the user will navigate between each screen.

Teacher Links: Slides | Exemplar Student Links: Activity Guide | Template

Lesson 13: Prototype Testing

Unplugged

  • Warm Up (5 min)
  • Activity (35 min)
  • Wrap Up (5 min)

In this lesson, teams test out their paper prototypes with other members of the class. As one student role plays as the computer, one narrates, and the rest observe, teams will get immediate feedback on their app designs, which will inform the next version of your app prototypes.

Teacher Links: Slides | Exemplar Student Links: Activity Guide | Activity Guide | Video

Lesson 14: Design Mode in App Lab

App Lab

  • Warm Up (10 min)
  • Activity (35 min)
  • Wrap Up (5 min)

Teams now move to App Lab to build the next iteration of your apps. This lesson focuses on how to use Design Mode in App Lab to create digital prototypes for your apps.

Teacher Links: Slides | Map Level Student Links: Activity Guide | Activity Guide | Resource

Week 4

Lesson 15: Build a Digital Prototype

App Lab

  • Warm Up (5 min)
  • Activity (35 min)
  • Wrap Up (5 min)

Using the drag-and-drop Design Mode, each team member builds out at least one page of their team's app, responding to the feedback you received in the previous round of testing.

Teacher Links: Slides Student Links: Activity Guide

Lesson 16: Events in App Lab

App Lab

  • Warm Up (5 min)
  • Activity (35 min)
  • Wrap Up (5 min)

Building on the previous lesson, we learn how to import new screens into our apps and link them together using buttons and events to complete the Recycle Finder app we started in an earlier lesson.

Teacher Links: Slides | Map Level

Lesson 17: Linking Prototype Screens

App Lab

  • Warm Up (5 min)
  • Activity (35 min)
  • Wrap Up (5 min)

Building on the screens that they designed in the previous lesson, teams combine screens into a single app. Simple code can then be added to make button clicks change to the appropriate screen.

Teacher Links: Slides

Lesson 18: Testing the App

  • Warm Up (5 min)
  • Activity (45 min)
  • Wrap Up (5 min)

In this lesson, teams run another round of user testing with their interactive prototype. Feedback gathered from this round of testing will inform the final iteration of the digital prototype.

Teacher Links: Slides Student Links: Activity Guide | Activity Guide

Lesson 19: Bugs and Features

  • Warm Up (5 min)
  • Activity (35 min)
  • Wrap Up (5 min)

Teams analyze the feedback they received from the last round of testing and make a plan for how they would like to address it. You will categorize feedback as either a bug or a feature and decide which items are most important for improving your app.

Teacher Links: Slides | Exemplar Student Links: Activity Guide

Week 5

Lesson 20: Updating Your Prototype

  • Warm Up (5 min)
  • Activity (35 min)
  • Wrap Up (5 min)

Using the feedback from the last round of testing, teams implement changes that address the needs of their users. Each team tracks and prioritizes the features they want to add and the bugs they need to fix.

Teacher Links: Slides Student Links: Activity Guide

Lesson 21: Project - App Presentation

Project

  • Warm Up (5 min)
  • Days 1 and 2 (80 min)
  • Days 3 and 4 (10 min per team)
  • Wrap Up (5 min)
  • Extension Activities

Each team prepares a presentation to "pitch" the app they've developed. This is the time you can share the struggles, triumphs, and plans for the future.

Teacher Links: Slides | Exemplar Student Links: Rubric | Reflection | Slide Deck | Exemplar

Chapter Commentary

This chapter is focused on a long running group project that allows students to apply all they've learned about User-Centered Design to develop an app prototype. Working in teams, students identify a social issue that they care about and design and prototype an app to address that issue. This is an opportunity for students to explore other roles in software development, such as product management, marketing, design, and testing.