EP
03 of 08
Client work
03 — Frontend, at GUT

Monopoly —collect and redeem

A nationwide promotion run with Monopoly: peel a sticker off a cup, enter the code, and the campaign decides what you just won — a property for your collection, an instant prize, or another sticker. The biggest thing I have worked on.

ClientMcDonald’s Spain × Monopoly
Stack
Vue 3PiniaREST APIsTypeScript
Context

What the problem was

Half of this campaign is physical — a sticker on a drink or a McFlurry, in every restaurant in the country. The other half has to accept whatever code is under it, work out what it is, file it somewhere that survives closing the page, and tell someone standing in a queue what they have won in one screen. That is not a landing page: it is a code entry, a collection, a prize wallet, a set of draws and a rule book, all live at once and all national.

Campaign home screen promising millions of prizes, with the first steps for taking part below
How to take part
How to take partStill
Approach

What I did

01

Made the code the way in to everything

One redemption path, several outcomes: a property that joins a colour set, an instant prize, or a second-chance sticker that starts the whole thing again. What you see is decided by what the code turns out to be, not by which button you pressed.

02

Gave the collection somewhere to live

Properties group into their sets and persist against the account, so progress survives closing the page and coming back a week later — which is the entire point of a collect-and-win promotion. The tab bar carrying home, redeem, prizes and properties is the campaign’s whole surface.

03

Wrote every dead end

A code already used, a code that is not valid, a win landing on someone who is not logged in. Each one is a screen with its own copy and its own way forward, because at national scale every one of those is thousands of people.

04

Built it as a set of pages, not one flow

Prizes, draws, collections and rules each have their own route, so the promotion could change what it was offering inside its run without the campaign being rebuilt around it.

Performance

How it stays fast

  • Redemption is a single round trip; the result screen renders from what comes back
  • Collection state held for the session and refetched on redemption rather than on every view
  • Prize artwork loaded per screen, so the redeem path stays light on a phone in a restaurant
Outcome

It ran nationwide for the length of the promotion — codes in, properties collected, instant prizes and draw entries out — with everyone’s collection intact across the weeks they kept coming back to it.

Visuals

Selected media

Win screen showing a newly collected property card and the prize its set is worth
A property joins the collection
A property joins the collectionStill
Win screen for a property from a different colour set, with its own prize preview
Another set, another prize
Another set, another prizeStill
Two collected property cards side by side with a route through to the prizes
The collection so far
The collection so farStill
Second-chance win showing two unpeeled stickers ready to open
Another sticker, second chance
Another sticker, second chanceStill
State for a win that cannot be claimed until the visitor identifies themselves
Won, but not signed in
Won, but not signed inStill
Instant prize reveal with the product won and the route to claim it
An instant prize
An instant prizeStill
Client work built at GUT — the artwork belongs to the brandEyman Pashaliev