Lesson 14: Design Mode in App Lab

Distribute: Make sure each team has their prototypes available. They should also have the Paper Prototypes User Testing Activity Guide from yesterday.

Prompt: What is at least one change you would make to your paper prototype based on feedback from yesterday? You can use your Activity Guide from yesterday to help remind you of the feedback from user testing.

Discuss: Have students journal individually, then share in their groups. Encourage them to keep coming up with ideas even after everyone has shared. Then, invite one person from each group to share at least one change to their app.

Discussion Goal: This is an opportunity for teams to remind themselves of the activity they completed yesterday, and synthesize the feedback into actionable steps. This brainstorming will lead into the activity they will complete today.

Now that we’ve done a first round of testing and we know what changes we need to make, it’s time to build a new prototype. But this time, instead of a paper prototype, we’re going to make a digital prototype! Today we’ll learn how to use AppLab to design apps, then tomorrow we’ll turn our paper prototype into a digital prototype!

Question of the Day: How can we use AppLab and Design Mode to create apps?

Display: Show the Model Screen Design activity guide. This image will also be available to them during the level progression, and can optionally be printed for each team to use as a reference.

Before you start working on designing your own apps in App Lab, we're all going to work on converting this paper prototype into AppLab first. Look over the prototype to make sure you know what you are building toward. Notice that most of the elements on the screen are labelled - we’re going to use these same exact labels when creating these elements in App Lab

Video: Show students the Intro to Design Mode video in the slides. This video introduces the design mode interface that students will use for the rest of the unit. Today’s lesson focuses just on the drag-and-drop design elements; the Events in AppLab lesson focuses on the coding elements

To encourage active engagement and reflection, use one or more of the strategies discussed in the Guide to Curriculum Videos.

Code Studio: Have students log into their computers and open Code Studio.

Facilitating Programming Levels: These programming levels are designed to continue teaching new skills and blocks through exploration, trial-and-error, and using worked examples from pre-supplied code. Students are still getting familiar with the concepts in the lesson and will need strong support throughout these levels to build confidence, debug their code, and cement their understanding.

Consider having students complete levels in pairs using Pair Programming, which has students use one computer and trade between being a Driver or a Navigator. This process is highlighted in this video, which you can show to the class. You can have students switch roles based on a timer, or switch every time they complete a level.

Text-to-Speech Options: The instructions panel includes two options that can support comprehension for students.

• Text to Speech which reads aloud the instructions for students
• Microsoft Immersive Reader which opens a new panel for the instructions and gives controls to change the text size, contrast, or translate to another language.

Click here to learn more about these options

Using Resources: Below you can find recommendations for using the many resources students are introduced to in the lesson. You could consider creating a "Resource Chart" to keep track of these options and support students to be self-sufficient as they progress through levels.

• Videos: Watched as a class, but students can always return to them.
• Help and Tips Tab: This tab contains all of the relevant videos and reference guides for a particular level.
• Reference Guides: Contain text and diagrams explaining content. These are intended as helpful student resources, not class readings. They are a good place to go for review after learning content or when students get stuck in levels. You may decide to print these and have them available for students as they work through levels.
• Documentation and Examples: Hovering over a block will show a short description of what the block does. Clicking the "See Examples" link will open the documentation for that block.
• Level Instructions: Instructions may introduce small pieces of new content. Each level features a "Do This" section explaining what students are supposed to do in that level. Set the expectation early that reading these instructions, not just the "Do This" section, is important.

Formative Assessment: This level can be used as a formative assessment. A rubric is provided in the level, and written feedback can be given to students. Click here to learn more about giving feedback to students.

Circulate: Monitor students as they complete the levels in Code Studio. As they progress through the bubbles, they should be recreating the Recycle Finder app. The last level of this lesson has students check in with you for next steps.

Screen Ownership

Distribute: Give each team a copy of the Screen Ownership activity guide

Reducing Printed Materials: This Activity Guide can be completed as a journal activity. Classrooms that have chosen the online option may also do this activity on a separate sheet of paper, or use an online drawing tool to design the screen.

Do This: Have groups look through their paper prototypes to identify all of the unique screens they will need to create. From there, they can divvy up screens evenly among the group members and document it on the chart. If there are more screens than students, have groups consider the following factors when dividing up content:

Rules for Screen Names: For each screen, groups should assign a short and clear screen name. This name will be used in App Lab to identify the screen, so they should contain no spaces or special characters.

• Is every page actually unique, or do some represent the same page with slightly changed content?
• Are there similar pages that could be easily created by the same person?
• Are there multiple simple pages that could be grouped together?

Now that we’ve practiced using App Lab and divided up our screens, it’s time to plan what our screens will look like in App Lab. We will start this process today and finish it tomorrow. One of the most important steps is planning your IDs for each element. Just like in the Recycle Finder app, each ID will also have a prefix that helps identify which screen it’s on.

Distribute: After students have divided up their screens, distribute a Screen Design activity guide for each screen in the app. If a student is completing multiple screens, they will have multiple activity guides. Students can use this activity guide to sketch out their design and document the IDs for each design element.

Screen Design

Do This: Have students complete the Screen Design activity guide, listing the feedback they plan to incorporate from yesterday’s tests and generating the IDs they plan to use once in App Lab. Students should work on this up until the end of the class period. Depending on the number of screens each student has, they may not finish this before class ends and will continue tomorrow.

Circulate: Monitor students as they plan their screens, checking that they are giving meaningful IDs to each of their elements. Make sure they are also including the screen name as a prefix for each ID. This step is important for the Linking Prototype Screens lesson, where students will be importing elements from each other’s apps - if two elements have the same ID, the import will fail. Being vigilant about this requirement now will save time and frustration later.

Collect: Collect all the materials from each team in a safe storage location.