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

PersonalisedCoca-Cola cans

Photograph your group, let the page find the faces, name each friend — and the names come back printed on cans, ordered so the middle one reads closest and the outer ones step away.

ClientCoca-Cola × McDonald’s Spain
Stack
Vue 3Face detectionCanvasGSAP
Context

What the problem was

The mechanic only works if the composite looks like it belongs in the photo. Any group, any lighting, up to five people, on a phone camera: the faces have to be found, the names have to attach to the right ones, and the cans have to sit in the picture at a believable depth rather than in a row across it.

Landing screen showing an example group photo with five named cans and the four-step instructions
The mechanic, in four steps
The mechanic, in four stepsStill
Approach

What I did

01

Detected the faces, then let the user correct them

Detection places the cans; the person holding the phone names them. The machine does the tedious part and the human does the part it would get wrong.

02

Ordered the cans with maths, not by hand

Scale and placement come from each can’s distance from the centre of the group, so the middle one is largest and the ones either side taper — and the same curve holds whether there are two names or five, which is what keeps it from looking authored case by case.

03

Composited to one shareable image

The photo, the cans and the group’s title are drawn together into a single picture, because the thing people send each other is the point of the campaign.

04

Ended on the offer

Title the photo, save the offer, share it — the reward is attached to the artefact rather than parked on a screen of its own.

Performance

How it stays fast

  • Detection runs against a downscaled copy of the photo; full resolution is only used for the export
  • The composite is drawn once at export size rather than on every frame
  • Camera and canvas work confined to the step that needs it, so the landing stays light
Outcome

A photo mechanic that holds up on a real group photo taken in a restaurant, and produces something people had a reason to send on.

Visuals

Selected media

Form for naming the group and each of the five friends in the photo
Naming each face
Naming each faceStill
Finished photo with the named cans, the centre one largest, and the offer saved
Cans ordered by depth
Cans ordered by depthStill
Reward screen showing the prize beside the finished group photo
The reward it earns
The reward it earnsStill
Client work built at GUT — the artwork belongs to the brandEyman Pashaliev