Dense View

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