Intro to App Design - Lesson 3: Designing an App Part 1

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 begin building the apps with code.

Goals

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

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.

Resources

Supplemental Code.org material

For the students

• App Development Planning Guide - Activity Guide

Getting Started (5 minutes)

Discuss: 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 minutes)

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

• For this project you will work with a partner. Together you will create an app that teaches your classmates about any topic you both find interesting. Along the way you'll learn how to use many of the features of App Lab as well as skills that will help you when building more apps throughout this class.
• You will submit: Your final app and this completed project-planning guide
• App Requirements: Uses at least three screens, includes examples of images, audio, and text, a clear and easy to navigate user interface, clearly communicates information about your topic, code is cleanly written and free of errors
• Steps: Collaborate with your partner to pick a topic you are both interested in, interview classmates to identify what they already know about the topic, design your app's user interface using this planning guide, design and program your app in App Lab, collect feedback from your classmates and update your app, share your final app with the class

Step 1: Brainstorm Topic Ideas

Group: Organize students into pairs.

• 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!

In their groups, students brainstorm topic ideas and add them to their worksheet.

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.

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.

Wrap up (5 Minutes)

Discuss: 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 or be more exploratory in nature. As we continue on through this project, reflect on the steps and consider how they help organize the process.

Assessment: Check for Understanding

For Students

Open a word doc or google doc and copy/paste the following question.

Question

Match each term with an example.

Terms:

1. Input
2. Output
3. User Interface

• Text is displayed on the screen.
• Buttons and a text area with a title.
• Selecting an button.

Standards Alignment

• CSTA K-12 Computer Science Standards (2017): 3A-AP-16, 3A-AP-19, 3A-AP-21, 3A-AP-22, 3A-AP-23
• CSP2021: CRD-1.A.3, CRD-1.A.4, CRD-1.A.6
• CSP2021: CRD-2.E.1, CRD-2.E.2, CRD-2.E.4, CRD-2.F.1, CRD-2.F.2, CRD-2.F.3, CRD-2.F.4, CRD-2.F.5, CRD-2.F.6, CRD-2.F.7

Next Tutorial

In the next tutorial, we will discuss Code.Org Unit 3 Lesson 4, which describes Translate a prototype to code.