Introduction to UX/UI Design

Active learning helps students move beyond abstract concepts by stepping into users’ shoes. For UX/UI design, this means experiencing firsthand how empathy and research shape meaningful solutions. Collaborative activities like interviews and persona building make invisible processes visible and build foundational skills that stick.

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

Learning Objectives

1. Compare and contrast the core principles of User Experience (UX) and User Interface (UI) design.
2. Explain the significance of human-centered design in developing effective digital products.
3. Analyze the impact of positive and negative UX on user engagement with a given digital product.
4. Design a simple wireframe for a digital product, considering basic UI principles.

Think-Pair-Share

⏱ 30 min·Pairs

Think-Pair-Share: The Empathy Interview

Students interview a partner about a frustrating digital experience they've had (e.g., a confusing app). They then work together to create an 'Empathy Map' that captures what the user was thinking, feeling, saying, and doing during that experience.

Prepare & details

Differentiate between User Experience (UX) and User Interface (UI) design.

Facilitation Tip: Before the Think-Pair-Share, model a short empathy interview with a student to set expectations for open-ended questioning.

Setup: Standard classroom seating; students turn to a neighbor

Materials: Discussion prompt (projected or printed), Optional: recording sheet for pairs

• Understand
• Apply
• Analyze
• Self-Awareness
• Relationship Skills

Inquiry Circle

⏱ 50 min·Small Groups

Inquiry Circle: Persona Development

Groups are given a project brief (e.g., a community garden app) and must create three distinct 'Personas', fictional users with different ages, abilities, and goals. They present these personas to the class, explaining how each one's needs will shape the final design.

Prepare & details

Explain why human-centered design is crucial for successful digital products.

Facilitation Tip: Provide sentence starters on cards during the Collaborative Investigation so students focus on observable behaviors rather than assumptions.

Setup: Groups at tables with access to source materials

Materials: Source material collection, Inquiry cycle worksheet, Question generation protocol, Findings presentation template

• Analyze
• Evaluate
• Create
• Self-Management
• Self-Awareness

Gallery Walk

⏱ 40 min·Whole Class

Gallery Walk: User Journey Maps

Students map out the steps a user takes to complete a task on a website. These maps are displayed around the room, and peers use 'pain point' stickers to identify where the user might get confused or frustrated.

Prepare & details

Analyze the impact of good versus bad UX on user engagement.

Facilitation Tip: Before the Gallery Walk, assign roles such as Timekeeper and Observer to keep the walk focused and productive.

Setup: Wall space or tables arranged around room perimeter

Materials: Large paper/poster boards, Markers, Sticky notes for feedback

• Understand
• Apply
• Analyze
• Create
• Relationship Skills
• Social Awareness

Teaching This Topic

Teachers should avoid presenting UX/UI as a set of rules and instead frame it as a mindset of inquiry. Use real-world examples where poor design caused frustration, then guide students to analyze what went wrong. Research shows that students learn empathy more deeply when they interview real users, so whenever possible, bring in community members or use recorded testimonials. Avoid letting students default to designing for themselves by explicitly assigning personas that challenge their assumptions.

What to Expect

By the end of these activities, students will articulate user needs using real tools like personas and empathy maps. They will critique interfaces with UX principles in mind and produce low-fidelity wireframes that reflect user-centered design decisions.

Watch Out for These Misconceptions

Common Misconception

During Think-Pair-Share: The Empathy Interview, students may assume their own experiences are universal.

What to Teach Instead

After the interview, have each pair present one surprising insight from their user’s responses and explain how it challenged their initial assumptions.

Common Misconception

During Collaborative Investigation: Persona Development, students might focus on surface details like favorite colors instead of core needs.

What to Teach Instead

Ask groups to justify each persona trait by pointing to evidence from their empathy interview or research notes.

Assessment Ideas

Exit Ticket

After the Think-Pair-Share: The Empathy Interview, ask students to write one insight they gained about users different from themselves and one question they still have about user research.

Discussion Prompt

During the Gallery Walk: User Journey Maps, ask each group to share one frustration their persona experiences in the journey and explain how their persona might respond to that frustration.

Quick Check

After Collaborative Investigation: Persona Development, collect each group’s persona and quickly scan for three evidence-based traits (e.g., 'uses screen reader weekly') to confirm students are grounding their personas in research.

Extensions & Scaffolding

• Challenge: Ask students who finish early to redesign a persona profile for a user with a disability using WCAG guidelines.
• Scaffolding: Provide a partially completed empathy map template for students who struggle to identify user behaviors or frustrations.
• Deeper exploration: Have students compare two versions of the same app interface and create a 3-minute presentation explaining which version better meets user needs, referencing their personas.

Key Vocabulary

User Experience (UX) Design	The process of creating products that provide meaningful and relevant experiences to users. It focuses on the overall feeling a user has when interacting with a product.
User Interface (UI) Design	The design of the visual elements and interactive components of a digital product. It focuses on how a product looks and how users interact with its screens and elements.
Human-Centered Design	An approach to problem-solving that puts the needs, desires, and limitations of the end-user at the center of the design process.
Wireframe	A basic visual guide used in UX/UI design to represent the skeletal framework of a website or application. It outlines the structure and layout of content and functionality.
Persona	A fictional character created to represent a user type. Personas help designers understand user goals, motivations, and pain points.