Alliance of American Football Web Platform

ROLE: UX/UI DESIGN, MANAGED DEVELOPMENT

The Alliance of American Football was a professional league founded by Charlie Ebersol and Bill Polian. The AAF began the inaugural season on February 9, 2019. The league was scheduled to have a 10-week regular season and conclude with a championship game on April 27. After eight weeks of play, however, the league’s football operations were suspended by controlling owner Thomas Dundon on April 2. The league offered fans an immersive digital experience where they could interact with the game on a play-by-play level. During gametime, the web platform offered fans the ab ability to view the game from the camera of their choice as well as a digitally simulated top-down view to track each player. Between games, the web platform offered standard features such as stats for players, teams, league, standings, and allowed fans to purchase tickets and merchandise.

The Setup

The web team was assembled 2 weeks before the kickoff of the season. I was hired to design the end-to-end experience and joined 6 days before the first game. The interactive platform had to be built out iteratively through the season. First impressions are everything we had to be smart in prioritizing features pushes in each iteration. The experience gave new meaning to working fast and being nimble for me. The new web platform was launched the night before the first game. There were 4 games every weekend. We pushed new features and updates between games, EVERY game. A newer version of the web platform was released weekly. It was nice to see some of the fans acknowledge the improvements on Reddit :)

Research

There was no time to run a proper user research process. I digested prior research from the larger organization and filled in a few gaps by sitting in bars during NFL games, reading sports blogs, and speaking to my sports fanatic friends. I relied on references from existing sports platforms on the assumption that they’ve dedicated significant efforts into user research. Looked for similarities in key areas:

  • Layouts, especially the use of above-the-fold real estate
  • Navigation
  • Common functionality and user flows of each
  • Call-to-action placement

Execution

I mapped out the full user flow and created spreadsheets to detail the data from the back end. I worked with my PM to prioritize functionality and features based on:

  • User impact
  • Technical feasibility or readiness
  • Time required for implementation

From there, a pared-down user flow was given to the engineers to start building. My focus then shifted to high-fidelity mockups. There was no time for wireframing. I synced up with the designers on the mobile team on what I could pull from the design system and which components I should look to be adding on the web side.

I also set up our Google Analytics and Tag Manager with custom tags. Typically not filed under a designer’s responsibilities but someone had to do it fulfill 2 objectives:

  • Management wanted to understand the engagement for each game, broken down by camera feed
  • Getting granular data for user behavior

Iterations Towards Final Design

I created 3 iterations for each page in high fidelity. Yes, I was aiming high on the aesthetic bar but I had to keep in mind that it’s a race against the clock. I worked closely with the engineers to learn how things were currently architected. The less they had to change on the structure of react components and the database schema, the faster we can release.

Mobile

After the first week, we realized some of our assumptions were wrong. We assumed our users would engage primarily over desktop since we were broadcasting the games in their entirety. Between the 4 games, we saw an average of 68% of the users on mobile web. We then shifted the design process to be mobile first.

Every week, we’d marry the insights from Google Analytics, social media, and inputs from managements to determine what tasks to be added into the next sprint. The example on the ticket screen below was iterations to meet an objective from management. The games were not seeing enough ticket sales. We first put the call-to-action for purchasing tickets at the top of the landing page on mobile in place of the hamburger. On the actual tickets page, we reduced the number of clicks for the user to navigate to the most common purchase – single tickets for the very next game.

Other Select Snapshots

Live Stats During Games
Stats and Game Center
Standings, Schedule, and Game Center

My ad to draw fans to the web platform during gametime: