The NFL Playoff Challenge

Overview

✴️ Impact Statement

The NFL Playoff Challenge is a prediction game for the NFL playoff that connects friends with each other and adds more excitement to the playoffs. A friend and I have run this for many years using documents and spreadsheets. While the game itself is fun, the rules are very involved and can be confusing to players. Our workaround has been constant messaging to group chats and manual updates to the spreadsheets. The game currently has a high barrier to entry for new players, and, with all the manual processes, is not scalable. Developing a solution to make the game accessible and welcoming to all player types would greatly improve the game experience and bring friends closer together. 

I researched, designed, and built an interactive prototype of a mobile app for the NFL Playoff Challenge.

🙎🏼‍♂️ My Roles

UX Researcher, UX/UI Designer

Competitive analysis
Stakeholder interview
Information architecture
Hand sketching
Tech scoping
Wireframing
Interactive prototype
Usability testing
Affinity mapping
Iterative design

Pen and paper
Figma
Zoom
Google Sheets

🛠 Tools

📈 Methods

🏁 Establishing a Baseline

I’ve iterated on the challenge each year, evolving it from a document to a well-organized spreadsheet. So, I thought it best to utilize the tools I already had and gain some insight before launching into the next iteration. I did this through usability testing and a competitive analysis.

I ran usability tests with the existing spreadsheet and participants who have played the game previously. Users ranked the core functions of making a bracket and making a prediction as fairly easy to use.

The hardest thing for users was locating and understanding the points they received for the score predictions. Users were also overwhelmed by information on the scoreboard, and said it was a lot to take in at once.

This established a baseline that I could test my interactive prototype against. If a mobile app were to be effective it had to be as easy or easier to use than the spreadsheet, and provide additional features that couldn’t exist in a spreadsheet.

Usability Tests

Usability test average ratings
On a scale of 1-5 with 1 being easiest and 5 being most difficult

I also completed a competitive analysis of sports bracket and prediction apps. I was looking for the common features in these apps, and any standout features that made the app more appealing to use.

Competitive Analysis

My competitive analysis

An area I couldn’t test with this user base, but knew was important to my problem space, was teaching and understanding of the rules. Since these participants had already played the game, they didn’t need to learn the rules. In order to make the game scalable, I had to incorporate rules explanations in the mobile app. 

🤔 Designing Informed Features

To deepen my understanding of the history and goal of the game, I interviewed the original creator of the game, who I’ve collaborated with for the past few years. He described the game in three levels:

  1. One level is the games themselves (the actual NFL playoff games)

  2. One level is how we use the games in the playoff challenge

  3. One level is how we connect with friends through the game

These core principles influenced my thinking and work throughout the project. In addition to meeting user needs, I made sure that any features or design decisions pointed back to these principles.

Stakeholder Interview

Some of my notes from the stakeholder interview

I synthesized my findings from the first usability test, competitive analysis, and stakeholder interview to define a list of features. I brainstormed and sketched all sorts of ideas, not just those needed for an MVP.

I then met with a developer who tech scoped my 30 initial feature ideas.

Narrowing the Focus

My tech scoping meeting was revelatory. I learned all about APIs, server-load, and socket connections. The biggest thing that stuck with me was the developer saying that “building an app takes a lot work.” What I first thought might be a simple app to actually develop and build proved to be way more involved than I thought. This wasn’t discouraging to me. I instead narrowed my feature set down to the bare essentials needed to run the game, informed by my preliminary research and the tech scoping results. View full feature set and tech scoping notes.

Tech Constraints

Some features and notes from tech scoping

↔️ Compacting Information

The biggest challenge I overcame was compacting lots of information into a small space and designing massive amounts of variations for this information. There’s a ton to include for a sports team: names, logos, colors, records, etc. There’s also a lot of information to convey within the bracket and prediction systems: who you picked, if you were right or wrong, how many points you received, etc.

A lot of this information is variable based on a user’s decision and the results of the games. For example, a bracket pick looks one way when you make your bracket and another way when you look at the result of a game.

The many states one bracket pick can take

These designs didn’t fit together neatly right away. When I first started designing, I got lost in the maze of components and states. So I moved away from digital and went back to hand-sketching to make sense of the information I had. These sketches were critical to the success of my design. Slowing down and intentionally thinking through the components totally cleared my mind and gave me a clear goal to design towards.

Atomic Design

Hand  sketches of the atomic design

From the sketches, I designed my component system atomically. Each component builds into the next which ensures consistency in look and feel while allowing for variation. I also built a complex set of nesting components in Figma to speed up my design process. Any one part of a larger component can be changed to a different team, a different state, or a different orientation. This was a bear to take on, but paid off as I continued to iterate my design.

Final components of the atomic design

🎨 Iterate, Iterate, Iterate

I’ve iterated on the Challenge each year, evolving it from a document to a well-organized spreadsheet. The mobile app is the next step in this process. It expands on years of refinement and takes the Challenge to the next level.

Past document and spreadsheet versions
Sketches for the mobile app

I built a high-fidelity interactive prototype to test with new users, and compared those results with results from my first round of usability testing with the spreadsheets.

I met my first goal: the app was easier to use than the spreadsheets for making a bracket and score predictions. But I fell short of my second goal: the rules were difficult to understand and users were not confident that their understanding of the rules was correct.

Comparing Results

Comparing user ratings

Other themes that users expressed:

  1. Problem: Users wanted in-app stats and Vegas lines to inform their picks
    Solution: Information overlay available for each match-up

  2. Problem: Users were confused by the shorthand of some of these rules
    Solution: All rule buttons are tappable for a brief description of the rule

  3. Problem: Users said they wanted to see the games that were played while looking at their bracket results
    Solution: Redesign incorrect picks for clarity, and include the actual game alongside the bracket pick

  4. Problem: Users were overwhelmed with information on the scoreboard in the earlier spreadsheet version
    Solution: Split the scoreboard into a leaderboard and a separate feed

Problems and Solutions

The final result of my work is a high-fidelity, interactive prototype of the NFL Playoff Challenge mobile app. View the prototype here. Some screens are shown below:

Interactive Prototype

⏩ Next Steps

To take the app beyond the current MVP state, I would build out player profiles that summarize a player’s picks and breaks down their results. I would also add customization options to personalize the color palette to a user’s favorite team. I’m also interested in hiring a developer to build this app. Before doing that, I would do research into NFL and live sports APIs, as well as cost of server space needed to run the app.