NFL Football
Problem/Opportunity
The 33rd Team, a new website specializing in NFL content, is looking for a partner to provide them with a plug-and-play solution for player & team pages as well as fantasy focused stats. They already have site-wide designs in place for their editorial content which these new components would need to adhere to.
Proposed Solution
Create player & team pages as well as a fantasy football query tool which would be hosted by SIS and integrated into The 33rd Team’s site using iframes.
My Contributions
Sole designer & researcher for all related products (Player & Team Pages, Fantasy Football Query Tool)
Business Result
Multi-year, six figure contract for the initial components plus subsequent opportunities for NFL Draft related components.

Timeline

Research & Reqs
June 27, 2022
Wireframes & Style Guide
July 4, 2022
Hi-Res Screens
July 7, 2022
Feedback & Iterations
July 18, 2022
MVP Handoff
August 1, 2022

Research & Product Requirements

Who are the users?
Fantasy Football Players
  • Demographics: Typically adults aged 18-45, both male and female; varying levels of experience with fantasy sports.
  • Goals: To easily access player statistics, team information, and make informed decisions for their fantasy leagues.
  • Needs: Quick access to relevant data, user-friendly interfaces that highlight key information, tools to analyze player performance, and the ability to query specific data efficiently.
Football Analysts and Enthusiasts
  • Demographics: Sports analysts, commentators, or avid fans; likely educated and tech-savvy.
  • Goals: To analyze team and player performance in-depth, share insights, and enhance their understanding of the game.
  • Needs: Detailed statistics, comparisons between players and teams, research tools, and access to historical data.
Casual Sports Fans
  • Demographics: Fans who follow the NFL casually; may not participate in fantasy leagues but enjoy following players and teams.
  • Goals: To stay updated with player and team performances and engage in conversations about football.
  • Needs: Engaging visuals, simple navigation for player/team stats, and light data that’s easy to digest.
What are the constraints?
  • Iframes have restrictions regarding responsiveness and cross-origin resource sharing (CORS), which can affect how content displays and integrates with the parent site.
  • Fast loading times for components hosted externally must be balanced against the complexity of the data being displayed, which can influence user engagement.
  • Ensuring that new components seamlessly integrate within The 33rd Team’s existing site structure while adhering to their branding and style without a strict design system.
  • Designing components that function well on various screen sizes while embedded in an iframe can be challenging, especially if the iframe renders differently on mobile devices.
What are the requirements?
Player Pages
  • Basic bio information
  • Player stat summaries including ranks
  • Comprehensive player stats for multiple seasons, viewable by total or per game
  • Game logs
  • Integrated player news
Team Pages
  • Team stat leaders
  • Depth charts
  • Comprehensive stats for multiple seasons, viewable by total or per game
  • Personnel & efficiency data
  • Schedule including opponent strengths and results
  • Roster including coaches as well as recent additions & departures
  • Integrated team news
Fantasy Football Query Tool
  • Advanced stats for every major position group (QB, RB, WR, TE, D/ST), viewable by total or per game
  • Advanced filtering including snap minimums
  • Standard, PPR, and Half-PPR scoring toggle
  • Player search
  • Export to CSV functionality
  • Glossary
Who are the competitors?
Understanding what existing sites The 33rd Team saw as their competitors and where they fit into that picture was important in order to determine the balance between advanced & basic stats as well as between pure football & fantasy focused content. There is no shortage of football content in the marketplace however the chart below gives a simplified representation of where The 33rd Team felt they wanted to end up.

Wireframes & Style Guide

Style Guide
The bigger challenge at this point was to ensure that the components adhered to the styling of the larger 33rd Team site. Those designs came from an external agency, lacked a clear structure, and were constantly changing. It became crucial to set up our designs to be flexible enough to adapt to anticipated changes from the agency. I was given access to their working Figma file which I used to put together my own style guide which would allow for faster design work on our three components.
Wireframes
All three of the components involved (Player Pages, Team Pages, Fantasy Query Tool) involve very well established UI and patterns. There was no plan to re-invent the wheel here and a focus would be put on keeping the designs as simple as possible given the complexity of the content involved. This meant the wireframes were pretty straightforward
33rd Team External Agency Designs
My Style Guide

Hi-Res Screens

Player Pages
Player Pages included an overview with basic bio info, a player-specific stats widget with two stat formats and multiple table tabs, and a game log with a season dropdown and multiple table tabs.

Player news, headlines, and the general site structure would be coming from 33rd Team's WordPress site.


Team Pages
Team Pages included an overview with record and divisional rank, an interactive depth chart (which I called Sonar), a team-specific stats widget with two stat formats and multiple table tabs,  Personnel data along with Efficiency rates and ranks, a schedule including strength-of-season data, and a roster including coach info as well as recent additions & departures.

Team news, headlines, and the general site structure would again be coming from 33rd Team's WordPress site.
Fantasy Query Tool (The Edge)
Previous work that had been done for other SIS query tools proved to be invaluable with this portion as I had already done extensive research, trial & error, and general design work for this type of tool.

The majority of the work here related to the information architecture surrounding the data. This was done in conjunction with our SIS Football R&D and 33rd Team's Fantasy team, determining everything from which stats to include and where, what the best abbreviations would be, and what filters would be most useful for Fantasy purposes.

Feedback & Iterations

This project had two primary groups of stakeholders; our SIS Football team who wanted to ensure that their work was being represented accurately, and the 33rd Team senior staff (which included some prominent football personalities with strong opinions). Ensuring that both of these groups had an ample chance to provide feedback and were happy with the MVP version was important but took some time. Here are just a few examples of some of the iterations and improvements:
Header Images
This ended up being a real sticking point with the 33rd Team's executives and an inordinate amount of time was spent to arrive at the final result. Some of the other proposed versions can be seen here.
Depth Charts (Sonar)
The depth chart widget came from designs originally used for SIS' NFL Draft site the previous year (that version can be seen below to the left). Several improvements were made based on feedback from both groups including the addition of the team logo in the background and player names to accompany the position chips.
Fantasy Query Tool (The Edge)
The designs shown earlier were for the most recent version however you can see some previous iterations below. A lot of time was spent to refine the designs to make them more mobile friendly, easier to navigate, and cleaner. This involved significant changes to the information architecture, UX patterns, and UI.

Conclusion

The first season of this partnership was a resounding success. The 33rd Team was very happy with what we delivered and extended their contract with an inclusion of a whole suite of NFL Draft products for the 2023 Draft. We also added a Trenches Tool (you can see an archived version here) to accompany the Query Tool which analyzed Offensive/Defensive line matches for every week. This partnership ended up being worth almost 7 figures to SIS over its 2 years.

Sadly, entering the 2024 season, The 33rd Team let go of a significant portion of their staff (including everyone involved in Fantasy and Betting) and decided they were moving in a different editorial direction which would no longer require our involvement.