Site Inspector

Built for digital marketing, e-commerce and UX classes, and a good partner to Rank Rescue (SEO). The shop, pages and figures are fictional; the problems were planted for teaching.

1. Reloading is safe.The game remembers where you are in this browser tab. Closing the tab clears it.
2. There is no back button.Once you press Reveal, that page's flags are locked in. Read each team's numbers back first.
3. Five flags maximum.Number buttons fade out once a team has five. The fix-first pin must be one of the team's flags; the star turns pink.
4. Timers never start themselves.Press Start. The 2:30 clock is a guide; add 30 seconds if the room is still arguing productively.
5. Try the 5-second test.Before teams start, press ⏱ 5-second test: the page shows for five seconds, then blurs. Ask "What does this shop sell? What would you tap first?"

The best five flags are always the critical, the four majors, and no false flags. The minor problem is worth flagging only if a team is unsure about a major one. After each reveal the pins on the phone turn pink (critical), yellow (major), blue (minor) or green (fine), with coloured dots showing which teams flagged them.

Page 1: Home page (lenses: slow phone, contrast check)

Page 2: Product page (lenses: colour-blind view, screen reader, slow phone)

Page 3: Checkout (alert from marketing; lenses: price tracker, consent clicks, screen reader)

Typical scores on page 1

1. A planted, fictional site.Each page has exactly six problems and four red herrings. Real audits combine user testing, analytics and automated tools, and find problems nobody planted.
2. Severity is a judgement.Critical, major and minor reflect the designer's view of impact on the task, how many people are affected and legal risk, in the spirit of common usability severity scales. Practitioners often disagree on exact ratings; that disagreement is a good discussion.
3. Points are a teaching device.Real prioritisation also weighs the cost and effort of each fix.
4. Speed figures are illustrative.They are presented as real-user (field) data at the 75th percentile, the way Google assesses Core Web Vitals. The thresholds are real; the shop's numbers are invented.
5. The lenses are approximations.The colour-blind view simulates one common type (deuteranopia). The screen reader transcript is simplified; real screen readers such as VoiceOver and NVDA announce pages in their own ways.
6. One page per round.Real evaluations follow whole journeys across devices and browsers.
7. UK rules, simplified.Legal points describe UK rules in 2026 in plain language. They are not legal advice.

1. 0

   Set the scene and form teams

   1.5 min

   

   Say

   "You're four digital agencies pitching for an audit contract. The client says their site 'isn't converting'. Ten pins a page. Some are real problems, some are fine. You get five flags, and you must tell the client what to fix first."

   Students

   Four teams with paper and a pen. Encourage them to use their own phones to imagine the page in their hands.

2. 1

   Page 1: Home page

   4 min · timer 2:30

   

   

   Click

   1. Optional: ⏱ 5-second test, ask the questions, then Show the page again.
   2. Start the timer. At 0:00 tap each team's five numbers, then its fix-first.
   3. Press Reveal the audit.

   Watch for

   • Pin 5 sits on the evidence pack, not the phone. Teams who read the data spot the speed problem.
   • White space (8) and the menu icon (1) attract false flags. That's the point.

   

3. 2

   Page 2: Product page

   4 min · timer 2:30

   

   

   Say

   "Think about people who don't browse the way you do."

   Watch for

   Read the screen reader transcript aloud in a flat voice. It lands better than any slide on accessibility.

4. 3

   Page 3: Checkout, with an email from marketing

   4 min · timer 2:30

   

   Say

   "The developer did exactly what marketing asked. Is that a defence?"

   Watch for

   After the reveal, use 🧾 Price tracker (£89 becomes £104.44) and 🍪 Consent clicks (1 tap to accept, at least 4 to reject).

5. 4

   The final report and debrief

   2 to 5 min

   

   

Share lab.yingwu.co.uk/site-inspector/#solo for homework or revision. The player audits against three rival agencies with blind spots: Pixel Pushers judge by looks and flag design choices, Compliance Bots hunt accessibility and legal problems but miss usability, and the Senior UX Lead is balanced but not perfect. Their flags have some randomness. Winning in solo mode earns the "Lead auditor" badge; finishing any game earns "Site inspector".

1. What did teams miss? Usually accessibility (colour-only information, alt text, unlabelled buttons) and speed (the evidence pack). We evaluate with our own eyes, devices and fast Wi-Fi, so we miss what we don't experience. Structured lenses and tools fix that.
2. Preference or problem? A problem stops or slows people doing their task, excludes some people, or breaks a rule; a preference is a matter of taste. Evidence settles it: user testing, analytics, standards. White space, a menu icon and long-but-scannable descriptions are trade-offs, not errors.
3. What goes first? Severity (does it block the task?), reach (how many people?), legal risk, and effort. The surprise fee is critical because it is unlawful and the top reason people abandon checkouts; the tiny "Add to bag" is critical because without it nothing else matters.
4. Automated or human? Tools such as Lighthouse can flag low contrast, missing alt text, buttons without names, small targets and measure LCP and CLS. They can't judge whether alt text is useful, whether labels make sense, whether a fee is fair, whether a cookie banner is balanced, or whether a size guide is missing. You need both.
5. Conversion vs compliance? Consent obtained through an unbalanced design is a legal risk, and the ICO has told major websites to make rejecting as easy as accepting. A lower, genuine consent rate is the real number to plan with; the trust you keep is worth more than the data you lose.

• Baymard Institute (2026) How to reduce cart abandonment. baymard.com
• Competition and Markets Authority (2025, updated 2026) Price transparency (CMA209). gov.uk
• Fogg, B.J. (2002) Stanford guidelines for web credibility. Stanford Persuasive Technology Lab. credibility.stanford.edu
• Google Search Central (n.d.) Avoid intrusive interstitials and dialogs. developers.google.com
• MeasuringU (n.d.) Rating the severity of usability problems. measuringu.com
• Nielsen Norman Group (n.d.) 10 usability heuristics for user interface design. nngroup.com
• Spiegel Research Center (2017) How online reviews influence sales. Northwestern University. spiegel.medill.northwestern.edu
• The Consumer Contracts (Information, Cancellation and Additional Charges) Regulations 2013, regulation 40. legislation.gov.uk
• The Record (2023) UK data regulator tells websites to offer "Reject all" cookies option, 21 November. therecord.media
• W3C (2023) Web Content Accessibility Guidelines (WCAG) 2.2. w3.org
• web.dev (n.d.) How the Core Web Vitals metrics thresholds were defined. web.dev

A simplified classroom model: the severities and points are teaching devices. Tayside Trails is fictional, and its problems were planted.