National Football League (NFL) USA
my role. lead UX/UI designer
the business problem.
The players on the field are the most visible during a football game, but the NFL employs hundreds of behind-the-scenes personnel to ensure game day is executed smoothly. They’re responsible for the tasks that make the game happen: inspecting uniforms, spotting injuries, facilitating ad breaks, maintaining equipment, and handling game day incidents. The NFL uses an internal web-based application called the Game Management System (GMS), which allows these personnel to execute their tasks effectively pre, during, and post game. The current GMS needed a more efficient user workflow, a visual refresh, and 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 their respective 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.
exisiting Game Management application
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 project approach that relied heavily on quick iteration cycles and close collaboration with the developers. I created a project timeline that divided each user workflow into a sprint and stacked design, development, and QA activities concurrently, so that we could utilise the team and the available time most efficiently.
interaction + visual design. Collaborating closely with my development 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 updated designs daily and jumped on calls with the client for immediate feedback. I also facilitated weekly workshops and design reviews with our main stakeholders at the NFL.
visual project timeline I created; work divided into sprints according to each personnel workflow and planned so UX & dev happened simultaneously
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 teammates. This was a dream project for me, not only because of my love for football, but also because I was 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 thought it required.
Being the only designer on such a large, fast-paced project with detailed design requirements could easily have caused me huge amounts of stress — but I never felt that way, thanks to my team. We worked together every step of the way. I pushed for the entire team, developers included, to participate in discovery workshops and research activities held remotely with the client before we even started building. I believed 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 that helped them understand who they’re building the app for. Had they not been part of these discussions early on, I don’t think we would have been able to execute the project as effectively as we did.
one day research intensive.
As soon as the project kicked off, we knew we had the massive task of creating an application to meet the needs of seven different user roles. Each of these users, NFL game day personnel, need to complete different tasks and require unique workflows to get their jobs done. Tasks are completed pre-game, during games, and post-game.
So with a very tight timeline and six different roles to understand, I decided to hold a one day research intensive. I booked one day in the calendar, and asked our NFL stakeholders to schedule 1 hour blocks of time with a representative from each user group. The entire project team gathered in a meeting room, got on a conference call with NFL headquarters in New York City, and interviewed users for a whole day.
Prior to the day, I created a questionnaire and sent it out to all the interviewees, who were required to complete it before their interview. I had the chance to look over their responses and share them with the team ahead of time. We went into intensive day armed with baseline knowledge of each role, questions we needed answered, and the ability to facilitate a much richer, informed conversation.
user workflow questionnaire
co-designing with developers.
Full of knowledge about the users we were building for, I facilitated ideation and sketching sessions with my development team. Developers are often hesitant to get involved with sketching or discredit their design skills, but they have such a wealth of knowledge and unique perspective to contribute. Together we sat in front of a white board wall and worked through various use cases and workflows. We threw out ideas, discussed all the pros and cons, sketched them out, and revised. 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 designing (amazing!).
collaborative whiteboard sketching of the various user workflows within the app
creating a design system.
After defining and understanding the various user roles and workflows, our goal was to create a design system with reusable patterns, components, and templates that could be applied across the entire application. Our stakeholders wanted to created a consistent look aligned with NFL brand, and we knew creating a design system would create efficiencies to save valuable production time and help us meet our tight timeline.
While each personnel role had a set of unique tasks to complete, they also shared common elements across each of those tasks. For example, an Incident Manager might search for any incidents in a given week during the season, while a Uniform Inspector might search uniform violations for a specific player or team. The design system enabled us to create consistent search form elements someone in any role could use, while displaying custom search fields based on the role of the user logged into the app.
design system created for the application
design system applied across: 1) user notifications 2) league-wide and individual personnel stats by week
3) filter functionality for different roles 4) form capturing new data entries
solving design challenges collaboratively.
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.
A particularly complex design challenge popped up one day when our primary stakeholder at the NFL requested a data heavy table. Users needed to scan and quickly locate information on this table, which 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 the data displayed on a table. After the design review, I sat down with my developers and together 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 responsive. We arrived at a solution: 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.
The client approved the design and the dev team started implementing it right away.
incident management dashboard: the most important details shown in the table with the ability to filter results and edit individual incidents
project outcomes.
I loved working with my development team so closely on this project from start to finish. We worked well together in every way: sharing ideas, iterating quickly, and supporting one another. I designed the project approach that was executed in close consult with the developers, and I incorporated their feedback into every design decision I made. 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, our stakeholders’ trust in us grew.
This project showed me the value in leveraging the strengths of a cross-functional team to facilitate a productive, collaborative, iterative design process — especially beneficial for projects with tight timelines and hands-on stakeholders. I believe the success of this project can be attributed to the way each unique role on this team functioned as a cohesive unit.
The NFL was so pleased with the rollout and adoption for the first phase of the project, they approached the team about adding additional user roles and functionality into the application.