ESPN Prediction Games  

Helping users make quicker choices

In a Nutshell
Time on Task Down by 50%
User Retention Improved by 5%

I designed a new feature that reduced the time on task by 50% and improved user retention by 5%.

Role
Solo designer, collaborating with Product Manager and Software Engineer
Problem
Advanced users drop out because of how long it takes too make picks.
Timeline
June 05 - 25, 2022
Challenges
Variety of teams, logos, states and data
The Problem
Pain Point
At any given week during the season there could easily be around 16 games in Pigskin Pick'em, the most popular prediction game. It's a lot of games and a very long scroll. Users are overwhelmed by it and they drop out! Retention rate suffers dramatically.
User Persona
The problem mostly arises for the Advanced Fantasy Users. They come to make picks every week, they know the names, the team tricodes, colors and logos. They need very little information to play these games. They just need to do it quickly. And for them the long scroll is overwhelming.
Solution
Create a Dense View that would only contain the most important information and take significantly less real estate on the screen.
Weekly Matchups Page, very long scroll
Research
Insight
None of the competitors ( i.e Yahoo Fantasy, Sleeper, NFL Fantasy and etc.) have a way for the user to avoid the long scroll. Which presents an excellent opportunity for ESPN to stand out and give the power users a better experience.
Main Competitors: Yahoo Fantasy, NFL Fantasy, Sleeper
Design
1. Planning
How do we create a "denser" interface without redesigning the whole experience and going beyond the scope of the project?

I aligned with product and design partners to define expectations and design goals. We agreed to create a toggle for the users to turn the new “dense” view on and a dense version of the regular team cards.
Assessing the challenges on the Weekly Matchups Page
2. Iterations
I make sure to share my work early and often with various stakeholders so that we are all aligned on where the designs are heading. It is especially important in a product like Fantasy that has been on the market for almost 20 years and has various legacy systems in place.
Team Cards in the Matchup
View Toggle Iterations
3. Final Main Components
After careful consideration I had to introduce 2 new components into the design system: View Toggle and Dense Card.
Final View Toggle in Light and Dark Modes
The Standard Card (on the left) transforms into the new Dense Card (on the right)
4. Designing for Fantasy Sports
Working on Fantasy games is complicated because it is connected to real life. So it is important to show how data changes before, during and after the live game. There are also various game modes specifically in prediction games like Pick’Em: Standard, Spread and Confidence. Here is an example of some of some of the states I had created:
State Variations for Standard Mode Dense Cards
Interaction Design
Prototype
It was important to thoughtfully design the interaction when the user clicks between the dense and standard views.

So I created a prototype for the collapsing canvas. That way the engineering team can see what exactly needs to happen when user clicks on the View Toggle.
Delivery
Working with design systems and engineers
The development team prefers to have as much detail in the Figma Delivery file as possible and I try to provide all of the details: dark mode, responsive screens, real life data, callouts to the libraries and etc. In addition, I need to make sure that my designs are mapped to the correct libraries within Disney’s and ESPN’s structure of design systems.
Delivery File, Bird’s Eye View
Impact
Time on Task Down by 50%
User Retention Improved by 5%
Time on Task Down by 50%
During the usability test I established that time spent on task went from 30 sec to 15 sec on the average
User Retention Up by 5%
Users were more likely to stay for the rest of the season, because of how fast they can make their picks now
Comparison in screen length, before and after
See Live Product
Make sure to use your mobile phone or resize the browser to see the feature, it is only available for mobile breakpoint.
Go to ESPN Pigskin Pick'Em
Final screens
See Other Case Studies