T‑Mobile
Super Bowl Landing Page
Custom execution for T‑Mobile's biggest digital moment of the year.
The Problem
There are two primary reasons people watch the Super Bowl: the game, or the commercials. T‑Mobile shows up with a major spot every year, but the digital side usually takes a back seat to the commercial, social outreach, and various marketing activities surrounding the day. In 2022, that changed... the "Save the Phones" campaign with Miley Cyrus and Dolly Parton needed a digital experience that matched the broadcast.
There was a catch though: T‑Mobile was running multiple spots throughout the game. Every time one aired, the landing page needed to surface that new video alongside the previous ones. All live while tens of millions of people were watching.
The Approach
The whole design was built around live updates. Multiple ads were scheduled throughout the broadcast, and each time one aired, that video needed to slot into a playlist component on the page.
Beyond the video playlist, there were components to help users understand how to switch to T‑Mobile and see what devices were available. New components and content had to match the "Save the Phones" campaign look and feel while still pushing people toward switching.
Since this was a custom execution outside of T‑Mobile's standard page templates, it opened the door for new animations and interactions: text glow and drop-in effects, hover and active states for video playback, and other details that brought the page to life beyond a typical marketing landing page.
I worked with the design team on new components and interactions, then built a high-fidelity prototype for leadership sign-off. After that, I wrote all the code (every component, interaction, and the page itself), shipped it to production, and coordinated with web ops on analytics, accessibility, and SEO.
The Result
Shipped on time for T‑Mobile's highest-visibility digital moment of the year. Live updates ran throughout the broadcast with zero issues. Video playlist, device components, switching flows, and custom animations all delivered on deadline across design, dev, web ops, analytics, and accessibility teams.
Video Demo
The Details
Tech Stack
Key Challenges
- Building a page that could accept live video content updates during the game without requiring a deploy or page refresh.
- Coordinating the timeline between commercial production (often finalized late) and digital execution deadlines.
- Shipping custom animations and interactions within AEM's constraints.
- Meeting accessibility and SEO requirements on an aggressive timeline while maintaining the creative vision of the campaign.
