Coding activity
App Design Workshop
Design your dream app! Draw what you'd see on a phone screen. What would your app do? What buttons would it have?
Materials and setup
- paper
- markers
- colored pencils
- ruler
- phone-shaped templates
How this changes by age
Pre-K (ages 3–4)
Design your dream app! Draw what you'd see on a phone screen. What would your app do? What buttons would it have?
Steps
- Draw a rectangle on paper (this is your phone screen).
- What would your dream app do? Help find animals? Play music? Tell jokes?
- Draw what the app looks like: add pictures, buttons, and words.
- What happens when you tap a button? Draw the next screen.
- Show your app to family and 'demo' it by flipping between your paper screens.
- Tell a grown-up one thing that surprised you.
Learning objectives
- Conceptualize a simple application with a clear purpose
- Design user interface elements: buttons, images, and text
- Understand screen-to-screen navigation
Kindergarten (ages 5–6)
Create a paper prototype of an app. Design multiple screens, plan the user flow, and test it with a real user.
Steps
- Plan your app: Who will use it? What problem does it solve or what fun does it provide?
- Draw 4 screens on separate papers: home screen, 2 feature screens, and a settings screen.
- Add a navigation bar at the bottom with buttons to switch between screens.
- Test your paper prototype: hold up screens and ask someone to 'use' your app. They point to buttons, you show the next screen.
- Did they get confused? Make notes and improve your design.
- Tell a grown-up one thing that surprised you.
Learning objectives
- Design an app solving a specific user need
- Create multi-screen paper prototypes with navigation
- Conduct basic usability testing with real users
Early elementary (ages 6–8)
Study user experience (UX) design: wireframing, user personas, user flows, and interaction design. Create a complete app prototype.
Steps
- Create a user persona: who is your app's target user? Age, needs, tech comfort, and goals.
- Draw a user flow diagram: map every screen and how users navigate between them.
- Create wireframes (simple sketches) for every screen. Focus on layout, not colors yet.
- Apply UX principles: big tap targets, clear labels, consistent navigation, and feedback for actions.
- Add visual design: colors, icons, and branding to your wireframes to create mockups.
- Present your app to family testers: explain the problem, your solution, the user persona, and demo the prototype.
- In one sentence, tell a parent or sibling what surprised you today.
Learning objectives
- Create user personas and user flow diagrams
- Design wireframes and mockups following UX principles
- Present app concepts with user-centered reasoning
Upper elementary (ages 8–10)
Master app design: user research, accessibility, and planning which features matter most in a first version of a product.
Steps
- Conduct light user research: talk with 2 or 3 people about a problem your app could solve. Identify pain points and needs.
- Study accessibility in app design: how do color-blind users, screen reader users, and users with motor disabilities interact with apps?
- Design your app with accessibility built in: sufficient contrast, clear labels, and alternative interactions.
- Plan a development roadmap: first-version features vs. future features. What do you build first, and what can wait?
- Create a complete app concept packet: user research notes, personas, wireframes, mockups, accessibility plan, and a first-version roadmap.
- End with a short founder-style explanation: who is the app for, what problem does it solve, and why would people want it?
- In one sentence, tell a parent or sibling what surprised you today.
Learning objectives
- Conduct user research to inform design decisions
- Apply accessibility principles to app design
- Create comprehensive app concept plans centered on user needs
- Practice explaining a product clearly and persuasively
Safety and evidence note
Read the full activity before beginning. An adult should supervise tools, heat, food, outdoor work, movement, and experiments as appropriate. Completion records that the activity was done; the child’s explanation, work sample, photo, or demonstration is stronger evidence of learning than a completion check alone.
Related coding activities
AI Explorers
Train a pretend 'robot brain'! Show it 5 cat pictures and 5 dog pictures, then test if it can guess a new one.
Algorithm Art
Follow step-by-step drawing instructions to create a picture. The instructions are your algorithm! Each step adds one shape or line.
API Restaurant
Play restaurant! The customer tells the waiter what they want, the waiter tells the kitchen, and the kitchen makes it. The waiter is the messenger — just like how computers talk to each other!
Automation Station
Act out your morning routine — wake up, brush teeth, get dressed, eat — and notice how you do the same steps EVERY day. That's a loop, just like computers use!