Page that was critiqued

Critique (design-critique skill, using its report template)

# Design Critique Report

## Context
- **Design:** Pricing page for Tidewater Yoga, a fictional studio in the fictional town of Saltmere
- **Fidelity:** High-fi mockup (rendered HTML, screenshot at 1280x800)
- **Persona:** Local adult, curious about yoga, comparing ways to pay
- **Primary task:** Choose a pricing option and sign up
- **Review type:** Full critique

## First Impression (5-Second Scan)
- **What is this page about?** Pricing for a yoga studio, but only because the heading says "Our Pricing".
- **What is the primary action?** Unclear. Three identical "Sign up" buttons.
- **Where would you click first?** Nowhere in particular; eyes go to the first card on the left by reading order only.
- **Anything confusing?** Which plan is the sensible choice for me?

**Overall first impression:** Unclear

## Findings

### Finding 1: Three identical cards, nothing stands out
**Severity:** 3-Major
**Principle:** Visual Hierarchy; Von Restorff Effect; Choice Overload
**Location:** The three plan cards

**What's wrong:**
All three cards have the same size, weight, colour and button, so there is no focal point (Von Restorff Effect). The primary action is not the most dominant element because there is no primary action; every "Sign up" has equal weight.

**Why it matters for the user:**
Options are presented without any way to compare them or any steer toward a default, so users must read every line of all three cards to decide (Choice Overload, Selective Attention).

**Recommendation:**
Pick the plan most visitors should buy, make that card larger and filled with the accent colour, mark it with a short label such as "Best value", and make the other two buttons outlined or text-only.

### Finding 2: The price is the same weight as the plan name, and the heading outweighs both
**Severity:** 3-Major
**Principle:** Visual Hierarchy; Law of Prägnanz; Typography scale
**Location:** Card titles and price lines; page heading

**What's wrong:**
The page title is 22px, plan names are 18px and prices are 20px in a regular weight, so the three levels differ by only a few pixels (tiny differences in the type scale). The number users came for is not the most prominent thing on the card.

**Why it matters for the user:**
People scan, they don't read. Price is the main comparison criterion, and it is buried in a sentence ("$180 for 10 classes") that has to be read, not scanned.

**Recommendation:**
Set the price number at 36-48px bold with "per class", "for 10 classes", "per month" as a small caption beneath. Reduce the page heading's competition by using a clear H1 (28-36px) and a distinct card title size.

### Finding 3: The buttons and footer text fail contrast
**Severity:** 3-Major
**Principle:** Accessibility contrast (WCAG AA 4.5:1 text, 3:1 UI); H8
**Location:** "Sign up" buttons; footer line

**What's wrong:**
White 13px text on the pale green button (#8aa38a) measures 2.7:1, below the 4.5:1 needed. The 12px footer text (#889 on #eef1ee) is 3.1:1.

**Why it matters for the user:**
The one interactive element on the page is the hardest thing to read, and the footer holds the only mention of the intro offer for first-timers.

**Recommendation:**
Darken the button fill to reach at least 4.5:1 with white text, raise button text to 16px with a minimum 44px height, and move the intro offer out of 12px grey footer text into a visible banner above the cards.

### Finding 4: Plans can't be compared at a glance
**Severity:** 2-Moderate
**Principle:** Choice Overload; Law of Proximity / Similarity
**Location:** Feature lists

**What's wrong:**
Each list repeats "Any class" and "Mat hire available" and only the last two lines differ, so the real differences are hidden in repeated text. Centred lists in small 13px type are also harder to scan than left-aligned ones.

**Why it matters for the user:**
Users have to compare lines of text across cards to find what differs.

**Recommendation:**
Show the repeated items once, above the cards. Left-align lists. Show cost per class on each card (Drop-in $22, Pack $18, Monthly depends on use) so the saving is visible.

### Finding 5: Weak page structure and wasted space
**Severity:** 1-Minor
**Principle:** Law of Proximity; Goodwill (Krug)
**Location:** Whole page

**What's wrong:**
The heading, subtitle and cards are packed into the top half of the screen while the lower 40% is empty. The subtitle "Choose a plan that is right for you" is happy talk (H8). Nothing shows which nav item is current (H1).

**Why it matters for the user:**
Filler copy and a missing "you are here" cue add small amounts of noise.

**Recommendation:**
Replace the subtitle with a concrete line ("New here? Your first week is $20."). Highlight "Pricing" in the nav.

## What's Working Well
- Prices are visible up front, with no "contact us" gating (Goodwill).
- Button label is consistent across cards, and the plan names are plain words (H2, H4).
- The restrained green palette is calm and fits the subject.

## Missing States Check
| State | Present? | Notes |
|---|---|---|
| Default | Yes | |
| Hover | Not visible | No hover rule defined on buttons or cards |
| Focus | No | No focus style for keyboard users |
| Disabled | n/a | |
| Loading | No | |
| Error | n/a | |
| Success | No | Nothing shows what happens after "Sign up" |
| Empty | n/a | |

## Summary
| Severity | Count |
|---|---|
| 4 - Catastrophe | 0 |
| 3 - Major | 3 |
| 2 - Moderate | 1 |
| 1 - Minor | 1 |

### Top 3 Priorities
1. Give one plan clear dominance (Finding 1).
2. Make the price the largest thing on each card (Finding 2).
3. Fix contrast on the button and move the intro offer into view (Finding 3).

### Suggested Next Steps
- [ ] Redesign the cards with one recommended plan
- [ ] Re-run the 5-second test with three people who have never seen the page
- [ ] Test whether the intro offer should be the default call to action