Lesson 3: Project - Designing an App Part 1

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?

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

The Unit 3 Journal includes a template aimed at helping students show their responses as much as tell them.

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.

Lesson Framing: 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.

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] 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.

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.

Step 4: Design the User Interface

• Students 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.

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.

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

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.

Check For Understanding Question(s) and solutions can be found in each lesson on Code Studio. These questions can be used for an exit ticket.

Question: Match the term with the examples.

Important context for teachers: During this lesson students will only be using Design Mode to design the different screens of their app. Students will NOT be programming the behavior of their app at this point. The following three lessons teach students how to use event handlers, key commands like setProperty, and debugging strategies. Then, in Part 2 (Lesson 7), students will add their first lines of code to their app to make their ideas come to life! The purpose of this lesson is only to get the design of individual screens in place.

In the last lesson, you developed a prototype of an app with a partner. It's important to remember that other people will be using your app and need to understand how to use it!

Discuss: Why is it important to plan out the design of an app?

Discussion Goal:

• Planning can save time so the developers don't spend time designing faulty user interfaces
• Planning can help the developers talk through and test out ideas with the users of the app

The design you sketched out is a prototype of your app. A prototype helps you plan the looks and features of your app before you program it."

Step 5: Direct students to Code Studio.

Level 1: On this level, students see a sample app they've looked at before along with the sketches for the screens. Students run the app and compare the screens to the original design.

Students should explore the app and the prototype for a few minutes, noting how different elements are represented on the prototype.

Encourage Collaboration: Reinforce a collaborative classroom environment in which students share responsibilities for designing screens and discuss with one another the choices they're making. Students should be communicating their ideas with one another as they build.

Waiting for Programming: Some students may be eager to start programming their apps rather than simply build screens. Let students know that they'll be able to start programming their apps in the coming lessons and that the first half of the unit focuses more heavily on design.

After looking at this app and the prototype, you may want to make a few adjustments to your own prototypes. Take a few minutes to update your design.

When you are finished, move on to Level 2 where you will start creating your user interfaces in App Lab!

Level 2 Here students will work on transferring their prototypes to screens in App Lab. Partners can work together sharing a computer, or they can divide the screens between themselves and work individually. After they are done, the individual screens can be shared to create a complete project (see slide for instructions).

Discuss: Were there any changes you had to make to your original design once you transferred it to a screen?

The Wrap-up is short today to allow students the maximum amount of time to work on their apps.

Often times students will discover that their design is too complicated on paper and simplify it when they transfer it to the screen. This is ok! Sometimes the best designs are simple designs.

Assessment: Planning Guide

This is a good opportunity to look over student's work in the App Development Planning Guide as a formative assessment.