HockeyHub App
Jessica Campbell’s trailblazing role behind the bench marked a turning point—not just for the NHL, but for the culture of the game. If hockey is entering its next golden era, the future won’t just be about who’s on the ice. It will be defined by who’s watching, cheering, and showing up. The time to bring in new voices, new faces, and new energy is now.
These first iteration wireframes and prototype explore the development of a mobile app designed specifically to create a welcoming environment that enhances the overall hockey experience for all fans (new, underrepresented, long-term, and others). Providing resources for potential fans, community engagement, and news updates, this is a comprehensive platform for all hockey fans to help grow the community as a whole.
The next golden era of hockey players is now—let’s make it the next golden era of fans too.
Note: This is an ongoing project. If you would like to work with me, please submit a message here.
HockeyHub Prototype
Created in Figma, this first iteration prototype allows you to click through the pages of the app.
To return to the login page (and beginning of the flow), click logout under the profile settings.
Project Breakdown
-
Project Breakdown -
1.
What audience is this created for?
New and Underrepresented Fans include individuals just starting their journey into hockey, encompassing diverse groups such as women, people of color, the LGBTQ+ community, disabled fans, young fans, and those with no prior connection to the sport (such as having a family member who is a fan). This app is designed to cater to their unique needs by offering a welcoming and user-friendly experience. Features like a “Hockey 101” section, term breakdowns, and video tutorials in layman’s terms that will simplify the learning process, helping newcomers grasp the fundamentals of the game. By providing resources that break down barriers to entry, the app aims to equip new fans with enough knowledge that they feel confident enough to interact with current fans of the sport.
For Long-Time Fans, the app serves as a comprehensive platform that enhances their ongoing engagement with the sport. While not the primary focus, these users will benefit from the app’s consolidated features, allowing them to easily access player statistics, game updates, and team merchandise—all in one place. This organization not only streamlines their experience but also supports their continued passion for hockey.
Overall, the app prioritizes new and underrepresented fans, ensuring that it creates an inclusive environment where all users can share in the excitement of hockey. By focusing on accessibility and community engagement, the app aims to break down barriers and cultivate a vibrant hockey culture that resonates with fans from all backgrounds.
2.
Other hockey apps and platforms
I explored several hockey apps to understand how they serve the fan community. The Official NHL App stands out as a primary resource for fans, offering live game streaming (with a subscription), team news, and statistics. However, I noticed it might not cater specifically to new or underrepresented fans. There have also been many complaints from even long-term fans that the official app is not intuitive and difficult to navigate. Then there’s theScore, which provides live updates and stats across various sports, including hockey, but sometimes the hockey content gets overshadowed by other sports.
The NBC Sports app allows users to stream NHL games live and access expert analysis, but I found its broader sports focus could dilute the hockey-specific experience. For dedicated hockey enthusiasts, Sportsfusion offers the latest news, live scores, and customizable options to follow favorite teams, which aligns well with my goal of enhancing fan engagement.
I also looked at fantasy sports apps, like CBS Sports Fantasy, which enable long-time fans to manage fantasy hockey teams. While these apps are great for seasoned fans, they often lack educational resources for newcomers. On the other hand, Thuuz Sports keeps fans informed about exciting hockey games, helping them stay engaged with key matchups—this feature could complement the objectives of my app.
App Onboarding
App Onboarding
Login & Sign Up Page
The app will allow users to easily sign up and create their accounts through a straightforward registration process. During account setup, users can select their favorite teams, enabling a personalized experience that tailors content based on their preferences. Must agree to terms and conditions before sign up button is illuminated and user can proceed to next page. Any missed fields will be highlighted in red if user tries to sign up before completing all necessary fields.
Option to sign in/up with Facebook, Google, or Apple to expedite login process and avoid needing to keep track of another username and password.
Create Profile Page
Users will also have the option to choose multiple teams, which can be adjusted as needed. Pronouns field optional for those that want to opt out. Adding pronouns helps with app recommending social groups user may be interested in joining. Hovering over the question mark will share this information with the user so they understand the purpose of this field.
Homepage
Homepage
Hockey Helper AI chat feature immediately available for answers to real-time questions during a game. Users can take advantage of an AI-supported feature, allowing them to type in questions about hockey—such as explanations of terms or rules. This interactive function aims to break down complex concepts into layman’s terms, including video and photo examples for visual learners, making the information easier to understand.
Feedback from potential fans suggested it can be difficult to ask questions to current fans because they don’t want to open themselves up to potential judgement for not knowing enough about the sport. Equipping interested fans with Hockey Helper allows them to get quick and easy answers without fear of judgement from others.
Most relevant ongoing/upcoming game displayed on top of homepage depending on which team you have filtered in the top left corner. Users can select a specific team, or select the NHL icon from the dropdown menu to have information from all teams displayed.
One reason users launch the app is to check for game dates, times, and where to watch. Having this information displayed at the top of the homepage provides all of this information at a glance.
Recent news and video highlights displayed (horizontally scrollable) so users can be quickly routed to breaking news stories without having to click through multiple pages of the app. For more in-depth stories and highlights, users can navigate to the Ice Insights - News & Updates page.
NHL merchandise and ticket purchasing platforms linked on the homepage. Easy to find and access, this section is highlighted on the homepage both for easy access by users, and also because it a large source of revenue for teams.
A familiar bottom navigation bar present on every page of the app. Allows user to quickly navigate to (1) homepage, (2) Ice Insights (Hockey101 Blog and News/Updates), (3) game information page, (4) social page, and (5) account/settings.
Ice Insights
Ice Insights
News & Updates
Hockey101 Blog
News & Updates, also found under the parent page of Ice Insights for easier navigation, acts as a resource for both new and veteran fans.
In settings, user can change default landing page of Ice Insights to News & Updates if they are seasoned fans that don’t have use for the Hockey101 Blog, with the blog being easily accessible should they ever need to review rules, leagues, etc.
Content changes depending on if user has specified one team in the upper left dropdown, or if they have selected the NHL icon which will display content from all teams.
To support newcomers, the app includes a dedicated Hockey101 Blog featuring easy-to-digest explanations of core hockey rules, common terminology, and short video tutorials that break down key concepts.
In addition to gameplay fundamentals, the blog also covers broader topics such as how professional leagues are structured (e.g., the NHL, AHL, and Stanley Cup Playoffs), how player contracts and trades work, and other aspects that can be confusing to new fans.
Blog articles will include visual aids such as picture and video to better explain often misunderstood rules (i.e., offside).
The beginner’s guide remains at the top of the page as a starting point for new fans. Users can scroll left and right under each section to view additional articles, or utilize the search function in the top right.
Designed with ease of use in mind, the blog allows users to explore content at their own pace, fostering confidence to participate in more engagement opportunities for those new to the sport.
Games Page
Games Page
User can change team in upper left dropdown to display games from all NHL teams or choose a specific team to display only their games.
User can scroll horizontally to explore more dates. The date of the games currently being shown are highlighted with a line underneath so user is always aware of what date they are looking at.
Ongoing games marked by a box containing teams, live score, where to watch, the location of the game, what period they are in, and how much time is left in that period. Period marked in red to grab user’s attention since it is a game currently in progress.
Upcoming/scheduled games show all of the same information, but without attention grabbing colors/drop shadow.
Games that have already occurred only include the teams and score, since where to watch, location, and time is not relevant and would clutter the space. Should the user want to know the details of this game, they can click and be routed to a page dedicated to that specific game.
Social Page
Social Page
Deeply embedded in the hockey fan community on multiple social media platforms, I've seen firsthand that the community and social aspect of being a fan is a large factor in motivating people to go to games, buy merch, and be vocal about their team.
Among these communities on social media, many subgroups will create group chats together, often posting asking who would like to be invited in. Having these group chats based on the HockeyHub app allows fans to connect with other fans without jumping between multiple platforms. Additionally, having these chats based on our app removes the need to share your personal phone number or personal information, making it a safer option especially for younger fans.
Chats can be private (invite-only) allowing you to have one between just family members or specific friend groups
They can also be public - allowing anyone to join through it being suggested on their app, or by invitation. These invitations can be posted on social media for user convenience and as a hook to pull people into the app.
Suggested chats are based off of your activity and demographics (looping back to why we asked for gender identity in sign up). I’ve noticed trends amongst women and the LGBTQ+ community making identity-specific chats. This section of the app allows them a safe space to do so.
Each chat is able to be personalized with a chat name and photo. Chats the user is a part of are displayed similar to how Apple displays pinned messages, breaking up the text instead of displaying in a list view. Chats with new messages will have a red dot appear on the edge of the chat photo. Allowing fans to personalize the names and create fan groups/chats as they want them affords a better representation of what the fans want and are focused on. This gives the fan a personalized experience, while giving the NHL valuable information about what topics are trending.
Profile
Profile
I designed the profile page as a blend of layouts similar to popular social media apps such as X (formerly known as Twitter), Instagram, VSCO, etc.
Users can set a profile photo, name, username, pronouns, and what teams they’re a fan of, with the option to edit readily available in the top right at any time.
The button that routes to settings is housed on the profile page, similar to other apps. The familiarity of the positioning decreases time used looking for the button.
In the activity section, users can share text posts (like on X), photos (similar to Instagram), and even repost news articles and announcements from the Ice Insights page. Much like the social page, this allows a fan to combine many of the experiences they have on different social media pages into one app.
Fans can mark important milestones such as their first NHL game, first jersey, or their favorite player being signed to their favorite team.
Settings
Settings
Security and privacy settings available to control who can see what information on your profile.
Option to temporarily hide/disable your account to act as a middle ground between having one and deleting it.
Push notification preferences available.
Log out house under settings, familiar to other apps. Back arrow and bottom menu available to leave settings page.