Creating a player-centered design system framework for EA Sports’ NHL Franchise that is aligned across production, development and design

Experience Design, Product, UI/UX, Strategy, Research

Client
Electronic Arts
Team
NHL
Duration
1.5 years
Role
Product Owner, UX Designer, UI Designer, UX Strategist, Service Designer, Communications
Deliverables
Design system (UX toolkit and CC library), design team roadmap
Note

Coming soon

The full details of the project is currently unavailable to view on the site, but will be ready in a few weeks. For now, here’s a sneak peek below. Please check back to see the project in detail.

Figma UX toolkit
NHL Design System Roadmap
NHL Design System Roadmap
NHL Design System Roadmap
Overview

Championing consistency and service-thinking in both design and development to create a better product and workflow year over year

Electronic Art’s ice hockey simulation videogame, NHL, is a franchise series that runs on a tight yearly cycle. Each year a new videogame is produced and each year, the team cuts proposed features due to a lack of time. The lack of time can be attributed to the lack of a consistent system in both design and development. There is no central source of truth; components are created on the fly and produced in different manners. This often leads to UX, UI and code inconsistencies gamewide and takes away from key experiences users seek, leading to disappointment and resentment from loyal fans.

Through a series of gamewide audits, interviews and discussions with various stakeholders, competitive analyses, component naming classifications, prototypes and more, I developed an initial design system framework for the NHL team. The system champions consistency and provides faster workflows, linking designers with developers in one common language and grounds components into a Figma toolkit and CC library, as a starting point for a full-fledged design system to come.

Role

The design system team consisted of one designer and one developer.

As the sole designer and product owner, I was responsible for planning out the design system roadmap, doing gamewide audits, creating the Figma toolkit for UX designers and working with a UI designer to create a CC library. Taking this project on through a service design lens, I ensured every step was accounted for through the roadmap, setting up meetings with stakeholders and working with the developer to ensure components translate from design over to code in an efficient manner.

As the advocate for consistency, I made sure the team was united on what components we should use for designs and validate reasonings around any new components that were introduced. Through a series of gamewide audits, interviews and discussions with various stakeholders, competitive analyses, component naming classifications, prototypes and more, I developed an initial design system framework for the NHL team. The system champions consistency and provides faster workflows, linking designers with developers in one common language and grounds components into a Figma toolkit and CC library, as a starting point for a full-fledged design system to come.