Problem
DC’s Metro had improved service after the pandemic, but needed to turn loyal riders’ satisfaction into advocacy. White64 reimagined WMATA’s straightforward ridership recap as Metro Rewind, a personalized, shareable year in review. The motion needed to make that data feel fun and personal, with the energy of Spotify Wrapped, while staying light enough to run smoothly on mobile.
Solution
The motion language grew from the system itself: trains easing into a station, and trains picking up speed as they pull away. Elements accelerate out of one moment and settle into the next, with a beat of anticipation before every payoff. Developed with White64’s creative team, that rhythm brought the experience’s hand-illustrated artwork to life. It starts with 18 tarot-inspired archetype cards that turn each rider’s habits into a personality, each rigged with its own way of moving.
Within the web experience, 21 animated neighborhood stamps turned discovery into an invitation. Based on each rider’s least-traveled areas, they highlighted nearby places to explore, encouraging more bus trips and visits to lesser-used stations. Each animation made revealing a new destination feel like a small reward. A series of animated globes gave riders another perspective on their year by visualizing the distance they’d traveled.
Everything was built in After Effects, and we used the LottieFiles platform to export files, debug animations online, and test across iOS and Android. The animations also extended beyond the web experience into Metro Rewind’s out-of-home campaign.
In its first weeks, Metro Rewind reached more than 112,000 users and generated nearly 35,000 social share actions. The project earned two ADC Merit Honors for User Experience Design and Illustration.
year
2024
role
Motion Designer
agency
White64
category
Motion Design
02
11
see also
