Project: Design a Digital Interface

Active learning works here because students need to experience the real frustrations and successes of user-centered design. Sketching wireframes or testing prototypes helps them internalize principles like clear hierarchy and intuitive navigation in ways reading alone cannot.

• Year 9
• Technologies
• 4 activities
• 30 min–50 min

Learning Objectives

1. Design a digital interface for a specific user problem, incorporating user-centered design principles.
2. Critique the usability and accessibility of a peer's digital interface prototype, providing constructive feedback.
3. Justify design decisions for a digital interface by referencing user research data and feedback.
4. Analyze the effectiveness of different UX/UI elements in achieving user goals within a digital interface.
5. Synthesize user research findings into actionable design recommendations for an interface.

Project-Based Learning

⏱ 30 min·Small Groups

Empathy Mapping: User Research Rounds

Students interview peers about a problem like app navigation frustrations, then map findings on templates noting what users say, think, do, and feel. Groups share one insight per person. Compile class data to identify common needs.

Prepare & details

Design a user-centered solution for a given problem.

Facilitation Tip: During Empathy Mapping, circulate with targeted prompts like 'What evidence do you have that this user struggles with existing apps?' to push students beyond surface-level responses.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Project-Based Learning

⏱ 45 min·Pairs

Wireframing Relay: Layout Challenges

In pairs, sketch low-fidelity wireframes for key screens based on research. Switch partners midway to add annotations for usability. Pairs present one improvement to the class for quick votes.

Prepare & details

Critique the usability and accessibility of a peer's design.

Facilitation Tip: During Wireframing Relay, set a strict 10-minute timer for each round to force quick decision-making and prevent over-editing.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Project-Based Learning

⏱ 50 min·Individual

Prototyping Sprint: Tool Practice

Individuals build a digital prototype in Figma from wireframes, focusing on interactions. Test with a partner for 5 minutes, noting fixes. Iterate once based on feedback before final share.

Prepare & details

Justify design decisions based on user research and feedback.

Facilitation Tip: During Prototyping Sprint, demonstrate a live usability test with a student volunteer to model how to observe without guiding responses.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Project-Based Learning

⏱ 40 min·Small Groups

Critique Carousel: Peer Reviews

Display prototypes around the room. Groups visit three stations, using checklists to score usability and accessibility, then leave sticky note feedback. Designers review and prioritize changes.

Prepare & details

Design a user-centered solution for a given problem.

Setup: Flexible workspace with access to materials and technology

Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials

• Apply
• Analyze
• Evaluate
• Create
• Self-Management
• Relationship Skills
• Decision-Making

Teaching This Topic

Teachers should frame design as a problem-solving process, not an art project, to shift focus from aesthetics to evidence. Emphasize iteration by publicly revising your own work when students point out flaws, modeling resilience. Avoid giving direct solutions; instead, ask guiding questions like 'How would a color-blind user navigate this?' to build inclusive thinking.

What to Expect

Successful learning looks like students explaining design choices with evidence from user feedback, creating layouts that prioritize function over decoration, and revising prototypes based on peer critique. They should confidently justify decisions using specific accessibility and usability standards.

Watch Out for These Misconceptions

Common Misconception

During Empathy Mapping, students may assume visual appeal equals user satisfaction.

What to Teach Instead

During Empathy Mapping, have each group present their user’s top frustration from interviews. Challenge others to suggest solutions based on that pain point, not aesthetics, using the empathy map as evidence.

Common Misconception

During Wireframing Relay, students believe the first layout they try is the best solution.

What to Teach Instead

During Wireframing Relay, rotate partners between rounds and require them to explain why they changed or kept elements. Use a 'two-column pro/con' sheet to force reflection on trade-offs.

Common Misconception

During Prototyping Sprint, students think a prototype is final once built.

What to Teach Instead

During Prototyping Sprint, pause halfway to conduct a 2-minute 'think-aloud' test with a partner. Students must write one change they’ll make based on the stumbles observed, using the prototype’s clickable structure as evidence.

Assessment Ideas

Peer Assessment

After Prototyping Sprint, have students test each other’s prototypes using a 5-point checklist (navigation clarity, interactive elements, readability). Peers write one specific improvement on a sticky note and attach it to the prototype.

Exit Ticket

After Empathy Mapping, ask students to list two user research methods they used and explain how findings from one method changed their initial assumptions about the user’s needs.

Quick Check

During Wireframing Relay, walk the room and ask students to point to one element that demonstrates clear hierarchy. Quickly scan for consistent use of size, spacing, or contrast, and give immediate feedback on at least two groups.

Extensions & Scaffolding

• Challenge: Ask students to research and prototype an interface for a user with a specific motor impairment, documenting accessibility features in a short case study.
• Scaffolding: Provide pre-made components in Figma (buttons, menus) so students can focus on layout and flow rather than visual details.
• Deeper exploration: Invite a local UX designer to give feedback on the most improved prototypes, connecting classroom work to real-world practice.

Key Vocabulary

User Experience (UX)	The overall experience a person has when interacting with a product, system, or service, focusing on usability and enjoyment.
User Interface (UI)	The visual elements and interactive components that a user engages with on a digital product, such as buttons, screens, and layouts.
Wireframe	A basic visual guide used in interface design to represent the skeletal framework of a webpage or application, showing content structure and functionality.
Prototype	An interactive simulation of a final product that allows designers and users to test functionality and flow before full development.
Usability	The ease with which users can learn and operate a product to achieve their goals effectively, efficiently, and with satisfaction.
Accessibility	The design of products, devices, and services to be usable by people with disabilities, ensuring equal access and opportunity.