Shipped
About
About EA Sports - NHL
NHL 22 and 23 are ice hockey simulation video games developed by EA Vancouver and published by EA Sports. It is the 31st and 32nd installment in the NHL video game series and was released for the PlayStation 4, PlayStation 5, Xbox One and Xbox Series X/S.
NHL 22 and 23 are ice hockey simulation video games developed by EA Vancouver and published by EA Sports. It is the 31st and 32nd installment in the NHL video game series and was released for the PlayStation 4, PlayStation 5, Xbox One and Xbox Series X/S.
Overview
Overview
For NHL 22 and NHL 23, I led the creation of the first scalable design system for events, while also designing the experience surfaces themselves driving a more structured, repeatable approach to live content.
Alongside this, I identified and implemented a system extension that allowed up to 24 players within a single surface, helping the team scale new event formats without redesigning templates from scratch.
For NHL 22 and NHL 23, I led the creation of the first scalable design system for events, while also designing the experience surfaces themselves driving a more structured, repeatable approach to live content.
Alongside this, I identified and implemented a system extension that allowed up to 24 players within a single surface, helping the team scale new event formats without redesigning templates from scratch.
Product
Desktop, PS4, PS5 and XBOX
Skills
Experience Design
Design System
Stakeholder Management
Visual and Interaction design
My Role
Experience Designer
Product Design
Timeline
Q1 2021 - Q1 2022
Team
Joanne Chen, Jeff Schram
Snapshot
Before NHL 22, live events in the game were handled on a one-off basis, every event layout had to be built from scratch, which slowed production and made consistency nearly impossible. Working on this platform wasn’t your everyday design job. It was highly technical and fast-paced, involving multiple product areas like live ops, art, and engineering, along with external partners.
Since there was no precedent, our team had to invent a completely new system: reusable UI components, modular layouts, interaction patterns, and a framework for integrating 3D elements, all from the ground up.
Before NHL 22, live events in the game were handled on a one-off basis, every event layout had to be built from scratch, which slowed production and made consistency nearly impossible. Working on this platform wasn’t your everyday design job. It was highly technical and fast-paced, involving multiple product areas like live ops, art, and engineering, along with external partners.
Since there was no precedent, our team had to invent a completely new system: reusable UI components, modular layouts, interaction patterns, and a framework for integrating 3D elements, all from the ground up.
Some Stats
Over 100 live events supported across NHL 22 & 23 using the system.
Over 100 live events supported across NHL 22 & 23 using the system.
Creation time for experience surfaces reduced by 50% compared to one-off workflows.
Creation time for experience surfaces reduced by 50% compared to one-off workflows.
Previously capped at 16 players, the system now handled 24 per experience surface seamlessly.
Previously capped at 16 players, the system now handled 24 per experience surface seamlessly.
Constraints
Designing live experience surfaces for NHL came with several constraints that shaped every decision. Live events often launched under tight deadlines, so the system needed to be flexible and easy to use for designers and production teams. At the same time, it had to scale reliably across varying game formats and content updates without compromising performance or visual consistency.
Designing live experience surfaces for NHL came with several constraints that shaped every decision. Live events often launched under tight deadlines, so the system needed to be flexible and easy to use for designers and production teams. At the same time, it had to scale reliably across varying game formats and content updates without compromising performance or visual consistency.
Constellation of Constraints
The system had to handle varying numbers of players and layouts (up to 24 per surface) without breaking or requiring manual fixes.
The system had to handle varying numbers of players and layouts (up to 24 per surface) without breaking or requiring manual fixes.
Every live event needed to maintain a coherent look and feel across seasons, teams, and game modes, even as content changed frequently.
3D elements, animations, and card layouts had to work within the game engine and pipeline without affecting performance.
© Selected Works
Product Designer
© Selected Works
Product Designer
© Selected Works
Product Designer
More Work ©
More Work ©
More Work ©
Literary Review of Canada
Literary Review of Canada
(03)
Literary Review of Canada
Literary Review of Canada
(03)
Literary Review of Canada
Literary Review of Canada
(03)
(04)
(04)
(04)