EP
Client work
Frontend, at GUT

Big Macloyalty test

Five mini-games, five different mechanics, scoring a loyalty percentage that turned into an offer in the app, inside a page that kept revealing new sections as the campaign moved through its phases.

ClientMcDonald’s Spain
Stack
Vue 3PiniaGSAPTypeScript

What the problem was

A campaign webview living inside the client’s official app. It had to entertain first (five games in a row, played on a phone, by people who came for a discount) and then hand a score back so the app could hand back the right offer. On top of that it was not one page: challenges, in-person castings and the recipe block appeared on their own dates as the campaign unfolded.

Campaign landing screen asking how big your love for the Big Mac is, with a start button
The test, before the first game
The test, before the first game

What I did

Five mechanics, one shell

Assembling the burger from a tray of ingredients, picking a scent off a rear-view mirror, finding a hidden ring in a photo you pan and zoom, cracking a password on a retro terminal, choosing a nail design. Each game owns its own interaction; the shell around them owns the progress dots, the confirm step and the score, so a game could be reworked without touching the run.

Treated a wrong answer as a screen

The password game does not just mark you wrong: it highlights the letter that was off and shows what the answer should have been. Every game has a completed state, and the ones you can fail have a failed state written as carefully as the win.

Put the campaign on a calendar

Challenges, castings and recipes were sections that appeared on their dates, so one build covered every phase of the promotion instead of a deploy per reveal.

Handed the score onward

The run ends on a percentage and a single route out: the offer waiting in the app for that score.

How it stays fast

  • Game assets loaded per game, not up front; the shell is interactive before any of them arrive
  • Touch-first controls with hit areas sized for thumbs, tested on real phones
  • Run state in Pinia, so leaving a game and coming back does not restart the test
Outcome

Five playable games shipped as one campaign page that ran through every phase of the promotion without a rebuild, on phones, inside a webview.

Selected media

The games

On desktop
Game one, the ingredient tray
Game one, the ingredient tray
Game one, the ingredient tray
Game four, the terminal
Game four, the terminal
Game four, the terminal
Game five, nail art
Game five, nail art
Game five, nail art
The score
The score
The score
The route into the app
The route into the app
The route into the app
Burger assembly game with the finished Big Mac and the ingredient tray below
Game one, build the Big Mac
Game one, build the Big Mac
Game showing an air freshener hanging from a rear-view mirror, with alternatives to choose from
Game two, pick the scent
Game two, pick the scent
Game where a photo is panned and zoomed to drop a marker on a hidden ring
Game three, find the ring
Game three, find the ring
Retro terminal password game solved, with the on-screen keyboard below
Game four, crack the password
Game four, crack the password
On a phone
The test, before the first game
The test, before the first game
The test, before the first game
Game one, the ingredient tray
Game one, the ingredient tray
Game one, the ingredient tray
Game one, the burger assembled
Game one, the burger assembled
Game one, the burger assembled
Game two, pick the scent
Game two, pick the scent
Game two, pick the scent
Game three, find the ring
Game three, find the ring
Game three, find the ring
Game three, a second photo
Game three, a second photo
Game three, a second photo
Game four, the terminal
Game four, the terminal
Game four, the terminal
Game four, the password accepted
Game four, the password accepted
Game four, the password accepted
The offer the score earns
The offer the score earns
The offer the score earns
Failure state of the password game, highlighting the wrong letter and revealing the right answer
The answer you got wrong
The answer you got wrong
Final game, choosing a nail design, with all five progress dots filled
Game five, nail art
Game five, nail art
Result screen showing five out of five correct and the route to the offer
Score, and the offer it earns
Score, and the offer it earns

The campaign phases

Challenges section with cards for writing a song and building your own burger
The challenges phase
The challenges phase
Casting section listing cities and dates for the in-person events
The castings phase
The castings phase
Recipe section introducing the new Big Mac Bacon with a carousel
The recipe phase
The recipe phase
Client work built at GUT. The artwork belongs to the brand.Eyman Pashaliev