UX Case Study (Wireframe Phase)

Footballguys
Player
Page

FootballGuys.com is one of the top-ranked fantasy football websites in the world. With a member list in the hundreds of thousands, it has a long track record of being “the source” when it comes to fantasy football projections and analysis.

With hundreds of players in the NFL and thousands of data points for each player, the individual player pages have grown bloated with content. The player pages are overwhelming and user feedback indicates that the content is hard to scan and absorb.

Increase Signal vs. Noise Ratio

Project Goals:
  • Arrange Page Sections to Enhance User Flow.
    Enable users to scan and move through the page quickly.
  • Sort Data According to Relevancy
    Make the most desired and relevant data easiest to find.
  • Reduce Perceived Page Weight
    Present stats and projections in a way that does not overwhelm users.
FBG Revised Player Page

Player Page Sketches

A user who is overwhelmed by too much information or gets ‘lost’ navigating through a site is going to have a bad experience. To avoid these scenarios and improve user experience, I used a process known as Information Architecture.

The first step in the process was to create wireframe sketches using pen and paper. This phase is about generating as many layout ideas as possible. Often the tendency early on is to “over design” but starting with paper helps to avoid confusing well-designed wireframes for good ideas.

Player Page Sketches

Wireframe + High Fidelity Mockup

The sketching phase helped me focus on the key page elements while shifting less pertinent data farther down the page. We knew from user testing that the draft position rankings and key stats are the first data points most users are looking for.

The next phase was to move our wireframes to the computer. I created several low fidelity wireframes and ultimately a high fidelity mockup plus an interactive prototype for user testing.

Player Page Wireframe

Player Page Wireframe

Player Page Mockup

Player Page Mockup

Player Profile

Fantasy football owners are looking for the most current data available but often times only have a few minutes per week to invest in research and analysis. Having the most requested data points easily accessible was key to the page refresh.

Based on user testing I highlighted three key stats:

  • Average Draft Position
  • Fantasy Ownership %
  • Consensus Draft Projections
FBG Player Profile

The Results

Using a design process that included sketching, wire-framing and prototyping we produced a vastly improved version of the FBG player page. The improved information architecture helps the page to “breathe”. Key player stats and draft projections are now the focus of the page instead of being buried under a mountain of text.

“Sean has that perfect balance of being able to listen to us while guiding us toward the best solution. I’m extremely pleased with not just the end product, but the process of how we got there. I can’t recommend him highly enough.”

Joe Bryant

CEO, FootballGuys

Sean Alsobrooks

Let's work together.

Sean Alsobrooks
alsobrooks@gmail.com
Knoxville, TN
865-335-9481