Activating T-Mobile Holiday Mode with Augmented Reality

How might we use AR to turn real-world spaces into moments of seamless, magenta joy?

The process

From early concept to final release, I worked across design, 3D, and development to deliver a seamless, scalable AR campaign for T-Mobile’s nationwide holiday takeover.

Lo Fi

I built a cohesive design system that extended T-Mobile’s brand into AR, creating reusable UI components, navigation overlays, and interaction states. Every element was designed to make interactions feel natural and intuitive.

Moodboard

Times Square Lo Fi Storyboard

OOH Diorama Lo Fi Storyboard

Hi Fi

To bring the AR experience to life, I built a 2D asset library of UI components, interaction states, and branded overlays, all designed to bring T-Mobile’s Holiday Mode campaign to life. I also provided 3D direction to ensure visual consistency across character models and interactive objects. Finally, I collaborated closely with developers to implement and refine the assets—ensuring every element met the vision with pixel-level precision.

2D Asset Library

Buttons + Interaction States

UI Pop-Ups

UI Billboards

Consistent 3D

Implementation

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

An issue in QA revealed the opportunity to elevate the experience.

During QA, we saw users struggling to follow the experience flow. I responded by designing a system of animated visual cues—arrows, motion, glow, and text—that subtly pulled focus where needed. With each round of iteration and testing, confusion turned into clarity.

Assets for Navigational Animations

Animations in Action

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Results

This project reminded me how small design choices—like motion, glow, and timing—can turn confusion into clarity. It was a chance to design at scale, solve real problems, and bring a little magic to everyday spaces.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

The experience’s success led to a second collaboration with T-Mobile: an F1-themed AR activation on the Vegas Strip. I led creative and UX direction, ensuring the experience landed—on screen and in person.

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }