Lesson 15: Build a Digital Prototype

Distribute: Make sure each team has their materials available, including their paper prototypes and Screen Design Activity Guides from yesterday.

Prompt: Lay out all of the Screen Design Activity Guide’s your team has completed so far. It’s okay if not every screen is finished yet. Look over the IDs for each screen and check that:

• Each screen has a name that contains only letters and no spaces
• Each ID starts with the screen name
• All of the IDs are unique across all the screens

Discuss: Students don’t need to write anything down for this prompt - they can complete it as a group via discussion.

Goal: This is a quick task that helps transition students back into completing their Screen Design activity guides, or be prepared to jump into today’s activity of designing these screens in App Lab. This is one last check that each team is preparing their IDs for a successful implementation in App Lab.

Preparing our screens is an important step that will make our digital prototypes more organized and save us time when preparing screens in App Lab. Today we will finish planning for any remaining screens in our app, then spend most of our time building these screens in App Lab.

Question of the Day: How can I design a digital prototype from a paper prototype?

Do This: Have students complete any remaining Screen Design Activity Guides for their app’s screens, focusing on planning the ID names. If some team members finish before others, you can suggest that they help their other teammates finish their remaining screens.

Code Studio: When students have finished their Screen Designs, have them log into Code Studio. There is a single level for students to design the screen for their app.

Multiple Screens: At this point, students haven’t learned how to add multiple screens to their apps - this happens in the next lesson. However, if a student is in charge of designing multiple screens for their team, you can show them how to add a new screen from Design Mode so they can complete all of their screens on this single level.

Circulate: Monitor students as they build their screens in App Lab, answering questions and providing feedback to students on their design. Encourage students to use their teammates as resources, getting quick feedback or asking questions. Most of the class will be spent with students designing their screens.

Share: If there is time, have students share their screens with the class, focusing on the different designs that teams created for their apps.

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

Prompt: How did your initial paper designs change when you recreated them in App Lab? What kinds of adjustments did you have to make?

Discuss: Have students journal individually first, then have students share with a partner before asking a few students to share with the class.

Goal: There is no single right answer to this prompt - the goal is to reflect on the process of converting a paper prototype into App Lab. Students may notice that the elements in App Lab make certain types of designs more difficult - for example, it’s hard to have curves or wavy lines as part of the design. Students may also realize that their paper prototypes were too “compact” with too much information on one screen - when they tried to recreate in App Lab, the text or icons may have been too small to read.