Facemask Design System
Scale resources. Manage complexity.
Role: Design System Manager / Product / UX / UI Design
Platform: Responsive Web, Native App, Smart TV
A case for a component-based design system
At the NFL, design touches all aspects of a fan's digital experience – from the games they watch, to the stories they read, to the stats and profiles they analyze. Our goal was to create products that enhanced the sport of football for every fan. But designing consistent stand-alone experiences for fans of thirty-two teams on three product platforms presented an enormous resource challenge.
The source of our problems
A product audit exposed countless visual and functional design inconsistencies that were impossible to manage and risky to update. With every new update or release, the inconsistencies accumulated exponentially.
A common theme emerged from examining our design process. As designers worked to keep pace with demanding product schedules, communication between project groups broke down. Isolation was the source of our troubles. It resulted in groups duplicating efforts – creating dissimilar design solutions to similar problems. Addressing each rogue element individually would have been impractical without first improving communication across the team.
Like most companies, the NFL is subject to unexpected priority shifts that demand creative resources that weren’t accounted for. Traditional solutions can take their toll on a team, the budget, or both. Victories are often short-lived, expensive and impossible to scale.
These practices further complicated our situation by creating more opportunities for design deviations. And the additional cost to create and manage them was taken directly from the funds budgeted to address our inconsistency issues.
To a scalable design system
We recognized a component-based design system to be the answer to our unification and consistency dilemmas. We also realized creating one would require a sustained long-term effort; a difficult undertaking considering our limited resources had already been promised to a demanding events calendar.
Hall Of Fame
Supber Bowl LI
Facemask’s early predecessor
We called our new design system Facemask and knew it would eventually require dedicated funding. By approaching Facemask as a business tool to unify design efforts, reduce support costs, and deliver a cohesive fan experience, we laid the groundwork to justify the investment in time and resources.
To the product team
Facemask matured as I documented style elements, components, and patterns in the system. The more comprehensive our libraries became, the more adoption grew. And through adoption, we began to realize the utility of Facemask in our mission to unify the fan experience.
The key to a unified team
Communication between project teams improved and overall product strategy became visible to employees at every level. As a shared understanding of product knowledge developed, design feedback became more focused and actionable. The result was a more effective way to share and discuss design decisions which moved us closer to the goal of delivering a unified fan experience.
Introducing creative version control directly improved communication among project teams. Awareness of design problems and style updates increased, and a culture of collaboration emerged. As the application of design elements and interaction patterns in our products grew more uniform, consistency became more of a design-process outcome than a product-design goal.
Version Control Workflow
Scale resources. Minimize support costs.
Prior to adopting Facemask, each NFL team was responsible for the design and maintenance of their own website. Some teams managed their sites internally. Others hired vendors. The result was a collection of team‐sites with vastly different levels of quality, usability, and feature sets.
Using a centralized component library, our product team was able to absorb all thirty-two team websites as part of a redesign of NFL.com which reduced our dependence on external vendors. Facemask made it possible for each team to have equal online representation without the need for additional resources.
Nobody can do it alone
As the only dedicated design-system resource, I had the advantage of moving quickly to create the early foundational elements of Facemask. This “solitary” team model became an obstacle when the team’s pace overtook my ability to keep up with documentation. I needed my role to scale.
Solitary Team Model
Version control made it possible for designers to collaborate with me. As designers recognized their contribution to the system, they developed a sense of ownership. By guiding participation through a “federated” team model, the team grew Facemask into a comprehensive product design resource.
Federated Team Model
Set realistic expectations
Learning new tools and processes was the greatest obstacle to getting the team to adopt Facemask. I learned that changing too much too quickly put pressure and unrealistic expectations on a team still working to accommodate a number of business groups within the league’s media organization.
Approaching Facemask as a product, introducing new elements over time, and designing the system around the team’s existing tools and practices made it more likely for adoption to happen naturally.
Seeing projects through change
The NFL is a media company subject to the same challenges faced by conventional media organizations. Declining cable subscriptions, decreased engagement and pressure to innovate created an environment of constant change in personnel and leadership.
Using Facemask to align the team around a set of product standards and principles kept our product objectives focused. Shared awareness of objectives as a result of improved communication shielded projects from the turmoil of unexpected organizational shifts.