national football league

Designing an efficient game management system for America’s most well-known sports league

Business Problem

The players on the field are often the most visible personnel in a football game, but the NFL employs dozens of personnel to ensure game day is executed smoothly. These people are often behind the scenes, but they are responsible for tasks like inspecting uniforms, spotting injuries, and managing game day incidents. An internal application called the Game Management System (GMS) allows these personnel to execute their tasks effectively, pre, during, and post game. The current GMS was in need of some UX help and a visual refresh, as well as a rebuild of the system from the backend. The system users, different personnel types with a unique set of tasks and responsibilities, each required an interface designed to support them in accomplishing those tasks. Our challenge was to redesign and rebuild the GMS system, with attention given to the unique needs of each user, before the NFL playoff season began in January. We began the project in November, with a smaller scope, but as the scope changed to accommodate additional user roles, our timeline was also extended.

My Role

Project Planning + Leadership. I was the lead and sole UX designer on the project, working with a team of front and backend developers and a project manager. Based on the requirements for the system and the rapid timeline, I devised a UX approach that relied heavily on quick iteration cycles and close collaboration with the developers. I created a project timeline that divided each user role into a sprint and stacked design, development, and QA activities concurrently, so that we could utilize the team and the available time most efficiently.

Interaction + Visual Design. Working closely with my team, I sketched early concepts for the system and then created design mockups and prototypes for client review. Due to the fast paced nature of the project, I was updating designs daily and we would often jump on calls with the client for immediate feedback. I also facilitated workshops and design reviews with our main stakeholders.

nfl-timeline
Visual project timeline showing work divided into sprints

Dream Project + Dream Team

When I first caught wind of this as a potential project, it was pretty tough to hide my excitement. I’m a huge NFL fan, as were several of my other team members. This was a dream project for me, not only because of my love for football, but also because I was passionate and knowledgeable about the subject matter. I got involved with the project from the very early stages, inserting myself into the sales process to help win the work and ensure the design was given the care it required.

I worked with an incredible team on this project, that will always make this project stand out above the rest for me. Being the only designer on such a large, fast project with detailed design requirements could have been overwhelming, but I never felt that way thanks to my team. We worked together every step of the way. The entire team, developers and all, participated in the discovery workshop we held remotely with the client. I felt this was crucial to the success of the project, since we’d be designing and developing in tandem. The developers also got to be part of valuable discussions with the client that involved defining each user role, understanding their tasks, and prioritizing the requirements. Had they not been part of these discussions, I don’t think we would have been able to execute the project as effectively as we did.

One of my favorite parts of this project was the ideation and sketching sessions I conducted with my developers. Devs are usually hesitant to get involved with sketching or discredit their design skills. But I believe developers have such a wealth of knowledge and perspective to contribute to designers. Together we sat in front of a white board wall and worked through various use cases and interactions. We threw out ideas, discussed all the angles of the ideas, sketched them, and built upon them. And because I had both front and backend developers participating in these activities, we were all aligned on the functionality of the design before I even started created mockups.

nfl-sketches
Whiteboard sketching features of the app 

After defining and understanding the various users, our goal was to create templates and reusable elements across the entire system. Each role had unique tasks, but there were also some common elements to each of those tasks. For example, many of the tasks required users to record data in a form or locate data through an advanced search. Each user may require different fields to record or search by, but the actual form elements could be designed and reused throughout the system.

nfl-patterns
1) User notifications    2) League-wide and individual personnel stats by week    3) Filter functionality    4) Form that captures new data entries

The design requirements changed almost daily, so this was another benefit to working so closely with my dev team. I would create a mockup, sit down with my developers, and together we would iterate on the mockup. Once we received feedback from the client or a new set of requirements, we would repeat this same process. Sometimes I would move elements around in Sketch and we’d try out different ideas right there, or sometimes my front end developer would show me how something might look directly in the browser. If I got stuck on a design problem, I called the devs over and asked for their ideas in how I should solve it. I found their technical expertise invaluable because we needed solutions that were user friendly but that could be feasibly developed in a short amount of time.

One of our particularly complex design challenges came one day when our client requested we implement a data heavy table that users needed to scan and quickly locate information. The table would display filtered search results and also needed to be responsive. I had presented an initial design concept that did not incorporate a table, which was how we learned that the client did, in fact, want a table display for the data. After the design review, I sat with my developers and we moved design elements around on my screen for hours in an effort to find a solution that was clean, easy to scan, presented all the required data fields, and worked on mobile. We arrived at a solution the client approved, by recommending we only show the most important categories on the table. Users can click into a detail screen with the full data and the option of editing details about a specific entry. We also created a robust filter feature that would allow users to locate specific entries from hundreds of potential results.

nfl-dashboard
Incident management dashboard: the most important details shown in the table with the ability to filter results and edit individual incidents

Lessons Learned

My favorite part of this project is the collaboration I experienced with my team. We worked so well together in every way: sharing ideas, iterating quickly, and supporting one another. I designed much of the project approach that was executed closely with the development team. I also gained valuable experience explaining my design decisions to a high-profile client. Quite a bit of stakeholder management was required throughout this project, but as we progressed and I was able to explain the rationale behind my designs, we received an increasing amount of stakeholder support. My biggest takeaways from the NFL project are the benefits of cross-team collaboration and utilizing the strengths of the team to design in a fluid, iterative manner. This project will also remain one of my most memorable for the simple fact that I can also say I’ve had the incredible opportunity to work on something for the NFL.