Problem

When the NHL's contract with Disney Streaming Services ended, NHL.com and the mobile apps were brought back in-house. As part of that transition, the entire Dot Com experience had to be migrated to a new platform and CMS called DeltaTre, and it had to happen within a fixed six-month window. This wasn't a simple lift of existing pages either. The site contained a large number of high-traffic, data-heavy pages, and core fan experiences like Login, Schedules, League Standings, Gamecenter, Club Pages, Player Pages, and Stats all had to hold their consistency and usability throughout the move. Any disruption to those experiences risked hitting fans right as the new season was starting.

Design Goal

The goal wasn't to recreate the existing site as-is. It was to translate the experience into something more templatized, scalable page designs that could actually support a lift-and-shift approach within DeltaTre rather than a full rebuild from scratch. Every page still had to handle complex, dense data while staying clear and readable, and every design had to be flexible enough to absorb future updates without needing a redesign every time something changed. Responsiveness across desktop, iPad, and mobile wasn't optional either. On top of all of that, the end result still needed to feel cohesive, familiar to fans, and unmistakably on-brand for the NHL.

Scope

My work centered on five core experiences: Login, League Standings, Gamecenter Postgame, Player Pages, and League Stats for players. These aren't minor pages. They're some of the most critical entry points for fans looking for live data, postgame information, and player performance, so getting them right mattered more than almost anything else in the migration. I designed each one as a reusable template rather than a one-off solution, paying close attention to content hierarchy, data density, and the edge cases that show up differently across teams and seasons. Throughout, the real balancing act was speed against long-term maintainability. A fast solution that couldn't scale would have just created more rework later.

Challenges

The design and development teams were hired and put straight onto this migration, with almost no ramp-up time. Everyone involved, designers and developers alike, was new, so we were building collaboration patterns and workflows at the same time we were actively designing and building the product itself. Designers worked closely with developers to introduce Figma, its developer handoff tools, and shared documentation practices that could actually support that pace.

The deadline made things harder. Migration, redesign, and development were all happening at the same time under a hard preseason launch date, so design and development often ran in parallel instead of the usual sequential handoff, which left very little room for iteration or rework if something wasn't right the first time. We were also building a new design system in parallel with all of this, which meant resolving inconsistencies in components, tokens, and patterns while designs were still actively being produced, not after the fact. And because DeltaTre came with its own technical constraints, we were constantly figuring out how existing NHL.com content and functionality could actually translate into reusable templates that stayed responsive across every device.

Collaboration

None of this worked without constant, close collaboration between designers, developers, and stakeholders. Regular reviews surfaced technical constraints early, before they became late-stage surprises, and directly shaped design decisions instead of getting discovered after the fact. As our processes matured, we kept refining how designs were documented, reviewed, and handed off, which mattered even more given how new everyone was to working together. That partnership, and the willingness to adjust processes on the fly, ended up being essential to actually hitting the launch date.

Mockups

For each page I owned, I delivered detailed responsive mockups across desktop, iPad, and mobile breakpoints, accounting for how tables, advertisements, modules, and content blocks needed to adapt at each size. Every mockup came with clear annotations covering behavior, spacing, component usage, and edge cases, since those details were what actually kept implementation consistent. I also met directly with developers throughout the build to answer questions, clarify intended behavior, and work through anywhere the design and what was technically possible in the new platform didn't quite line up.