top of page
Redesigning the Official NHL App
Improving the NHL mobile experience through a revamped UI, and seamless interactions for hockey fans everywhere!
Project Specifics
-
Product Designer
-
Oct 2022 - Dec 2023
-
Mobile consumer app
THE PROBLEM
The NHL app needed a modern UI, a place to watch game highlights, and a personalized onboarding
The old look NHL app lacked a modern feel for what an app in 2024 should be. Visually, the UI looked old and cluttered. The interaction design lacked basic actions that are commonplace in other sports apps.
User experience feedback from previous versions requested the inclusion of a central place for video highlight footage. There was also a need for a more customizable app, so we empowered our users to achieve that through an enhanced onboarding flow.
THE SOLUTION
Revamped the interface to give the app a modern feel with updated components, colour, typography, and styles
1
Colour System
Typography
Spacing and Grid System
Component Libraries
2
Provide a central location for video highlight footage
Video Tab Home
In-App Video Player
Full Screen Player
A new dedicated video section in the main navigation gives fans access to all the NHL content
3
Create a thorough onboarding, where users can customize the app for their preferences
Ensures a consistent navigation process that provides users with clear indications of progress
Communicating the app's key value propositions and facilitating account creation
APP FEATURES
Scores
The Scores tab has been completely revamped to emphasize information in a clear hierarchy. Using the
seven-day date picker users can swiftly access the most relevant games. A contextual menu is available to centralize tertiary actions in a consistent location.
Game Center
The feature has undergone a complete overhaul to enhance the user experience, with simplified features designed to provide the most important pre, live, and post game data.
NHL Latest
The NHL Home screen has undergone a significant redesign that aims to provide a more editorial atmosphere and encourages users to visit regularly by implementing a dynamic system of updates.
Clubs
The clubs section has been expanded, giving individual clubs more flexibility to organize and display content as they prefer. Each club has its own navigation, allowing for improved organization of important information like schedules and tickets.
Standings
The standings feature has been optimized for dark mode, with increased padding between data elements to make the table more legible. Additionally, the app now includes a conference view.
More & Settings
We have given the "More" and "Settings" sections a thorough audit and streamlined them, ensuring users enjoy a more intuitive experience.
DESIGNING ACROSS MULTIPLE PLATFORMS
iPad and Apple Watch Designs
The NHL app is used across multiple platforms besides iOS and Android. Designing the UI component libraries to adapt to varying screen sizes was vital to maintaining a consistent experience. The increase in screen size with the iPad allows for more features to be included in one screen. The Apple Watch however provides the opposite constraints, designs needed to be minimized in size while still communicating key features.
COLLABORATING ACROSS MULTIPLE TEAMS
NHL design team and MLSE engineering teams
Throughout the process of redesigning the NHL app, our design team was constantly receiving and seeking advice from the NHL Design team (based in New York), and from our own MLSE iOS and Android engineering teams.
NHL's design team
With a minimum of two design critique sessions per week, the NHL design team provided honest feedback towards maintaining branding, and overall usability. Their team consisted of the Director of Design, Brand Director, Lead Editorial writer, multiple senior product designers and researchers.
During the sessions there was a heavy emphasis on ensuring each feature was effectively presenting the correct information to a user. After the functionality was confirmed, the brand communication was analyzed. The branding critique would ensure that every single hockey team in the NHL would have their logo, colours, and key players highlighted in the appropriate manner.
Meeting with seasoned product designers multiple times per week to review my work gave me a understanding of how they approach problems and manage constraints. I was able to translate those learnings towards my own work and critically analyze it before the review sessions themselves. I actively attempted to identify mistakes and correct them before future meetings, based on how I received feedback from previous critiques.
MLSE's iOS and Android engineering teams
MLSE was given this project with considerable time constraints, having to design and develop a new version of the NHL app in one year. This meant that designs were constantly being handed off to mobile engineers to be created.
With multiple design handoffs occurring weekly, our team and the engineering team needed to speak the same language. To facilitate that, we created a unified design system that would be implemented across all platforms. The design system would cover colour codes, typography styles, grid spacing, and most importantly responsive component libraries.
The naming conventions for each individual aspect were the same for designers and engineers. For example, the primary colour naming convention across light and dark mode was: Light/Utility/Primary and Dark/Utility/Primary. This unified language eliminated simple errors revolving around colours and typography. In terms of grid spacing we adopted a 4px pattern where spacing would vary based on the need but it would always follow as a multiple of 4,
Working side by side with engineers gave me an appreciation for the amount of pressure they were under. Me being cognizant of this, I always tried to eliminate friction at any given point. I would highly prioritize answering questions from engineers about the design, and ensure that all design system conventions were followed so that no bottlenecks would form. The benefits to this system of working created a synergy between designers and engineers, which ultimately propelled the development of the app faster than it would have without these established systems.
CONCLUSIONS + LESSONS LEARNED
Project takeaways
1)
Finding opportunities within constraints. The project had to be completed within 12 months, which included a whole new redesign followed by app development. With such a massive constraint on the entire design process, we had to look for effective ways to streamline certain processes with the hope of increasing efficiency and reducing errors. One such innovation that came about was the unified handoff language used between designers and engineers. Unifying the naming conventions of colours, typography styles, and component libraries allowed for seamless handoff of design files and vastly reduced communication errors.
2)
Cross functional team members should be involved from the beginning. By aligning with component naming conventions with engineers we reduced a lot of communication errors for the future. This was just one way we included engineers in the design conversation from the beginning. The other ways included involving key members from both the iOS and Android engineering teams in design ideation meetings. By keeping them informed of the design direction, they were able to weigh in on technical feasibility of suggested features. Based on their explanation, we could either dive deeper into the feature or pivot towards another concept.
3)
White boarding is amazing! Working directly alongside my team members in the same physical space was extremely constructive for the overall project. By sharing ideas and seeing collective visions visually unfold, it led to some of the most insightful conversations I've ever had and also towards the creation of the feature designs on the app!
_iphone13midnight_portrait.png)
_macbookgrey_front.png)
bottom of page