[MAKE PRETTY]. Access Level > Time > Relevance > Personalization

Methods: Sketching, Wireframes, Competitive Analysis

Sketching

Given the constrained developer resources and the lack of a wireframe component library at the NFL, I wanted to avoid any excessive work for the engineers or myself. I used sketches to conceptualize ideas that could be easily scrapped or adjusted with little effort. I then met with the developer lead and used the sketches to communicate feature ideas and confirm feasibility before moving onto building wireframes.

Proposed Concepts and Features

Wireframes

With reasonable confidence that my concepts weren’t overly ambitious, I began wireframing the prototypes I’d mapped out and sketched. This process was iterative as I would continuously review my concepts with direct reports who would provide feedback and guidance. I focused on 4 user flows which would encompass the majority of likely state changes, including some of the thorniest problems like watching a game immediately after it finished where availability would be limited. This allowed us to design for the worst-case scenarios first then backtrack into the easier problems to solve. I prefer to design for the worst case first as it tends to save work in the long run.

[INSERT EARLY STAGE WIREFRAMES]

Methods: Design Critique, Low-Fidelity Prototype, Wireflows, Moderated Remote Usability Testing, High-Fidelity Comps

Add archive Modal
Switching toggle and wording for scores

Final Wireflows

After reviews with my team, the fidelity of the wireframes increased to a level that would be sufficient for some remote testing. The Wireflows seen here represent the process of ideation through evaluation up to this point and include screens from other parts of the app that are part of the 4 “happy paths.” I used these wires to create interactive InVision prototypes which I tested remotely via Validately.

This round of testing using the wireframes was meant to look for major issues with the information architecture and design so that we could change them during the iteration to high-fidelity comps. As our UX researchers were busy running testing on another section the app, I opted to perform my own remote testing for this stage in order to gather user feedback. While I believe a designer testing their own designs in never ideal, when resources are constrained it is sometimes necessary. In this case, I would be testing the lower fidelity versions, but once the comps were completed the UX research team would test the high-fidelity versions as part of their typical process.

Finding 1: The Games Archive Card was Not Discoverable

The Games Archive card which was meant to bridge the current season games housed in the Games section with the previous season games housed in the Watch section, however in testing users struggled to find it under the ‘Final’ heading of the Games page. It was originally put there because all of the games available in the Archive would be considered 'Final’ as they were completed. However, it was located too far down the page to be discovered. To get around this, we chose to move the card up above the ‘Upcoming Games’ section. This made it very visible to users which is important as its a new feature. Once the feature had been established in fan’s minds, we could consider deprioritizing it to a lower part of the page.

Finding 2: The Watch Live and Listen Live buttons were redundant, only one was necessary and should be surfaced contextually.

Fan feedback told us that users who were able to Watch a live game were unlikely to also want to Listen to it. As the user cases for watching and listening were very different and the fact that Listen Live was surfaced to act as a ‘next best option’ if the game wasn’t available to watch, we chose to only surface Watch Live if it was available and otherwise surface Listen Live. This reduced clutter and enhanced discoverability of the features.

Finding 3: Excessive Spoiler Warning Modals

In order to avoid showing game score spoilers to Game Pass users who weren’t expecting it, we added a spoiler warning modal before an event where scores would be surfaced. This included the Scores toggle, Game Details pages, and Live Game pages. However, in testing we found we’d erred too far on the side of caution and the modals were intrusive to users. In the next version, we only kept the spoiler modal for when you toggle scores on. For something like clicking into a Live Game, we assumed the fan knows they are going to expose themself to a Live game’s score.

High-Fidelity Comps

Following the remote testing of the wireframes, I handed off the deliverables and my findings from testing to the product designers who integrated those findings into the next level of fidelity and prepped the prototype for testing. Once this was completed, I updated my wireframes to match the high-fidelity versions so that there was version consistency in the documentation.

These comps were then included in a test of the larger information architecture performed by the UX Research team. UXR met with me and the product designer I was partnered with to see what what our goals were and what we’d like to find out. As the previous tests were far from comprehensive and changes had been made between the wireframes and the comps, both myself and the product designer had questions around whether fans would understand that certain interactions were available, where they might find certain information, and how they would perform some well-known tasks like finding a game recently played by their favorite team.

Feature Walkthrough

Stand on the Shoulders of Giants

Knowing that design and engineering resources were constrained meant that I had to be judicious about what I asked to be built. I needed to as many existing components as I could in order to preserve resources for high-priority tasks like data migrations and Gracenote integration. Luckily, I’d be gifted some very smart colleagues who had created a component library which was easily accessed and catalogued. Rather than build the UX from the ground up including my own custom components, I tweaked their existing library to the needs of the new products. Preserving these resources ended up paying extra dividends in the long run as COVID-19 forced many of our typically in-person events like the NFL Draft to be remote, which meant engineering resources were pushed to the limit building a new experience in a matter of weeks and handling the complications that come with an influx of traffic.

Always Review the Reasoning Behind Features You Disagree With

One of the hardest things to pick up at any job is the institutional knowledge that your predecessors hold on to, sometimes without even realizing it. The lack of communication of this knowledge can lead to preventable mistakes and learning the same lesson twice. Avoiding these mistakes was a major focus of mine when I first came into the NFL. Ironically, my lack of football knowledge was probably the reason I was so obsessed with asking my coworkers about the product’s history; I had little experience with broadcast sports so I needed to learn a lot quickly and being a researcher I liked to interview people. Luckily, I was surrounded by some of the the world’s most knowledgeable experts in the world on the football business. As I reviewed the existing app, I asked why certain decisions were made. Some of those decisions had very good legal or technological reasoning. Other decision, like the lack of Game Pass integration into the app were merely an artefact of a lack of resources at the time. These interviews allowed me to know where the pitfalls were and where the opportunities were before I even opened my Sketch which was a huge advantage.

Designing for the Unpredictable

NFL Broadcast rights are being renegotiated in 2021 - one year after I redesigned the app around helping fans navigate the tangled web of authentication rights. One of the biggest challenges throughout this project was trying to design for unknown constraints that had yet to come out of legal negotiations. How soon after air will Game Pass users get access to games? Will live audio be available next season? How many concurrent streams per account will be allowed? All of these questions don’t have answers yet, so the best I could do was make the design flexible and modular to react to those unknowns. That is one of the strengths of using cards in app design - you can remake cards and elements relatively easily without having to redesign the entire app - that should provide the NFL with some level of future-proofing for when those constraints do become known.