NFL Fantasy Football
NFL | Product Designer | Summer 2017
Project Overview
As a Product Design Intern, I worked with the product design team to help design the Fantasy Football app, which had an active user base of over 3.5 million users.
When I first started, the product team had gone through a number of design iterations for the Team and Game Center pages on mobile, which had improved upon the experiences from the previous season. I was tasked with redesigning the tablet app to better reflect the mobile designs. The tablet app was using a separate codebase to support an outdated interface and user experience. The extra real estate on tablet presented many opportunities to provide additional information you couldn’t display on mobile.
My Contributions
Duration: 4 months
Design Tools: Sketch, Invision, Principle, and Zeplin
Results: Wireframes and High-Fidelity Prototype
My Role: User Research, Usability Testing, UI Design, and Prototyping
Let’s see how I got here
Understanding the Current Fantasy Football App
Team (mobile & outdated tablet app)
For the mobile app, the Team page is the designated place for the user to feel like a GM or coach. This is where you go to edit or study your roster when trying to put together a competitive lineup. The team page on mobile currently consists of 3 tabs: Roster, Stats, & Overview.
For the outdated tablet app, the design is outdated, but you can also see how the 3 tabs are now condensed into 1 screen and they are using a parent child mechanism. Meaning whatever is clicked in the left panel will change the right panel information. The extra real estate space provides the opportunity to provide more information. By conducting user research, I will be able to figure out what extra information is most valuable when making these decisions.iPad is more of a lean-back/passive experience compared to mobile. Meaning users shouldn’t have to spend a lot of time digesting information to either study or make changes to their roster.
Game Center (mobile & outdated tablet app)
Game Center is the designated spot for you to view your matchup, league matchups, and NFL games for the selected week. The game center page on mobile currently consists of 3 tabs: Matchup, Schedule & NFL Games
The Problem
The problem was that we were supporting two code bases — 1 for mobile and 1 for an outdated iPad app which didn’t align with the current design. By adapting our current mobile design to iPad we would only have to manage 1 code base. Saving developers more time and hopefully a better user experience. Furthermore, we needed to conduct research around the team page to improve the experience around the user feeling like a coach or general manager.
Question
“If you’re looking to evaluate your roster or setup the best lineup, how often and for how long do you see yourself utilizing and engaging with this app?”
Responses
“I use the app to keep track of my team on the go, but usually use the desktop app or another resource to make confident decisions with my roster”
“When I have to make last minute decisions”
“Probably not often!”
The Goal/Objective
To drive research and increase engagement within the App, creating more of an experience.
“How Might We’s?”
* How might we increase the amount of time users spend on the app?
* How might we make this app more engaging?
* How might we make users feel more confident with decision making?
* How might we make statistics both educational and interesting?
User Research
Understanding our Users
On approaching this problem, it was important to understand what additional information users finds most important when studying or editing their own roster. I looked at App Annie reviews and conducted 5 interviews with NFL Fantasy Football users. Our goals were to:
* Understand how users make lineup decisions
* Discover the core content and metadata that team owners care most about most (Player Name, Player Stats, Health Status, etc.)
* Uncover pain points and product opportunities
User Research Takeaways
1. Most users will pick the lineup with the most projected points while also looking at player health when having to make quick decisions
“I usually forget to setup my lineup for the week and have to make last second decisions based off projected points and health status.”
Opportunity – Button that allows users to start the lineup with most projected points – Optimize Lineup Feature
2. Users typically will go outside the app for research regarding their players.
“Editing the team lineup required a pen and paper in the app because in the edit screen you only show the names, no stats or projected points.”
Opportunity – Research tools that live within Team Page to help make decisions
3. Having tabular data and player overview for the week to helps make decisions.
“I like how ESPN has tabular data and a player research filter which allows you to see player ranks, percentages and averages for that week.”
Opportunity – Statistics on Team Page to help make lineup decisions
4. Knowing the owned and start percentages of players are key indicators to help users make lineup decisions.
“Sometimes owned and start percentages indicate me that a player might have an injury or their production is either hot or cold.”
Opportunity – Owned and Start percentages can live within tabular data on team page
5. Comparison tools allow you to evaluate players on your roster to those on other teams or free agents.
“I like looking at points against defense fora particular position and comparing my players to players on other lineups or even free agents that I have my eye on.”
Opportunity – Comparing your own players to other players around the league without having to leave Team Page
Card Sorting
To better understand which datapoint’s were most important when editing your roster, I conducted a card sorting exercise technique to find patterns.
My Team – 8 of 14 testers created a “My Team” category during the card sort exercise, and placed the following cards into that category
* number of testers that associated card with “My Team” shown in parenthesis
- My Roster (6)
- Your weekly matchup (5)
- My Trophies (5)
- Edit Team Name (5)
- Waiver Priority or Waiver Budget (3)
- Trade Proposal (2)
- Email everyone in your league (2)
- Matchup between Two Other Teams in Your League (2)
- Scores of matches in your league (1)
- Standings (1)
- Discussions (1)
- Leagues (1)
- Watch List of Players (1)
Cards Associated with “My Roster”
Roster is the one essential item of the Team page so by seeing which cards testers grouped with the “My Roster” card, we can get a better understanding of what kind of content they would place on the Team page.
Below are the cards most commonly grouped with the “My Roster” card by testers.
* percentage of testers that grouped that card with “My Roster” shown in parenthesis
- My Trophies (64%)
- Your weekly matchup (57%)
- Edit Team Name (36%)
- Watch List of players (36%)
- Waiver Priority or Waiver Budget (36%)
- Email everyone in your league (28%)
Other Cards grouped with “My Roster” by testers
- Scores of matchups in your league (21%)
- Standings (21%)
- Trends in player own % (21%)
- Discussions (21%)
- Trade proposal (21%)
- Transactions (21%)
- Player’s game logs (14%)
- League 1- My “Friends” League (14%)
- All teams in your league and who owns them (14%)
- Approved Waivers (14%)
- Vetoed trade (14%)
- Pending trades (14%)
- Pending waiver (14%)
- Free Agents (14%)
- Mock Draft (14%)
- Scoring leaders (14%)
- Matchup between two other teams in your league (14%)
Brainstorming
Exploring Solutions
After meeting with my design manager and developers, we brainstormed some ideas around tabular data and started doing some wireframes around a parent-child mechanism design. I also looked at native iOS apps (Settings & Calendar ) to better understand the functionality on tablet.
Presentation
Executive Presentation
At the end of the internship, I presented my research and prototypes to a room of executives.