NHL: Dot Com

Problem

Following the end of the NHL’s contract with Disney Streaming Services, NHL.com and the mobile apps were brought back in house. As part of this transition, the entire Dot Com experience needed to be migrated to a new platform and CMS called DeltaTre. The site contained a large number of high-traffic, data-heavy pages that needed to be rebuilt within a fixed six-month window. Core fan experiences such as Login, Schedules, League Standings, Gamecenter, Club Pages, Player Pages, and Stats had to maintain consistency and usability throughout the migration. Any disruption to these experiences risked negatively impacting fans ahead of the upcoming season.

Design Goal

The goal was to create scalable, templatized page designs that could be implemented efficiently within DeltaTre with a lift-and-shift approach. Each page needed to support complex data while remaining clear, readable, and consistent across the site. Designs had to be flexible enough to accommodate future updates without requiring redesigns. Responsiveness across desktop, iPad, and mobile was a core requirement. The end result needed to feel cohesive, familiar to fans, and aligned with the NHL brand.

Scope

The work focused on several core dot-com experiences: Login, League Standings, Gamecenter Postgame, Player Pages, and League Stats (Players). These pages represent critical entry points for fans accessing live data, postgame information, and player performance. Each page type was designed as a reusable template rather than a one-off solution. Careful attention was paid to content hierarchy, data density, and edge cases across teams and seasons. The scope required balancing speed with long-term maintainability.

Challenges

The design and development teams were hired and immediately tasked with delivering this migration, with little ramp-up time. All designers and developers were new, requiring the team to establish collaboration patterns, workflows, and processes while actively designing and building the product. Designers worked closely with developers to introduce Figma, Figma’s developer handoff tools, and shared documentation practices that supported efficiency and clarity. A strict deadline tied to preseason launch meant there was limited room for iteration or rework. At the same time, the team was building a new design system in parallel, which required resolving inconsistencies in components, tokens, and patterns as designs were being produced.

Collaboration

Designers worked closely with developers and stakeholders throughout the project to maintain alignment and momentum. Regular reviews helped surface technical constraints early and informed design decisions. As processes evolved, the team refined how designs were documented, reviewed, and handed off. Close collaboration helped bridge gaps as everyone adjusted to new tools and workflows. This partnership was essential to meeting the aggressive timeline.

Mockups

For each page, I delivered detailed responsive mockups across desktop, iPad, and mobile breakpoints. Designs accounted for how tables, advertisements, modules, and content blocks would adapt across screen sizes. Each mockup was accompanied by clear annotations outlining behavior, spacing, component usage, and edge cases. These annotations were critical for ensuring consistent implementation. I also met directly with developers to review designs and clarify any open questions prior to build.

Gamecenter, League Stats, Player pages (desktop + mobile web)

Challenges: New team / Leveraging new design system / Templatizing pages

Conclusion

The redesigned Dot Com pages successfully launched ahead of the preseason deadline. Core fan experiences were migrated to DeltaTre without disrupting usability or visual consistency. The templatized approach and design system foundation enabled faster development and easier future updates. Clear documentation and responsive designs supported a smooth handoff from design to engineering. The project established a scalable framework for NHL.com moving forward.