Day 2: Website Revamp — Audit a Real Site

Daily Learning Contract

• Topic: User Experience
• Objective: Students will identify UX design as an Information Technology career opportunity by analyzing how a website supports or blocks a user's goal and proposing evidence-based improvements.
• TEKS: d(1)(C)
• Demonstration of Learning: Completed UX audit with three strengths, five observable problems, three fixes with user benefits, and one redesigned page sketch; the Rosa mini-case names two UX problems and justifies the highest-impact fix.

Lesson Overview

Warm-Up (5 min)

WARM-UP: Pick the BEST website you have ever used and the WORST website you have ever used. What made the good one good? What made the bad one bad?

Quick share. Sort responses on the board: easy to find, fast loading, and works on a phone versus cluttered, slow, confusing, or broken. Students will use that list as UX designers auditing the practice site.

Activity 1: Step 1 — Learn About UX (12 min)

Source: (FYF p. 28: "Website Revamp", Step 1: Learn About UX)

Open the workbook to page 28. Read the opening together: UX, or User Experience, is the overall feeling you get when you interact with a website. Good UX means a site is smooth, logical, and helpful. Bad UX leaves you frustrated, lost, or annoyed. A UX Designer's job is to prevent that frustration.

Then read the scenario: students are a UX Designer, and a company has asked for help because their website is confusing and customers are leaving before they buy anything.

Walk the two lists in Step 1 side by side. Good UX: easy navigation with clearly labeled menus, clear buttons and links that tell you what happens when you click, fast and simple paths that finish a task in a few steps. Bad UX: confusing navigation with hidden links and no way back home, cluttered design with too much text and pop-ups, unclear instructions on buttons and search bars, and broken or slow features.

After reading, ask three or four students to name one good-UX rule and one bad-UX problem. Model one chain using the practice-site image: observable problem -> specific fix -> user benefit. Keep the example about a task the user is trying to complete, not personal taste about colors or style. This removes the need for a teacher to find unrelated websites before class.

Activity 2: Steps 2-5 — Investigate, Audit, and Fix (27 min)

Source: (FYF pp. 28-29: "Website Revamp", Steps 2-5)

Step 2: Investigate a Website (5 min). Project the practice site named on Climber Notes "Website Revamp" slide 2 and put it on student Chromebooks. The site is Paws and Claws at pawsandclaws.hatsandladders.com. Students click through it as first-time customers trying to complete a purchase. If the site is unavailable, switch immediately to the locked fallback images.

Stop and Jot: 90 seconds of sticky notes before any list-making, one thought per note, with two stems on the board: "The first thing I tried to do was _" and "I got stuck when ___." This is the workbook's own Step 2 task.

Step 3: Be a UX Detective (9 min). Students fill in the two workbook lists on page 29: at least three things that work well and at least five observable problems.

Step 4: Fix the Problem (9 min). Students choose three of their five problems and complete the workbook's three-column table: Problem, Your Fix, and How Your Fix Will Help Users. The third column distinguishes a supported design decision from a complaint.

Step 5: Sketch a Better Design (4 min). On a separate sheet of paper, students sketch one improved page and label the change connected to one of their three fixes.

Active Monitoring: Walk one lap at minute 12 targeting the 5-problems list (every student has five, not two) and a second lap at minute 20 targeting the How Your Fix Will Help Users column. If a lap turns up mostly blank third columns, pause the room and model one fix out loud using a problem from a student's own list.

Evidence question: Why is "this helps users because..." stronger evidence than saying a page looks better? Use one fix from your audit.

Exit Ticket (6 min)

EXIT TICKET (Mini-Case / Scenario Application) · Printable PDF:

Scenario: Rosa is 16 and just opened a small tutoring business. Her website has one long page. The "Sign Up" button is gray and sits at the very bottom, under three paragraphs about her hobbies. The menu at the top says "Stuff," "More Stuff," and "Click Here." Parents keep phoning Rosa instead of signing up online.

1. Name TWO bad UX problems on Rosa's site. Use words from today's lists.

Problem 1: ________

Problem 2: ________

2. Pick ONE of your two problems. Write your fix and how it helps users.

My fix: ___________

How it helps users: ___________

3. Which fix would bring Rosa the most new students? Why? One sentence. (d(1)(C))

Differentiation

• Support: Hand out the printed Website Audit Scaffold (Printable PDF). It carries a worked model at UX Designer detail, starts the first 2 of the 5 problems by naming their category and opening the sentence, and prints the fix-column stem: "This helps users because they can now _____."
• Extension: Students who finish early audit a second page of the site and check whether the same problem shows up twice. A problem that repeats on every page is a design problem, not a page problem.
• ELL: Bilingual UX vocabulary: Experiencia del usuario = User Experience, Navegación = Navigation, Botón = Button, Menú = Menu, Confuso = Confusing, Desordenado = Cluttered. Allow ELL students to write the fixes in Spanish.