Let shoppers steer
On a sensitive surface like price, letting people say who they are beats guessing. It’s direct, respectful and immediately rewarding.
On this page
Dorothy Perkins: why weren’t students saving?
The data already knew who was shopping. I helped the website show it, with experiences that were simple, under the shopper’s control, and backed by a business case each.
- My role
- Personalization specialist
- Team
- Capita · Qubit, for Dorothy Perkins (Arcadia)
- Methods
- Segment analytics · rule-based logic · merchandising
- Platform
- Qubit
50%
of UK sales segmented at peak (as reported)
01 · The gaps
What the data knew, and the site ignored
Finding data wasn’t the problem. Getting it to show up as something useful, in a way the board could trust, was.
1 · The offer nobody saw
Students got 10% off, but the discount surfaced at the end of the journey, long after the choice to buy was made.
2 · A national site for regional tastes
Product performance varied strongly by place. The site still ranked products for one national average that described nobody.
3 · “Personalization” as a buzzword
Treated as an abstract capability, it stalls. It needed to become concrete, tested treatments the board could read.
02 · The patterns
Two signals, two decisions
Each gap had more than one possible fix. The choice came down to one question: which option is most honest and most in the shopper’s control?
Student pricing: who decides you’re a student?
Merchandising: whose idea of “popular”?
on price, being open beats guessing
03 · Components and states
Every pattern, broken into states
Each experience became a small component with defined states and one rule for when it shows. These are recreated specimens with placeholder products, not the original Dorothy Perkins screens.
Student price toggle
StudentToggle · header
Off (default)
Student pricesOn
Student prices on · 10% offKeyboard focus
Student prices- Trigger
- The shopper taps it. Nothing is inferred.
- Effect
- Every price switches straight away, with no reload.
- Persists
- Across product listings and product pages, so the whole journey is framed by the discount.
- State
- Shown in words (“on · 10% off”), not just by colour or knob position.
Price
Price · regular | student
Regular
[Product name]
£50.00
Student
[Product name]
Student price £45.00was £50.00Student
- Rule
- The new price comes first. The old price is struck through and also says “was” for screen readers, because strikethrough alone isn’t read out.
- Announce
- One polite message when the toggle changes (“Showing student prices”), not one per product.
Trending near you
LocalTrending · located | fallback
Location known
Trending in [your area]
Change area- [Product]#1 added to bag
- [Product]#2
- [Product]#3
Location unknown
Popular across the UK
- [Product]#1
- [Product]#2
- [Product]#3
- Trigger
- An IP lookup finds the shopper’s region.
- Ranking
- Most added to bag in that region over the trailing 24 hours.
- Fallback
- No region found: show the national list rather than a wrong local one.
- Open
- The heading says where the list comes from. “Change area” is the version I’d add today.
Welcome and orientation
WelcomeBanner · first visit
First visit
Returning or dismissed
- Then
- Urgency banners on product pages and a welcome popup for first-time visitors.
- Now
- I’d make it an inline banner, not a popup, so it never covers focus or traps the keyboard.
04 · Tokens
The variables behind the components
A small token set keeps the student state consistent wherever it appears. The token names are illustrative, reconstructed for this case study, and every value is checked against WCAG 2.2 AA.
| Token | Value | Used by | Check |
|---|---|---|---|
| color.price.student | #5B3FD4 | Student price, “Student” note | 6.76:1 on white |
| color.price.was | #5C5C5C | Struck-through old price | 6.0:1 on the card ground |
| color.toggle.on.bg | #5B3FD4 + white text | Toggle, on state | 6.76:1. The live page uses #8B69FA, which is 3.82:1 and fails |
| color.toggle.off.border | #1F1F1F | Toggle outline, off state | Above 3:1 for 1.4.11 non-text contrast |
| size.target.min | 44px | Toggle, banner close, “Change area” | Above the 24px minimum in 2.5.8 |
| radius.toggle | 999px (pill) | Toggle | Matches the portfolio pill radius |
| motion.price.swap | 150ms fade | Price change | Switched off under reduced motion |
05 · Accessibility
Personalization the shopper can see and steer
A personalized page is only fair if everyone can tell what changed and why. These rules map the patterns to WCAG 2.2 AA.
| Rule | WCAG 2.2 | In practice |
|---|---|---|
| The toggle is a real button with its state exposed | 4.1.2 Name, role, value | aria-pressed plus visible “on” text, so the state isn’t carried by colour. |
| Price changes are announced once | 4.1.3 Status messages | One polite message, not one for every price on the page. |
| “Was” prices are readable, not just struck through | 1.3.1 Info and relationships | Hidden “was” and “student price” text tells screen readers which price is which. |
| Student mode stays on across pages | 3.2.3 Consistent navigation | Same toggle, same place, same state on listings and product pages. |
| Area filters work by keyboard | 2.1.1 Keyboard | If areas appear as tabs, use a proper tab list with arrow keys. Otherwise, a plain “Change area” link. |
| The welcome never hides focus | 2.4.11 Focus not obscured | An inline banner instead of a popup, with a 44px close button. |
06 · Results
From hidden discount to board-level strategy
50%
Of UK sales segmented at peak, with these experiences contributing (reported)
10%
Student discount moved from checkout to the first page a student sees
Board
Personalization became part of the brand’s growth strategy, discussed at board level
Program principle
Keep it simple, and build a business case for every experience before it ships.
Each experience passed a governance check before launch: a control holdout, a clear mechanic and a measurable outcome. Per-experience uplift figures aren’t published here. Segment personalization within the Arcadia Group; proprietary metrics generalised for confidentiality.
07 · Reflection
What I learned
Behaviour beats demographics
A national best-seller list describes nobody. Recent local behaviour kept the merchandising relevant without anyone guessing.
Governance is a feature
The control holdout wasn’t red tape. It made every idea state its mechanism and metric before launch, and that’s what earned the board’s trust.
If I ran it again
- Publish each experience’s lift against its control, with sample size and confidence interval.
- Design the eligibility check with students, so self-select stays easy and the discount is still fair.
- Test the toggle and the price announcements with screen-reader and keyboard users.