ESPN Prediction Games  

Making Quicker Choices

See Results
This was one of the first projects I designed on the Fantasy team. Prediction games are very popular. Users come every week to make their picks and predict who will win in the season matchups. From the design perspective there is a lot of complexity as you have to keep in mind a multitude of sports, states, logos, teams and already existing patters in the product.
Pigskin Pick'Em has had more than 1M unique players in 2023.
- Very new to the product
- Variety of teams, logos, card states and data
June 05 - 25, 2022
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 when they need to make weekly picks in Pick’Em Games.
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.
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
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
1. Planning
How do we create a "denser" interface without redesigning the whole experience and going beyond the scope of the project?

I collaborated 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
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
Collapsing Canvas
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.
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
Live Build
Users can make their picks 2x faster, which means they are more likely to come back next week.
See Live Build
(make sure to use your phone, this feature is only available for mobile viewports)
Standard and Dense View, comparison in scroll length