Overview

The BC Hockey website is essential for amateur hockey in British Columbia and Yukon, serving as a central hub for information, communication, registration, and community building among hockey organizations. BC Hockey approached our team to redesign their website, aiming to replace it with a sleek, modern, easy-to-use site that integrates all aspects of the organization.

Challenge

The challenge of this project is to tidy up their content arrangement, completely revamp their website to be responsive. Additionally, the client is seeking a seamless integration of the BC Hockey League and BC HL League sites for a more intuitive user experience.

Project Type

Responsive Web/Mobile Design

Tools

Figma, Adobe Illustrator, Photoshop

Design Roles

UX•UI Design

Team

• Project Manager
• UX-UI Designer
• Senior UX-UI Designer
• Developer

Finding Problems

Current Experience

To gain a deeper understanding and analyze the current website, we conducted a thorough examination of BC Hockey's existing site. Our initial findings indicate that the pages are not mobile-friendly and lack responsiveness across various devices. Additionally, while BC Hockey boasts a wealth of content and resources for its target users, it appears that a cleaner layout and contents are needed to facilitate a more user friendly interaction.

User research

Who is Target Audience?

In our initial research, we identified six distinct user groups that consistently use the website. We then analyzed the specific needs and preferences of each target user, allowing us to prioritize content accordingly. This approach helps us tailor the website's content to better serve our diverse audience.

Players

Newbie, League Players, Recreational Player, Female, High Performance BC

Visit website for

Hockey News/ Events

Events

Resources for player

Find My MHA

Getting started

Application Form

BC board info

Visit BCEHL

Hockey Parents

Parents of new or active young hockey players

Visit website for

Hockey News

Events

Shop

Getting started

Resources for parents

Find My MHA

Parents Education

BC board info

Coach

Training and Education Requirements for Coaches (2000+ per year), Resources for Existing Coaches

Visit website for

Hockey News

Events

Coaching Resources

How to get started

Find My MHA

Coaching Education

BC board info

Members

Minor Hockey Associations, Leagues, Program Operators, Hockey Clubs (Outside of Leagues), Hockey Teams

Visit website for

Hockey News/ Events

Events

Find My MHA

Applications

Tournaments

BC board info

Officials

Individual Participants (4000+) and Association Member Leaders for Each

Visit website for

Hockey News/ Events

Events

Officiating Resources

E-Game Sheet

Getting started

Officiating Schools

BC board info

Hockey fan

Anyone interested in hockey.

Visit website for

Hockey News/ Events

Events

About BC Hockey

Volunteer info

Shop

Website Analysis

S.W.O.T

We created a S.W.O.T analysis to assess the company's strengths, weaknesses, opportunities, and threats. This helps in planning for the present and future both internally and externally.

Website Analysis

Features and Functions Matrix (FFM)

To gain a clear understanding of the purpose of each component, we created a Features and Functions Matrix (FFM) to delineate user goals, features, functions, and identify the target user.

Rearrange Contents

Build Sitemap

To address the needs of each individual target user, we began rearranging content and creating a site map. This process allows us to visualize and ideate potential layout decisions to ensure an optimal user experience.

Building Low-Fidelity

After reviewing the sitemap, I initiated the creation of low-fidelity wireframes, focusing on a user-centric design and establishing a clear hierarchy for each component. Throughout the process, we carefully considered the responsiveness of each component, especially how they translate into a mobile-friendly format.

Problem found / Evolution

Enhancing based on user testing & Clients Feedback

After crafting wireframes, we engaged in testing with users and clients to gauge their experiences and gather feedback. Subsequently, we refined the design iteratively based on their insights.

Finalizing

Building High-Fidelity Wireframes

After completing user testing and finalizing improvements, I proceeded to develop high-fidelity wireframes incorporating branding elements.

Building Design System

While constructing high-fidelity wireframes, I established a design system, which will assist developers in identifying the components used in various situations and will also demonstrate the variable behavior for each component.

Final Outcome

High-Fidelity Prototype

Improved Feature 1 - Desktop

Reorganize content in the navigation menu for each organization

Many organizations visit the BC Hockey website to find information relevant to their needs. We have identified this as a priority, so we are focusing on reorganizing the content to ensure that each user can easily find the information they are looking for.

Improved Feature 2 - Desktop

Display sidebar menu

Since BC Hockey has a lot of content for each organization, we came up with the idea of adding a sidebar to the internal menu page. This allows users to quickly find the information they need by using the sidebar menu, facilitating easy navigation to each section and category.

Improved Feature 3 - Mobile

A tab menu feature for easy navigation between the BC Hockey and BCEHL websites.

We utilize a tab menu feature to display the logo of each site, allowing users to easily access and visit each site.

Improved Feature 4 - Mobile

Section Dropdown

We needed to consider how users could interact with the mega menu and long contents on each page. Our decision was to add a section dropdown so that users can navigate to the specific section they want to access.

BC Hockey

As-Is

To-Be

Current Experience

Who is Target Audience?

Players

Hockey Parents

Coach

Members

Officials

Hockey fan

Persona

Center design Research

S.W.O.T

Features and Functions Matrix (FFM)

Build Sitemap

Building Low-Fidelity

Enhancing based on user testing & Clients Feedback

Building High-Fidelity Wireframes

Building Design System

High-Fidelity Prototype

More pages

More Works