Daily Learning Contract
- Topic: App Wireframes
- Objective: Students will identify app design as an Information Technology career opportunity by planning, testing, and revising a four-screen user flow for a specific audience.
- TEKS: d(1)(C)
- Demonstration of Learning: App plan with a specific user and two or three features, four labeled wireframe screens with a clear next action, written walkthrough feedback, and two starred revisions tied to that feedback (FYF pp. 30-33).
Lesson Overview
| Time | 50 minutes |
| Objectives | Choose an app brief and plan its name, target user, and 2-3 features; wireframe four app screens; test a partner's design and make 2 improvements to your own |
| TEKS | d(1)(C) |
| 5E Phases | Engage: Warm-Up · Explore: App plan and four wireframe screens · Explain: Partner walkthrough test · Evaluate: App design packet submission |
| Deliverable | App plan + 4 labeled wireframe screens (FYF pp. 31-32) + partner walkthrough notes + 2 improvements (FYF p. 33) |
| Materials | Find Your Future workbook pp. 30-33, sticky notes (about 4 per student), plain paper or the pre-printed wireframe template, one sheet per screen (Printable PDF), pencils for every student plus one set of colored pencils or markers per table group, App Design Packet and Emerging Tech Pitch Rubric (Printable PDF), projector |
Warm-Up (5 min)
WARM-UP: Open the app you use most on your phone. How many taps does it take to do the main thing you use it for? Where is the menu button?
Quick share. Bridge: "Yesterday you found what was broken on someone else's site. Today you are the app designer, and every screen is your decision before a single line of code gets written."
Activity 1: Steps 1-3 — Choose, Plan, and Wireframe (25 min)
Source: (FYF pp. 30-32: "From Wireframe to Wow", Steps 1-3)
Open the workbook to page 30. Read the opening together: app designers decide how an app looks, how it works, and how people move from one screen to the next. Before a single line of code is written, they sketch simple screen ideas and think about how a user will use the app.
Step 1: Choose Your App (3 min). Students pick ONE of the workbook's three briefs:
- Food Connection App: connects businesses with local food banks so leftover food gets donated before it goes to waste.
- Stress-Less App: helps students manage their schedules, reminds them to take screen-free breaks, and offers quick ways to destress in under five minutes.
- Passion Project App: gives people ideas for new projects and activities so they can discover a new passion.
Step 2: Plan Your App (5 min). Students brainstorm on sticky notes and answer the workbook's three questions: what is the app named, who is the target user, and what 2-3 features make it useful or fun.
Step 3: Create Wireframes (17 min). Read the workbook's symbol key together and project it so it stays visible: a box with an X inside is an image, icon, or video; horizontal lines are text; a solid rectangle or oval is a clickable button; three stacked lines are the main menu. Students wireframe four screens in the workbook boxes on pages 31-32 or on a pre-printed template:
- Home Screen: the welcome page a user sees after logging in.
- Main Menu: the main choices or features a user can pick from.
- Action Screen: what happens when a user clicks a feature, such as a calendar, game, or map.
- "Success" Screen: what the user sees after finishing a task, such as a "Great Job!" message.
Active Monitoring: Walk one lap at minute 8 targeting the Home and Main Menu screens (boxed and labeled, not drawn as art) and a second lap at minute 18 targeting the Action and Success screens (each one shows what the user did and what happened next). If a lap turns up more art than labels, reproject the four symbols to the whole room instead of redrawing them desk by desk.
Facilitation Tip
Some students will try to draw beautiful illustrations instead of wireframe boxes. Use the workbook's own tip: keep it simple, this is not about making it pretty, it is about showing exactly how the app works. A Success screen that looks identical to the Home screen is the other common miss; ask those students what changed for the user between the two.
Activity 2: Step 4 — Test Your App with a Partner (10 min)
Source: (FYF p. 33: "From Wireframe to Wow", Step 4: Test Your App)
Partners trade designs. Each partner walks through the other's app step by step, screen by screen, as if using it for the first time, and says out loud where they would tap next.
Think-Pair-Share: 30 seconds of silent reading before anyone talks, then Partner A gives feedback for 30 seconds, then Partner B. Partners answer the workbook's three questions: does each screen make sense, do you know where to click next, is anything missing? Two pairs share one confusion they found with the whole class, not one compliment.
Sentence stems to provide:
- "On Screen _____ I did not know where to click next."
- "Your Success screen tells the user _, but it does not tell them ___."
- "I think this app is missing a _____ screen."
Students write their partner's feedback directly on the wireframe pages so it does not get lost.
Activity 3: Step 5 — Improve Your Design (10 min)
Source: (FYF p. 33: "From Wireframe to Wow", Step 5: Improve Your Design)
Students make at least 2 improvements based on what their partner said. The workbook names three ways to improve: add a missing screen, fix a confusing layout, or add labels and buttons. Students mark each improvement with a star so the change is easy to find during grading.
Close with the workbook's class discussion prompts (FYF p. 33): why do app designers get feedback and test their ideas before an app is built, what would you add if you had more time, and which of your Building Blocks would help you succeed as an app designer?
DOK 2: How would you describe the difference between a design a partner can walk through alone and one that needs the designer standing there to explain it? What does each say about the design?
Exit Ticket (Deliverable-only day, no formal ticket)
Day 3 is a rich-submission day: the app design packet already functions as the mastery evidence. No additional 3-min exit ticket.
Submission: Students submit (1) their app plan (name, target user, 2-3 features), (2) their four labeled wireframe screens, and (3) their two starred improvements with the partner feedback that prompted each one.
Mastery evidence: the four screens and improvement pass demonstrate app-designer work under d(1)(C). Score against the App Design Packet and Emerging Career Evidence Rubric (Printable PDF), which adapts the four performance bands from the Capstone chapter (FYF p. 280). Today supplies App Plan, Screen Design, and Response to Feedback. Day 4 supplies Emerging Career Evidence. The Day 5 pitch is communication practice, not a separate live-delivery score. Judge whether a first-time user could follow the screens, not whether the drawing is attractive.
Differentiation
- Support: The pre-printed wireframe template (Printable PDF) carries the header bar and the screen frame already drawn, with the four-symbol key printed on the same sheet, so students fill in only the content boxes and do not have to remember the symbols. Print one sheet per screen.
- Extension: Students who finish early wireframe a fifth screen (settings, profile, or search results) and label which screen it connects to and how a user gets back.
- ELL: Hand out the bilingual wireframe template (Printable PDF), which prints the symbol key and the label words in both languages: Pantalla = Screen, Botón = Button, Menú principal = Main Menu, Usuario = User, Función = Feature. Allow ELL students to label their screens in Spanish and to give partner feedback in Spanish.