Football Guys 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.
Player Pages 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.
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 Hi-Fidelity 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
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.
in Oregon