Overview
My Role
Team Spotlight
Product Design
Motion Design
Product Development
Product Development
Business & User Goals
01
Build an effective ad experience user flow that informs users about the new playoffs feature, engages them, and creates a meaningful Popeyes playoffs celebration experience.
02
Ensure marketing success for Popeye's $1.88M deal with us by creatively incorporating their logo and brand into the three sequences of the ad experience we are placing on our app.
Challenges
01
The main UX and visual design challenge was to create a Popeyes ad experience within the ESPN Fantasy Playoffs user flow without making users feel they were intrusive ads.
02
Aligning stakeholders with different views on the final direction while ensuring timely delivery was a challenge between brand identity and product development.
🔔
Disclaimer
Certain design processes and data have been purposefully excluded in compliance with NDAs to safeguard the confidentiality of both the company and its clients.
Impact
1.88M
Ad Revenue Growth
Our partnership with Popeyes generated $1.88 million in ad revenue growth.
87.2M
Impression
The total fan engagement impression number of Popeyes ad experience.
8.33%
User Activity Growth
This number reflects user activity growth over last year. We were stoked to see co-branding drive engagement.
100%
Component Scalability
The interactive message UI and Lottie files are scalable across devices and serve as the foundation for future ad experience frameworks.
UXR Process
Stakeholder Interviews
Before the project, I interviewed stakeholders across Product, Engineering, and Design teams to align on the ad user experience, analyzed Adobe Analytics for insights, audited current placements, and crafted a strategy balancing business goals, user engagement, and technical feasibility.
Competitor Analysis
When the Product team suggested animated messages for the second sponsorship experience, I analyzed competitors and found no similar integrations. This validated our goal of pioneering the first deep advertiser branding in fantasy football.
First Sponsor Integration Design
Using Fantasy's Playoff Pro Sans with a 3D text effect, I integrated Poppy with its Louisiana colors, blending it with our confetti backdrop. The design aligned with the playoff bracket UX, ensuring scalability and accessibility across devices in both light and dark modes.
First Sponsor Integration Design
Using Fantasy's Playoff Pro Sans with a 3D text effect, I integrated Poppy with its Louisiana colors, blending it with our confetti backdrop. The design aligned with the playoff bracket UX, ensuring scalability and accessibility across devices in both light and dark modes.
Second Sponsor Integration Design
Based on past ESPN playoff visual research, I designed around the football field theme and the Poppy banner I developed. The visuals were crafted to be cohesive and engaging, ensuring fans were well-informed and excited about this celebratory feature.
Design Process and Result
I spearheaded the design collaboration with my Content Design partner to craft a UX-optimized caption, sharing progress with the CFX teams and requesting design critique sessions for continuous improvement. I ensured the visuals honored the existing Playoffs artwork while integrating a Poppy-themed bracket, delivering a cohesive and technically sound solution. Additionally, I safeguarded the graphics to align with Braze's image guidelines, ensuring future-proof artwork that would be accessible on our mobile app via the Braze platform.
Design Process and Result
I spearheaded the design collaboration with my Content Design partner to craft a UX-optimized caption, sharing progress with the CFX teams and requesting design critique sessions for continuous improvement. I ensured the visuals honored the existing Playoffs artwork while integrating a Poppy-themed bracket, delivering a cohesive and technically sound solution. Additionally, I safeguarded the graphics to align with Braze's image guidelines, ensuring future-proof artwork that would be accessible on our mobile app via the Braze platform.
Third Sponsor Integration Design
The goal of this animated message was to combine the fantasy-branded message with Popeyes ad placement seamlessly. I drew inspiration from Popeyes ads, their social media, as these formats convey messages quickly and effectively. By incorporating sportswear-inspired kinetic motion design, I ensured the visual was stylish, on-brand, and engaging.
Design Process
To manage text variations, sequences, timing, and storytelling revisions, I streamlined WIP prototypes using Figma’s smart animate with layer masks as variants. This approach allowed for quick adjustments based on feedback, ensuring an efficient and smooth design process. Additionally, this WIP Figma file enabled early collaboration with Motion Design partners, facilitating detailed animation refinement and securing buy-ins from Product and Design leadership. This strengthened the overall product and motion design collaboration process.
The Hurdles
Before handoff, differing opinions on the background color arose. To keep the project on track, I audited past Fantasy sponsorships and presented data-driven suggestions to my manager, emphasizing how highlighting Popeyes’ brand in this co-branding campaign would not only enhance their presence but also resonate with sports fans during their celebration moments. In the final product leadership meeting I chaired, we aligned on prioritizing Popeyes' brand color, honoring their first-time sponsorship while meeting business, revenue, and user experience goals.
Result
Last October, we launched the Popeyes interactive message for Fantasy playoffs, partnering with Motion Design to deliver an optimized Lottie file for smooth engineering integration.
To announce this new feature and sponsorship, we launched a Braze campaign takeover as soon as fans entered the Fantasy app, guiding them to the Playoffs bracket. The goal? Maximum exposure and seamless discovery for our sports fans!
To celebrate fans who made it to the playoffs, we implemented a targeted popup animated message that appears only on their roster screen. This feature blends Popeyes sponsorship with fantasy-themed copywriting, creating an engaging moment that guides fans directly to the Playoffs bracket screen!
Testimony
Takeaways
During the color debate, I learned from my manager how to effectively secure buy-in from Product Manager leaders. Identify key stakeholders and involving upper leadership when needed is crucial.
I discovered the power of using layer masks as variants, allowing for more dynamic animations in Figma. This technique greatly accelerated the iteration process!
Product Promotion
ESPN Fantasy App
Feeling inspired after checking out this case study? Don’t stop here! Jump right in and download the app to get in on the action!
Download Now