EP
04 of 08
Client work
04 — 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
Context

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 gameStill
Approach

What I did

01

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.

02

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.

03

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.

04

Handed the score onward

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

Performance

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.

Visuals

Selected media

Burger assembly game with the finished Big Mac and the ingredient tray below
Game one — build the Big Mac
Game one — build the Big MacStill
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 scentStill
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 ringStill
Retro terminal password game solved, with the on-screen keyboard below
Game four — crack the password
Game four — crack the passwordStill
Failure state of the password game, highlighting the wrong letter and revealing the right answer
The answer you got wrong
The answer you got wrongStill
Final game, choosing a nail design, with all five progress dots filled
Game five — nail art
Game five — nail artStill
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 earnsStill
Challenges section with cards for writing a song and building your own burger
Phase — the challenges
Phase — the challengesStill
Casting section listing cities and dates for the in-person events
Phase — the castings
Phase — the castingsStill
Recipe section introducing the new Big Mac Bacon with a carousel
Phase — the recipe
Phase — the recipeStill
Client work built at GUT — the artwork belongs to the brandEyman Pashaliev