8 Mins Read
ESPN Fantasy

How Our New Ad Experience Generated $1.88M and 8.33% Growth

Oct
2023
Aug - Oct
2023

Celebration Design for Fantasy Playoffs Fans

Fantasy Football victory isn’t just in the stats; it’s in making it to the playoffs. To create a meaningful celebration experience for fans who reached this stage, we launched ESPN Fantasy’s first user flow embedded ad experience feature with our sponsor Popeyes.

Project Lead Designer

Research
From App UX Audit, competitor analysis to stakeholder interview.
0-1 Design
From storyboard, moodboard, hi-fi mocks, and interactive prototyping to prototype usability testing,spec documentation and live QA
Design Crits
Regularly hosted design critique sessions with design, content, and motion partners to refine UX and interaction design.
Product & Engineering
Initiated review sessions with product and engineering teams to ensure alignment with product, business, and technical goals.

Meet Our Team

Product Design

Motion Design

Product Development

Product Development

What We Want to Achieve

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.

What We Need to Conquer

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.

Key Numbers

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.

Audit Existing
Ad Experience
Use Data to Drive
Design Decisions
Define the Ad
User Experience

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.

Exploring Competitors’
Ad Experiences

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.

Fantasy x Popeyes Banner

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.

Fantasy x Popeyes Banner

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.

Fantasy Playoff Moodboard

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.

Popeyes Braze
Design Iteration

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.

Popeyes Braze
Design Iteration

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.

Popeyes Branding References

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.

Animated Message
Design Iteration

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.

Color War?!

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.

Final Cut Version

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.

Finalized Sponsorship User Flow
App-Wide Universal Alert

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!

Playoffs Champ 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!

User Reactions on Social

Seeing NFL insiders Field Yates and Adam Schefter featuring direct screenshots of our Playoff Poppy campaign, was a highlight.

Quote from
Product Leader
The work you all do is not only driving great user experiences for our fans, but also continued growth, engagement and millions of dollars for the business. Go team!
Daniel Bohm
Director of Product Management
Disney ESPN Fantasy
Key Learnings
Leadership Buy-In

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.

Iteration Boost

I discovered the power of using layer masks as variants, allowing for more dynamic animations in Figma. This technique greatly accelerated the iteration process!

Start Your Fantasy Journey!

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