Unit3
1
2
3
4
5
6
7
8
9
10
11

Lesson 3: Project - Designing an App Part 1

Project

Overview

This is the first in a series of lessons where students will make progress on building their own functional app. In this lesson, students brainstorm app ideas and sketch out user interfaces in preparation for the next lesson where they will return to App Lab.

Purpose

This lesson kicks off a project that students will complete throughout the unit. The framing of this project is also important for how programming is presented overall. Students are encouraged to collaboratively design their projects, choose topics of personal interest, and build an app to meet the needs of other people. All of this is important as part of framing programming as a collaborative, creative, and socially situated pursuit.

Agenda

Lesson Modifications

Warm Up (5 mins)

Activity (30 mins)

Wrap Up (10 mins)

View on Code Studio

Objectives

Students will be able to:

  • Brainstorm and choose a topic to develop into an app
  • Use feedback to help guide the design of an app
  • Design the user interface of an app

Preparation

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

Forum

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)

Discussion Goal

Goal: The goal here is to help students understand the importance of considering the end user when designing an app.

Some points that may come up:

  • Some apps have too much guidance on how to use them, and others too little.
  • An app may be designed for a phone, but the user wants to use it on a tablet.
  • Apps that are designed for teenagers may make assumptions about language usage or interests that aren't accurate.

Prompt: People design user interfaces to meet a user's needs, but they don't always get it right.

  • Have you ever used an app where the user interface didn't actually meet your needs?
  • What was the problem?
  • What do you think the designers didn't understand about you or your needs?

Activity (30 mins)

Remarks

Yesterday we learned all about Design Mode. Today you're going to start developing your own app that educates a user on a topic. This is a project that will continue through the rest of the unit.

Distribute: App Development Planning Guide - Activity Guide. Students will be using the Planning Guide for the rest of the unit. Read the Project Description together and make sure students understand the requirements. Direct students to the "Investigate" section.

Step 1: Brainstorm Topic Ideas

  • Students have a lot of freedom in choosing their topics. If they are struggling with ideas, they could create an app for another class, for example: an overview of the periodic table for science class.

Group: Organize students into pairs.

Remarks

You will work with a partner on this project. Collaboration is a big part of app development. Your team's diverse ideas will help make your app even better, because each partner can keep a lookout for bias.

Here's an example: A team member puts in their app the phrase: "All teenagers work after school to earn spending money" because this is their experience - they work after school themselves. However, the other team member may not have an after school job, and because of this can point out the bias in that statement.

Collaboration is key to catching bias in your work!

Here's another example, this time in the design of an app. A team wants to make an app to encourage girls to sign up for a summer camp. One team member assumes that because this app is aimed at girls, the background should be pink. A girl on the team points out that she does not like pink, and using that color in the design may represent bias.

As you think about your topics and start designing your apps, remember to keep an eye out for bias and use your team mates to keep you accountable!

Step 2: Choose One Topic

  • Working with a partner students narrow down their ideas to one topic and explain what would be covered in their app.

Step 3: Survey Your Classmates

  • The goal in this step is for students to understand the needs of their users. This will help inform the overall design of the app.

Teaching Tip

After Step 4, you may want to check in with student groups to make sure their apps are doable and can be completed within the scope of the project.

Step 4: Design the User Interface

  • Student use the screen templates to sketch out the design of their app, including arrows or notes to show how different elements are connected.

Steps 5+ will be completed later on in the unit.

Wrap Up (10 mins)

Prompt: How did talking with the users of your app impact your design decisions?

Remarks

In the following lessons, you will continue to plan and create you apps. What are we doing here? We are following a development process, which is similar to what developers use in the real world when creating their own apps. A development process breaks down the steps into small pieces - we've completed the first few today.

There are many different versions of the development process. Most use some combination of investigating and reflecting, designing, prototyping and testing. Development processes can be ordered like we have laid out in the Activity Guide or more exploratory in nature. As we continue on through this project, reflect on the steps and consider how they help organize the process.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 3A-AP-16 - Design and iteratively develop computational artifacts for practical intent, personal expression, or to address a societal issue by using events to initiate instructions.
  • 3A-AP-19 - Systematically design and develop programs for broad audiences by incorporating feedback from users.
  • 3A-AP-21 - Evaluate and refine computational artifacts to make them more usable and accessible.
  • 3A-AP-22 - Design and develop computational artifacts working in team roles using collaborative tools.
  • 3A-AP-23 - Document design decisions using text, graphics, presentations, and/or demonstrations in the development of complex programs.

CSP2021

CRD-1 - Incorporating multiple perspectives
CRD-1.A - Explain how computing innovations are improved through collaboration.
  • CRD-1.A.3 - Effective collaboration produces a computing innovation that reflects the diversity of talents and perspectives of those who designed it.
  • CRD-1.A.4 - Collaboration that includes diverse perspectives helps avoid bias in the development of computing innovations.
  • CRD-1.A.6 - Information gathered from potential users can be used to understand the purpose of a program from diverse perspectives and to develop a program that fully incorporates these perspectives.
CRD-2 - Developers create and innovate using an iterative design process
CRD-2.E - Develop a program using a development process.
  • CRD-2.E.1 - A development process can be ordered and intentional, or exploratory in nature.
  • CRD-2.E.2 - There are multiple development processes. The following phases are commonly used when developing a program: ● investigating and reflecting ● designing ● prototyping ● testing
  • CRD-2.E.4 - A development process that is incremental is one that breaks the problem into smaller pieces and makes sure each piece works before adding it to the whole.
CRD-2.F - Design a program and its user interface.
  • CRD-2.F.1 - The design of a program incorporates investigation to determine its requirements.
  • CRD-2.F.2 - Investigation in a development process is useful for understanding and identifying the program constraints, as well as the concerns and interests of the people who will use the program.
  • CRD-2.F.3 - Some ways investigation can be performed are as follows: ●        collecting data through surveys ●        user testing ●        interviews ●        direct observations
  • CRD-2.F.4 - Program requirements describe how a program functions and may include a description of user interactions that a program must provide.
  • CRD-2.F.5 - A program’s specification defines the requirements for the program.
  • CRD-2.F.6 - In a development process, the design phase outlines how to accomplish a given program specification.
  • CRD-2.F.7 - The design phase of a program may include: ●        brainstorming ●        planning and storyboarding ●        organizing the program into modules and functional components ●        creation of diagrams that represent the layouts of the user interface ●