Lesson: Designing the Digital World: Intro to UI/UX Principles

Materials Needed

• Paper (plain white or grid paper)
• Pencils, pens, and colored markers/highlighters
• Sticky notes (optional, for brainstorming)
• Timer (phone or clock)
• Access to a computer/tablet (optional, for digital prototyping tools like Figma or simple drawing software)
• Examples of well-designed and poorly-designed apps or websites (accessible via screen share or printout)

Learning Objectives (Tell them what you'll teach)

By the end of this lesson, you will be able to:

1. Define User Interface (UI) and User Experience (UX) and differentiate between them using real-world examples.
2. Identify and apply at least three core principles of good UX design (e.g., clarity, accessibility, efficiency).
3. Execute a simplified design thinking process to address a user problem.
4. Create a low-fidelity wireframe (prototype) for a basic application or website.

I. Introduction (20 Minutes)

Hook: The Frustration Test

Educator Talking Points: Think about the last time you used a website or an app that drove you crazy. Maybe you couldn't find the settings button, or a critical link was too small to click. Why do some apps feel smooth and intuitive while others are confusing and annoying?

That feeling—that frustration—is proof that someone didn't focus enough on the design. Today, we are learning the fundamentals of UI and UX design, which is the process of making technology look good and work logically.

Activity: Quick App Critique (We Do)

Instructions: Choose a common app (like a streaming service, a social media site, or a school portal). Spend three minutes writing down:

1. One thing that looks great (UI).
2. One thing that works really well (UX).
3. One thing that is annoying or hard to use (Bad UX).

Discussion/Q&A: Share your findings. Use this discussion to naturally introduce the formal definitions.

Success Criteria Check-In

You know you are successful in this section if you can clearly state the difference between the look of the app and the feel/function of the app.

II. Body: Content and Practice (60 Minutes)

A. Understanding UI vs. UX (I Do)

Educator Modeling: UI and UX are often confused, but they are partners. Think of them like a car:

• User Interface (UI): This is the car’s dashboard, the paint color, the seat fabric—what you see and touch. It’s the visual design, buttons, icons, and typography. (The aesthetics.)
• User Experience (UX): This is how the car feels to drive. Is the navigation screen easy to follow? Can you reach the volume knob without stretching? Does the car perform efficiently? (The functionality and usability.)

Analogy Recap: UI makes it pretty; UX makes it work right. Great products need both.

B. Core UX Principles (I Do/We Do)

Good UX design is built on common-sense principles. We will focus on three main ones:

1. Clarity: Do users know exactly what a button does before they click it? (e.g., Use standard icons like a magnifying glass for search.)
2. Efficiency: Can the user achieve their goal in the fewest steps possible? (e.g., Making the checkout process fast.)
3. Accessibility: Can people with different needs (poor vision, difficulty reading, etc.) use the product easily? (e.g., High contrast colors, large font options.)

Activity: Principle Scavenger Hunt (We Do): Review a few different websites (e.g., a news site, an online retailer, a municipal website). For each site, identify examples of the three principles being used well or being neglected.

C. The Design Thinking Process (You Do: Preparation)

We will use a simplified design thinking model to solve a real-world problem. This ensures your design isn't just cool, but actually useful.

Steps:

1. Empathize & Define (10 min): Identify a specific user and a specific problem.
2. Ideate (10 min): Brainstorm possible solutions.
3. Prototype (30 min): Sketch out the solution (wireframe).

Project Prompt (Choice & Autonomy): Choose ONE of the following problems to solve:

• Scenario 1 (Homeschool/Classroom Focus): Design an app that helps students track assignments, study resources, and collaborative project due dates across multiple subjects without feeling overwhelmed.
• Scenario 2 (Community/Training Focus): Design a public kiosk interface that helps visitors find local businesses, bus schedules, and public restroom locations quickly and easily.

Step 1 & 2: Empathize, Define, and Ideate (We Do/You Do)

Instructions: Use sticky notes or a piece of paper. Define your target user (e.g., "Sarah, a sophomore who has five different teachers and loses track of her reading materials"). List 5 crucial tasks your app must allow them to do. Brainstorm features that solve their problems.

Step 3: Prototyping – Low-Fidelity Wireframes (You Do)

Instructions: Wireframing is like drawing the blueprint of an app. It focuses only on structure and functionality—not color or fancy graphics. Use paper and pencil.

1. Sketch the main screen (the homepage or landing page).
2. Sketch at least two other critical screens (e.g., the "Assignment Tracker" screen and the "Settings" screen).
3. Use boxes, lines, and simple text to show where buttons, navigation bars, and content blocks go. (Don't worry about UI design yet; focus only on UX flow.)
4. Draw arrows or notes explaining how the user moves between the screens.

Success Criteria Check-In

Your prototype is successful if someone else can look at your three screens and understand exactly how to complete the primary task (e.g., "Find their next assignment due date") without asking you any questions.

III. Conclusion (20 Minutes)

A. Peer Review and Feedback (We Do)

Instructions: Present your prototype and design rationale (the 'Why'). If in a group, learners pair up and explain their design to each other. If solo (homeschool/individual training), the learner explains their design to the educator/trainer.

Feedback Focus:

• Does the design demonstrate Clarity?
• Is the user flow Efficient?
• What is the strongest UX feature?

B. Closure and Summary (Tell them what you taught)

Recap Questions:

• What is the difference between UI and UX? (UI is the looks; UX is the feels and function.)
• Why is it important to wireframe (use low-fidelity prototypes) before adding colors and graphics? (To focus on functionality and user flow before being distracted by aesthetics.)
• What is one new UX principle you will look for the next time you use a new app?

Reinforcement: Good design is invisible. If the user doesn't notice the design, it means it's working perfectly. Your goal as a designer is to make technology disappear so the user can focus on their actual task.

Assessment and Differentiation

Formative Assessment (Ongoing Checks)

• Observe the student’s ability to correctly identify UI vs. UX in the early app critique.
• Review the sticky notes/notes during the "Empathize & Define" stage to ensure the problem is clearly articulated.

Summative Assessment (Final Outcome)

• The Low-Fidelity Wireframe: Assessed on completeness and demonstrated understanding of efficient user flow (Objectives 3 & 4).
• Design Rationale: Assessed on the ability to articulate how the design meets the core UX principles (Clarity, Efficiency, Accessibility) (Objective 2).

Differentiation and Adaptability

Scaffolding (For learners needing extra support)

• Reduced Scope: Ask the learner to only design two screens instead of three, or focus only on the homepage functionality.
• Templates: Provide pre-printed mobile phone screen outlines or simple box templates to speed up the wireframing process.
• Guided Prompting: Walk through the definition of the target user/persona step-by-step before allowing independent brainstorming.

Extension (For advanced or motivated learners)

• High-Fidelity Challenge: If the learner finishes the low-fidelity sketches quickly, challenge them to move the design into a simple digital prototyping tool (like Figma, or even Google Slides) and begin adding basic UI elements (color scheme, typography).
• Accessibility Audit: Require the learner to specifically integrate and label three accessibility features into their design (e.g., high-contrast mode button, text size adjustment).
• User Testing Plan: Design five specific questions they would ask real users to test if their prototype is effective.