Facemask Design System

The NFL's Facemask Design System is a framework used to create cross-platform experiences for all football fans. With Facemask, the NFL's product design team was able to scale design resources to create fan experiences for the league and its 32 teams with a consistent visual and functional language.

My role as Facemask's sole dedicated resource included research, definition, design, management and distribution of all Facemask Design System artifacts.

Client: NFL
Role: Design system manager / Product / UX / UI Design

Foundational Elements

Product Design Principles

Facemask aligns the NFL product design team around a core set of principles.

Clarity.

Remove ambiguity and help fans focus. When presenting options, be clear to help fans make decisions with confidence.

Consistency.

Create a sense of familiarity and increase intuition by applying the same solution to similar problems.

Fan centered.

When making product decisions, anticipate the fan's needs and follow through to build trust and affinity.

Quality.

Demonstrate respect for fan's time and attention through quality work. Ensure everyone's time is time well-spent.

How it works

Standards & Principles
UI Component Libraries
NFL Fan Experiences

Facemask assembles primitive UI elements into progressively more complex functional combinations used to create NFL fan experiences.

Top layer

Standards & Principles

Global brand guidelines, pattern libraries and primitive style elements are collected and ready to use in any fan experience on any platform.

  • League logos
  • Color palettes
  • Font files
  • Voice and tone

Middle layer

Platform Component Libraries

Primitive elements are assembled into simple reusable components for product platforms.

  • Responsive web
  • Native app
  • Connected TV

Library Samples

Base layer

NFL Fan Experiences built with Facemask

NFL Mobile App

NFL.com

NFL Network App

NFL TV App

More Work