User Interface (UI) and User Experience (UX) DesignActivities & Teaching Strategies
Active learning works for UI/UX design because students must experience firsthand how design choices affect real users. When students build prototypes or test interfaces, they move beyond abstract theory to see how consistency, feedback, and hierarchy shape user interactions.
Learning Objectives
- 1Design a user interface for a mobile application that addresses identified user needs.
- 2Evaluate the usability of an existing software application using established heuristics.
- 3Explain the iterative nature of UI/UX design, referencing the role of user feedback.
- 4Compare different UI design patterns for common mobile application features.
- 5Critique a user interface based on principles of visual hierarchy and accessibility.
Want a complete lesson plan with these objectives? Generate a Mission →
Pairs: Empathy Mapping Workshop
Pairs select a mobile app scenario and create empathy maps for two user personas. They note goals, frustrations, and behaviors in four quadrants. Pairs then share maps with another pair for quick feedback and refinement.
Prepare & details
Design a user interface for a mobile application based on user needs.
Facilitation Tip: During the Empathy Mapping Workshop, circulate and prompt pairs to justify their assumptions about user needs with specific examples from their persona's context.
Setup: Flexible workspace with access to materials and technology
Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials
Small Groups: Paper Prototyping Challenge
Small groups sketch low-fidelity wireframes for a task in a sample app. One student acts as user, another as prototype, narrating interactions. Group records issues and iterates twice based on observations.
Prepare & details
Evaluate the usability of an existing software application.
Facilitation Tip: For the Paper Prototyping Challenge, remind small groups to test their designs with peers before finalizing, noting where navigation feels unclear.
Setup: Flexible workspace with access to materials and technology
Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials
Whole Class: Usability Heuristic Gallery Walk
Display screenshots of apps around the room with Nielsen's 10 heuristics posted. Students walk in pairs, evaluate two apps each, and post sticky notes with findings. Class discusses top issues as a group.
Prepare & details
Explain the importance of user feedback in the UI/UX design process.
Facilitation Tip: During the Usability Heuristic Gallery Walk, provide sticky notes for students to post feedback directly on prototypes, modeling how to give actionable critiques.
Setup: Flexible workspace with access to materials and technology
Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials
Individual: Feedback-Driven Iteration
Individuals design a simple UI screen, then swap with a partner for 5-minute think-aloud tests. Incorporate three pieces of feedback into a revised version and justify changes in a short reflection.
Prepare & details
Design a user interface for a mobile application based on user needs.
Setup: Flexible workspace with access to materials and technology
Materials: Project brief with driving question, Planning template and timeline, Rubric with milestones, Presentation materials
Teaching This Topic
Experienced teachers approach UI/UX design by making the invisible visible. They emphasize that design is iterative and user-centered, not a one-time task, and they scaffold activities to reveal how small changes impact usability. Avoid teaching aesthetics in isolation; instead, tie visual choices to user goals and accessibility standards. Research shows that students grasp heuristics better when they apply them to real problems rather than memorizing definitions.
What to Expect
Successful learning looks like students applying design principles intentionally in their work, explaining their choices with evidence, and revising based on user feedback. They should demonstrate the ability to balance aesthetics with functionality while prioritizing user needs.
These activities are a starting point. A full mission is the experience.
- Complete facilitation script with teacher dialogue
- Printable student materials, ready for class
- Differentiation strategies for every learner
Watch Out for These Misconceptions
Common MisconceptionDuring the Paper Prototyping Challenge, listen for students to claim 'This color scheme looks great.' Redirect them by asking, 'Great for whom? How does this help a user navigate to the checkout button?'
What to Teach Instead
During the Paper Prototyping Challenge, provide a scenario where a user struggles to find a key feature and ask students to revise their prototype based on this specific failure point.
Common MisconceptionDuring the Empathy Mapping Workshop, watch for groups to assume all users have the same needs. Redirect by asking, 'Would an elderly user with low vision find this text size readable? What evidence supports your answer?'
What to Teach Instead
During the Empathy Mapping Workshop, give each group a different user persona with specific accessibility needs, then have them present how their app accommodates those needs.
Common MisconceptionDuring individual feedback-driven iteration, observe students treating feedback as criticism rather than data. Redirect by asking, 'What part of this feedback helps us improve the navigation bar? How can we test the revised version?'
What to Teach Instead
During individual feedback-driven iteration, provide a template for students to categorize feedback into 'navigation,' 'visual clarity,' and 'accessibility,' then guide them to prioritize revisions accordingly.
Assessment Ideas
After the Usability Heuristic Gallery Walk, present screenshots of two different mobile banking apps. Ask students to identify which interface follows heuristics like consistency and feedback more closely, citing specific elements they observed during the walk.
After the Paper Prototyping Challenge, have students exchange wireframes with another group. Peers use a rubric to assess clarity of navigation, logical information flow, and obvious interactive elements, then identify one improvement for the original designer.
After the Empathy Mapping Workshop, give students a persona description and ask them to sketch a single screen for an app that meets the persona's goal. They label key UI elements and explain how each choice addresses the persona's needs, referencing the workshop's empathy insights.
Extensions & Scaffolding
- Challenge early finishers to redesign their app interface for a user with motor impairments, incorporating features like larger touch targets and voice commands.
- Scaffolding for struggling students: Provide a partially completed prototype with missing navigation elements and ask them to add only the most critical UI features first.
- Deeper exploration: Have students research and implement a color scheme that meets WCAG contrast guidelines for users with visual impairments, then test it with peers using a color blindness simulator.
Key Vocabulary
| User Persona | A semi-fictional representation of an ideal user, based on research and data, used to guide design decisions. |
| User Journey Map | A visualization of the steps a user takes to interact with a product or service, highlighting their actions, thoughts, and emotions. |
| Usability Heuristics | A set of general principles for user interface design, often used as a checklist to evaluate the ease of use of a system. |
| Wireframe | A basic visual guide representing the skeletal framework of an application's interface, focusing on layout and content placement. |
| Affordance | The perceived and actual properties of a thing, primarily those fundamental properties which determine just how the thing could possibly be used. |
Suggested Methodologies
More in Computational Thinking Project
Introduction to Software Development Life Cycle (SDLC)
Students will learn about the phases of the SDLC, from planning to maintenance, and different development methodologies.
2 methodologies
Planning a Digital Project
Students will learn to define the goals and features of a simple digital project, considering who it's for and what it needs to do.
2 methodologies
Designing a Simple Solution
Students will create a basic design for their digital project, outlining how different parts will work together and what the user interface will look like.
2 methodologies
Building and Iterating a Project
Students will learn to build their project in small steps, testing and improving it along the way based on feedback.
2 methodologies
Testing and Refining a Project
Students will practice testing their digital projects to find and fix bugs, ensuring they work as intended and are user-friendly.
2 methodologies
Ready to teach User Interface (UI) and User Experience (UX) Design?
Generate a full mission with everything you need
Generate a Mission