Problem
NHL EDGE had become a low-traffic, underutilized product managed by an external partner. The experience relied on outdated, inaccessible data visualizations and lacked a clear purpose for fans. Players, goalies, and teams were presented without meaningful context or narrative. Comparison tools failed to surface insight, leaving fans with raw numbers but no understanding. As a result, EDGE lacked storytelling elements and struggled to engage users or encourage repeat visits.
Design Goal & Approach
The goal was to transform NHL EDGE into a compelling, story-driven destination that fans would return to regularly. Rather than presenting static stats, the experience needed to help fans explore strengths, tendencies, and matchups across players and teams. The end product needed to feel neutral, credible, and insightful without making explicit judgments. EDGE also needed to feel connected to the broader NHL brand, with a clear relationship to player and team experiences elsewhere on NHL.com. The redesign focused on turning complex data into accessible, meaningful stories. Neutral color palettes were carefully developed to work across all 32 teams while avoiding bias. Patterns were introduced to support colorblind users and reduce reliance on color alone. Visualizations were restructured to emphasize comparison and context rather than isolated metrics. Language and visual cues were intentionally restrained to allow fans to form their own conclusions.
Challenges
This project was delivered end to end, beginning with rethinking the overall page hierarchy and sitemap before designing individual screens. Although we had a product manager, we had no project manager during much of the design phase, requiring myself and my colleague to manage timelines independently. We also navigated extensive feedback from numerous subject matter experts, each with differing priorities and interpretations of the data. Color and theming were especially complex due to accessibility requirements, team associations, and the risk of implying positive or negative performance. A late timeline shift to elevate player headers added pressure to meet a strict preseason launch deadline.
Mockups & Prototypes
Before final designs, significant effort went into redefining the sitemap and page hierarchy to ensure experiences were connected and free of dead ends. We also prioritized which information belonged “where” on each page. Prototyping played a critical role in aligning stakeholders and SMEs around flow, interaction, and narrative. Numerous prototypes were created to demonstrate how fans would move between players, teams, and comparisons. These artifacts helped clarify intent and reduce ambiguity across a complex system. Prototyping ensured EDGE functioned as a cohesive product rather than disconnected pages. All experiences were designed across desktop, tablet, and mobile from the outset. Data-dense layouts were carefully adapted to maintain clarity at smaller screen sizes. Player headers and key moments were prioritized to preserve emotional impact across devices. Responsive behavior was documented to ensure consistency during development. This approach ensured EDGE felt intentional and usable regardless of entry point.
Landing pages, details pages, prototypes
Challenges: No project manager / Avoiding bias with color and rank / Multiple screen breakpoints / Separate design system components
Conclusion
NHL EDGE launched as a modern, accessible, and story-driven data platform just before our deadline. The redesigned experience reintroduced purpose, clarity, and engagement to advanced hockey statistics. Fans could explore player and team performance, compare matchups, and build their own insights. The product was delivered successfully ahead of preseason and actively promoted by the marketing team, including on television. NHL EDGE now stands as a fully realized, end-to-end product within the NHL digital ecosystem.