[Your area] · 11°C · Rain
Made for a day like today. Trench coats and waterproof jackets, a click away.
Shop raincoatsOn this page
Burton: should the homepage check the forecast?
Stores dress their windows for the weather. The website didn’t. One contained homepage tile joined local weather to visitor location, and was tested properly.
+11.6%
conversion uplift across all users, against a control
01 · The gaps
A shop window that couldn’t see the weather
The fix wasn’t more data about the customer. It was better use of data about their world.
1 · Context blindness
Shoppers react to weather in predictable ways: rain sells raincoats, sun sells T-shirts. The homepage ignored all of it.
2 · The data lived outside
No surveys or new tracking needed. Weather came from an external service; location came from the visitor’s IP. The work was the join.
3 · The gimmick risk
Context-aware design fails when it’s clever instead of useful. It had to be one useful thing in one place, with a number attached.
02 · Working out the pattern
How big, how fresh, and how to say it
Three decisions shaped the experience. Each time, the simpler option was also the one that could be measured cleanly.
Scope: how much of the site reacts to weather?
Freshness: when is the weather looked up?
Voice: how does the tile talk about the weather?
all three rotated: keep the tile fresh, keep the test clean
03 · Interaction logic
From IP address to raincoat
The pattern is a short chain of decisions. Every step has a fallback, so a failed lookup never shows a broken or wrong tile.
Locate
IP lookup finds the visitor’s area, in session.
Look up
A live weather service returns temperature and rainfall for that area.
Classify
Conditions map to a weather state, such as sunny or rain.
Match
The state picks a product range and a creative framing.
Render
The tile shows the condition in words, a message and one call to action.
Fallbacks
- No location found: show the default seasonal tile, not a guess.
- Weather service slow or down: show the default tile, so the page never waits on the weather.
- Conditions don’t fit a defined state: show the default tile.
The live page describes sunny and rain states. Other states and the exact fallback rules are my reconstruction of the pattern.
04 · The component
One tile, two weathers, three voices
The tile is one component with two inputs: weather state and framing. These are recreated specimens, not the original Burton UI. Location is a placeholder and the copy is illustrative.
Weather tile
WeatherTile · state × framing
Rain × data-led
Sun × data-led
[Your area] · 24°C · Sunny
Made for a day like today. Short sleeves and lightweight chinos, a click away.
Shop summer essentialsRain × brand-led
[Your area] · Rain
Showers on the way? B Prepared with our water-repellent range.
Shop rainwearRain × aspiration-led
[Your area] · Rain
[Photo · alt text describes the look]
Heavy knits and protective layers for damp afternoons.
Explore rainwear- Inputs
- Weather state (sunny, rain, default) and framing (data, brand, aspiration).
- Always
- The condition is written out in words. The icon and colour only support it.
- One CTA
- The button names the range it opens, and it matches the weather.
- Stable
- The tile is set at page load and doesn’t change while someone is reading it.
05 · Tokens
Weather as a theme, not a reskin
Only the tile’s top bar changes with the weather. Body text and buttons stay the same in every state, so contrast is checked once. These are the site’s own tokens, with the design’s weather colours mapped onto them; the ratios are recomputed on those tokens.
| Token | Value | Used by | Check |
|---|---|---|---|
| --color-sticky | #FFF3B8 | Sunny top bar | Body ink on it 15.2:1 |
| --color-text-secondary | #595959 | Sunny and rain location and condition line | 6.3:1 on the sunny bar and on the rain ground |
| --color-bg | #F2F2F2 | Rain top bar, photo ground | Body ink on it 15.2:1 |
| --color-text | #1C1C1C | Message text, CTA background | White CTA text 17.0:1 |
| --color-surface | #FFFFFF | Tile container, CTA text | Body ink on it 17.0:1 |
| tile.cta.height | 44px | Call-to-action button | Above the 24px minimum in 2.5.8 |
| --radius-sm | 18px | Tile container | Same in every state |
The live demo uses yellow and slate gradients behind the bar. Flat tokens are simpler to check and keep consistent.
06 · Accessibility
Contextual, and still predictable
A page that changes with the weather must still make sense to every visitor. These rules map the tile to WCAG 2.2 AA.
| Rule | WCAG 2.2 | In practice |
|---|---|---|
| Condition in words, not just an icon or colour | 1.4.1 Use of colour · 1.1.1 Non-text content | “11°C · Rain” is text. The icon is decorative and hidden from screen readers. |
| Aspiration photos describe the look | 1.1.1 Non-text content | Alt text names the outfit and the weather, so the framing still works without the image. |
| No auto-rotating carousel | 2.2.2 Pause, stop, hide | Framings vary between visitors or visits, never on a timer in front of someone. If they ever auto-rotate, add a pause button. |
| The tile doesn’t change while being read | 3.2.5 Change on request (AAA, used as a guide) | Weather is checked once at page load. No live update mid-session. |
| CTA names its destination | 2.4.4 Link purpose | “Shop raincoats”, not “Shop now”, so the link makes sense out of context. |
| The page never waits on the weather | Performance, not WCAG | A default tile renders if the lookup is slow, so assistive tech users don’t meet an empty slot. |
07 · Results
One tile, one number
+11.6%
Conversion uplift across all users, from the weather tile tested against a control
1
Contained mechanic on the homepage, with no sitewide changes
3
Creative framings rotated within the tile: data, brand and aspiration
Reading the number
The controlled test supports saying the tile caused the uplift. Because the three framings rotated, it can’t say which framing did the most work. Sample size and confidence interval aren’t published here.
Contextual personalization within the Arcadia Group for Burton. Proprietary metrics generalised for confidentiality.
08 · Reflection
What I learned
Context is a dataset
Personalization here wasn’t about collecting more on the customer. It joined the world around them to the moment they arrived.
The shop-window principle
Dressing the window for the weather is the oldest merchandising instinct. Online, it only needs to be simple and correct.
Contain the mechanic
Keeping it to one tile made the test clean and the launch safe. The best experiments match their surface area to their question.
If I ran it again
- Test the three framings against each other, not just together against control.
- Report the uplift with its sample size and confidence interval.
- Check the tile with screen-reader users, especially the aspiration framing with photos.