ESPN Fantasy Sports

Consolidating Four Apps Into One

Fantasy had four main disparate apps for each fantasy sport, football, baseball, basketball and hockey, as well as a fifth app for a popular game called "Streak". ESPN and Disney were going through a big initiative to reduce the number of apps we had to support, and focus on quality, a better user experience, and focus engineering resources on a smaller portfolio. From a design standpoint, we had to identify potential pitfalls, and areas we could utilize this consolidation to make better.

Don't Disrupt the Single Sport Player
90% of our users only played one of the 4 Fantasy sports, with football being most popular by far. We wanted to keep that single sport experience pretty much the same and not bog it down with the other sports, BUT find ways to make them available, and promote them tactfully throughout the user experience. This was some user feedback from existing players regarding having a single app for all sports.

"“I only play football and don’t want to see any other sports prominently in my feed.”"
-Regan F. - ESPN Fantasy Player

"I play fantasy football, but would be potentially be interested in trying basketball."
-Matthew G. - ESPN Fantasy Player

"Not having to go two places for each sport would be amazing."
-Sara M. - Yahoo Fantasy Player

Follow the Playbook
Throughout the Fantasy league season there are three main activities which will dictate the enjoyment of playing the game. Signing up and drafting, managing your team, and celebrating achievements. Fantasy is all about the bragging rights!

Onboarding

Users have the ability to create a private league of their own, or join a public league to play with other users looking for a league. Some feedback we received over the years regarding public leagues was that new or novice players were intimidated to play against experienced players, and experienced players disliked newer players in their leagues quitting mideason, because of losing or frustration.

After much research, we added the ability for users to choose their experience level, so we can match them with similar players. This flag would also provide us a data point that would allow the ability to provide the new user tips and tricks. For example, the confirmation screen here has the ability to show an article. A “rookie” would see a Fantasy 101 article, while a “pro” would receive an article more suited to their skill level.

Team Cards

After signing up, your team card is your main window into the game, and is highly stateful. Before the season begins, key information regarding how many players are needed to fill your league, and when the draft will occur. It offers tools to remind your league organizer to perform certain tasks, and if you are the manager, remind you to THE MOST IMPORTANT task you must perform to make sure the league is successful.

Once the season kicks off it will display scoring and alerts. At the end of the season it will show your final standings and a trophy.

Drafting

The league draft is the single most exciting event of the season, as the league gathers together to pick their teams. We wanted to make the draft product informative and easy to follow. With many other competing sources to perform research and communicate, we focused on adding integrated research and a chat platform for players to talk trash!

Through color, notifications, and audio cues, users could do their research, step away, or chat, and not miss their turn to pick. The experience was also optimized for tablet and desktop devices.

Fantasy Quick Tips
A player will often have players on their roster that may be injured, not playing a particular week, or may have a replacement on the bench that is projected to score more. The Quick tips sheet was designed to provide quick insights and recommendations at a glance so the player could take action. We experimented with several form factors and the swipeable sheet tested best to get an initial notification, swipe up if you want the full details, and swipe away once you’re done.

Celebrating Achievements

A fantasy season is long, lasting up to 20 weeks. Although you win or lose a matchup each week, we did a poor job of celebrating those wins, instead only recognizing the overall winner at the end of the season. We developed several new ways to celebrate the winner and one of these is the weekly celebration modal. Upon logging into the app after a matchup, the player is presented with falling confetti for a win, or some encouraging words if they lost.

This also presented an awesome platform for marketing to sell sponsorships. We put a bid together for Miller Lite, integrating their brand and messaging into the modal. We won the bid, and this high dollar sponsorship became a mainstay in the app.

Social Sharing

Another component to the celebration modal was the ability to share the result on social media through dynamically generated artwork. Sharing was also built into post sign up, and after the draft. Being linked up to our products created a great point for new users to play our games.

Experimentation

The Fantasy team was constantly looking for ways to move our products forward and present big ideas to differentiate our product from the competition. With ESPN being a television entity we had a distinct advantage in the fact we had an OTT app, and a world class television production team.

This is a second screen concept that would create a virtual broadcast of your league’s draft. Using your phone or laptop to draft and watching the broadcast on your television. Upon drafting a player, their highlights and commentary would be presented, just like an actual NBA or NFL draft. Your reaction and your competitor’s reactions would also be broadcasted.

I believe that big ideas spark creative discussion and innovation and should always be a part of a team’s priorities.

Color & Accesibility

Another big part of this redesign was the creation a dark mode for the app. This was one of the most requested enhancements we had from our users, and the design team was also excited to make it happen! We carefully created mappings of our light and dark colors, and at the same time discovered we had been using way too many shades of grey, some barely distinguishable from each other. We made it an initiative to reduce these, make sure each served a purpose, and were highly legible.

We also developed a fully accessible color palette, passing at least WCAG AA standards. We loved the vibrant sport colors in the app, but found some of them to fail accessibility standings. We carefully darkened the hues, maintaining vibrancy but making light and dark type read comfortably against them.