Illustrator, Graphic Designer, UI Designer

Menu

ESPN Fantasy Football App

The explosive growth of fantasy football is rooted in the ability for fans to feel a special rooting interest in a team of players they’ve selected themselves. With over 33 million people playing each year, the competition for having the easiest, most user friendly fantasy app has never been more fierce.

The information in this case study is my own and does not reflect the views of ESPN.

My Role

I worked solo on this project, as I have an interest in fantasy football and also have experienced frustration using the current ESPN app myself.

I conducted the research, wire framing, prototyping and the final design using friends, other fantasy players and InVision users to solve the problem of making the ESPN app less frustrating and more user friendly.

The Challenge: Improve navigation of key features to prevent users from switching services.

Currently the most popular apps being used for fantasy football are CBS, Yahoo, NFL, and ESPN. With over $800 million being spent yearly on fantasy, maximizing user downloads mean generating the most revenue.

To maximize downloads, the app must be easy to use, navigate, and offer the most vital features to give the player an advantage over the competition.

The current app has a navigation problem, both in the main menu bar, and also the hamburger menu. To prevent users from switching to using another service, these two menus would need to be redesigned for ultimate user convenience.

The Approach

To expand my research beyond friends and other fantasy players I’m acquaintances with, I jumped on the App store to get a sense of what other users were saying about the current ESPN app.

“Why is it hard to find my match-up and league scores? I don’t need Roster News listed in the menu, I need my match-up.” – Haterz84

“Until they allow me to see player news by clicking on players, I will be going with the CBS app.”– Mark Mass Man

“This app is in desperate need of a reworking for viewing trades and league transactions” – Big Hirag

“It is hard to research players, add/drop players and view all leaguematch-ups. This app makes fantasy football less fun.” – F-Rehoused

Persona and Task Flow

In order to help me find problems with the app, I created a user persona named Codie. 25 years old, a hardcore fantasy football player, and a current ESPN app user, Codie wants to log in, view his roster, match-up and league.

He also wants to easily be able to find key features such as trades and league transactions. Below is the ideal scenario for Codie:

Task Flow

Using the ideal scenario above which encompasses the journey of Codie wanting to check his roster, match-up, and league, I created the user flow to help me see how a user gets to a positive outcome with his or her initial goal.

After creating the user flow, it was clear to me that I needed to emphasize making the main menu the primary spot to find the essential tasks of the player. Roster, match-up and league would be the “Big 3” to focus on in order to deliver an optimal user experience.

Usability Testing

I gathered 5 friends that have played fantasy football before. Some of them had used the ESPN app in the past. Using the task flow I was able to set up some tests for these users in order to find specific pain points in the app. Each user was provided a scenario that closely represented the task flow above. Here is an example scenario:

Find my match-up score

Find the scores and standings of the other teams in the league

Find my roster and get player news

Make a trade

Along with finding these features, I asked my friends to give me some feedback on the look of the app. With the player screen and roster screen being the most complained about, I asked my 5 friends to rate these two screens on a scale of 1-5.

With these results, it was obvious that users were completely unable to find how to make a trade, and struggled to find the other teams in the league scores. Also, the match-up screen was difficult to find.

Crafting the Solution

After identifying the problems and pain-points, I set out to create basic lo-fi sketches for quick creative ideas. After multiple sketches, I was able to get a rough idea of what I assumed to work.

Home Screen

Because the three essentials in fantasy football are to review your roster, match-up and check the league, I made the menu feature these three things. Below is my proposed solution for the home screen:

Proposed Solution Changes

I changed the “Big 3” menu to feature “Roster”, “Match-up”, and “League”. This allows the user to easily navigate between them, without having to search the app. I also made the Roster screen more attractive, as it got low ratings in terms of look.

Player Screen

The Player page displays a boring picture, irrelevant information, and no cool features like video or analysis.

Proposed Solution Changes

Added video for highlights and analysis, made the picture more attractive and switched preseason info with current, up to date stats.

Hamburger Menu

The menu doesn’t have an option for key features such as add/drop, or trades. Players had to hunt for things they wanted to do. Even the wording on some features is unclear.

Proposed solution changes

I changed the wording of the menu options to clearly state where each tab will take you. I added key features such as “trades” and “add/drop” so users don’t have to get lost searching for these tabs.

League and Match-Up Menu

The League menu tab displays both the league scoreboard and league standings, making it very easy to check up on the other teams. The Match-up menu will show your current score along with highlighting when a player is within scoring distance (the red zone)

Results

After completing the prototype, I gathered my 5 users for my final usability test.

The tasks were the same I assigned before my redesigns, but the results were immensely different. Frustrating and confusing moments that were dominant before were suddenly replaced with confidence and happiness.

Here are the test results:

Overall

Users were able to find the “Big 3” menu bars right away after the log in screen. Additionally, all users found the hamburger menu much clearer, and saw features such as “trades” and “add/drop” as soon as the menu was brought up. Users also really enjoyed the better look and feel of the player page, and roster screen. All 5 users
said they would continue to play fantasy football with the ESPN app, and not switch to Yahoo or CBS next year.

Conclusion

Before the redesigns, the process to find your match-up, view the league scores and standings, and making trades was way harder than it should’ve been. Hopefully with my proposed solutions, users will decide to stick with ESPN for their fantasy football needs,
and recommend the new app to their friends.