[All case studies]

Garmin vívoactive

A full-page takeover for the Garmin vívoactive at Undertone, with Garmin's assets componentized around a live activity API feed. It shipped under a hard ad-serving file-size cap with the drop-in and overlay motion intact.

Jeffrey Liu5 min read
Garmin vívoactive takeover ad unit
Role
Creative Developer
Client
Garmin
Format
Page Grabber
Agency
Undertone

The Garmin vívoactive Page Grabber was an OMMA 2017 finalist in Rich Display Media. The unit is a full-page takeover that drops the GPS smartwatch into the page and lands a fellow fitness fan's distance over the past 24 hours.

The unit had to carry a live Garmin activity feed on the face, hold the drop-in and overlay motion, and still clear the ad-serving file-size limit.

How we built it

I took Garmin's creative assets and componentized them for a Page Grabber that had to carry a live feed and this motion system. Componentizing meant the face, the color and black-and-white states, and the overlay that crosses them stayed separate pieces rather than one baked comp, so live numbers could land on the face without re-cutting the motion. I owned wiring the feed into the face and packing the unit to serve. The feed came from Garmin's activity API, which pulled averages across the sports we were showing so the metrics landed on the face at the mark for that time of day.

Animation ran on GreenSock with CSS3 layered in, color and black-and-white states crossing under a shared overlay at different page lengths. Daniel Englert, my manager, owned a lot of the motion judgment on the unit, and I applied what I picked up from him on animation and motion design in the same sitting. I was his first hire, and for a stretch the two of us were the only creative developers at Undertone, sitting next to each other and hand-coding formats from scratch before productizing them onto the ad serving platform, so a lot of the process was ours to invent.

When the hard file-size limit blocked what the unit needed, the loop widened to three. Crow, lead engineer and architect, expanded the limit and put the standards into the framework, which moved the constraint off the creative and onto the platform. I pushed to experiment further while he held what the platform could safely serve.

What transferred

The part that carries to later projects is the mental model, especially how we laid out a shared file system and directory for this kind of unit. Delivery itself stayed manual at the time. We passed zips back and forth and packed files down under the weight limit while we worked out where automation would help.

Later builds started from that directory and handoff shape instead of re-deriving both per campaign.

How It Works

1
~2s

Drop-in

Full-page takeover loads. The vívoactive drops into the viewport, then the landing surface fades in behind it.
2
~3s

Form to function

Color and black-and-white states cross via an overlay. The watch face lands on the activity mark for that time of day.
3
Feed

Live metrics

A Garmin activity API feed averages sport-specific numbers into the face. Distance and related metrics read as a snapshot of a fellow fitness fan over the past 24 hours.
4
End State

Shop

Product CTA and Garmin click-through once the motion settles.

Engineering

  • Garmin activity API

    Live activity data from Garmin's API pulls into the watch face so the counters land on a live mark for the time of day.
  • GreenSock + CSS3

    Motion ran on GreenSock with CSS3 animations layered in. Color and black-and-white states animate at different page lengths under a shared overlay while the watch settles.
  • Weight limit

    The ad serving platform enforced a hard file-size cap, and the unit hit it while I was packing to serve. Crow, lead engineer and architect, expanded the limit and encoded the standards in the framework. I packed the unit down under the new ceiling so it served without breaking.

More case studies

  • First DayOriginal AI animated short through Runway Builders (1 of 65). Character consistency across Bao and cast via turnarounds, set plates, and an AI-native film pipeline.Soon
  • Champions of CashOMMA 2017 finalist New York Lottery campaign. Two rich-media units and a Facebook Canvas retarget built as creative developer at Undertone for the 3D sports game Champions of Cash, with a timed venue rotation, three tagged exit paths, and responsible-gaming copy legible in every state. The three units together met the campaign's KPIs.Soon

Get in touch

From idea to production across design, creative, and engineering. I ship end to end, and the vision stays company-first the whole way.

jeffkliu@gmail.com