UX Case Study: Canucks Alumni

The Vancouver Canucks Alumni is made up of former hockey players, coaches and administrators and has over 100 members and associates in the Greater Vancouver area. Our UX and UI team worked under Evolve X to deliver a modernized website that’s both an interactive experience and enables users to easily find the information that they’re looking for.

Meet our amazing team:

Our team consisted of the following members:

• Luke (UX, project lead)
• Uma (UX)
• Miranda (UX)
• Dogan (UI)

As the project lead and one of the team’s UX designers, my role was to conduct research, come up with a site map, design some user flows, wireframes, etc. and eventually create mid-fi prototypes for desktop, mobile, and tablet formats. After testing, the clickable prototypes were handed over to our UI designer, who created hi-fi wireframes and altered them based on testing results.

Design process

The project was split into the following segments:

• Research
• Planning
• Design
• Testing

Research

Research goals

In the beginning, due to lack of contact with the Canucks Alumni, it was not immediately clear what the project’s precise goals were, other than the fact that we needed pages for their roster and their videos. Due to the quality and features of the old website, which is little more than a section of the Vancouver Canucks’ website under the NHL, it was clear that the rest of the goals needed to be found through research.

Research methods

We used the following research methods for this project:

• Domain research
• Interviews

These methods helped us gather data for the planning stage.

Domain research

For domain research, we looked at the alumni websites of other NHL teams, as well as alumni websites of other sports teams and even schools. While the Canucks Alumni are a non-profit organization with no competitors in the traditional sense, we were able to find plenty of information on how similar websites were organized and what features we needed.

The St. Louis Blues Alumni have a website with many useful pages, such as info, events, and appearances.

The Philadelphia Flyers Alumni have a website that’s visually consistent, with a way to contact the team for alumni appearances.

The UBC Alumni have an events page with a clear schedule.

We also looked at other websites such as the Calgary Flames Alumni, Boston Bruins Alumni, Vancouver Whitecaps Alumni, etc. and we found that many of these websites were not particularly well designed or simply embedded within their current top-level team’s website. However, we did gain plenty of useful information on the features that would make our website stand out.

Interviews

We conducted a limited number of interviews with people who watch hockey or otherwise would be interested in using the website. Most agreed that the old website was inadequate and has various problems, such as lack of user-friendliness and features. Unfortunately, some parts of the old website were cumbersome by design, since there were actions that required human approval, which made automation impossible.

Below are some quotes from various users:

• “Website is bare-bones”
• “There are dead links”
• “Who are we supposed to contact for this?”
• “When’s their next event?”

Planning

Using the data we gathered, we put together the following:

• User personas
• Feature prioritization
• User flows
• Site map

User personas

Since the website is meant for the whole community, it was difficult for us to settle on one single user persona. After all, it was unlikely that a student applying for scholarships would need a significant amount of information on the organization’s charitable activities. As such, we settled on two primary personas:

We originally had a couple of other personas as well, such as Holly the New Hockey Enthusiast and Nick the Obsessive Fan, but after discussing with each other, we decided that Nick’s required features were either covered already, such as charity; or easy enough to add, such as player stats. Holly was a little kid, so many of her required features would either be her parents’ required features, which were already covered, or completely out of the scope of this project.

Feature prioritization/content organization

Since the old website did not have many features, we needed to figure out which features were possible for our website. The roster and videos were considered must-haves by the client, so we looked at the other alumni websites to figure out how much information we needed.

We started with a number of possible features.

These were sorted into “must have”, “nice to have”, and “not needed”.

User flows

Since the Canucks Alumni website has multiple different sections that cater to different users, we created multiple user flows for different parts of the website.

User flow for the About page

User flow for the Contacts page

User flows for the entire site. Some parts eventually changed to improve user experience. Others, such as scholarships, changed due to factors beyond our control.

From the user flow diagrams, we were able to create a site map.

Site map

We created a site map based on client input and user research. This gave us a clear view of how the website will be organized.

It turned out that the scholarship applications were all paper-based, hosted on external sites, or both. As such, we could not create any application forms. It was also simpler to have events hosted externally as well, especially since the Canucks Alumni had social media platforms such as Facebook.

With the site map finished, we went on to create some user flows.

Design

Paper wireframes (desktop)

We started off by drawing some paper wireframes of how we thought the website should look. Here’s my design of the roster page:

The Canucks Alumni roster with all the current players

After clicking on a player, his bio would pop up, along with his playing position.

The scholarships page on the old website was rather cumbersome, with all of the scholarships listed in full on the same page. One way to make this simpler was to sort them into tabs so that the user didn’t have to scroll excessively.

Scholarships sorted into tabs, with instructions and a link to the application form on each tab.

Mid-fi wireframes (desktop)

We decided to create separate versions of mid-fi wireframes so that differences in design are more pronounced and therefore easier to discuss remotely. Typography-wise, our UI designer decided that Lato would be used, so we incorporated that into our mid-fi designs. It’s a great way to save time, as means the UI designer will have fewer things to change.

For mid-fi wireframes, we used InVision Studio because it was cross-platform (i.e. available for both Windows and Mac), free, and powerful enough for our needs.

My original design for the Highlights page. This was intended to be a collection of Canucks Alumni highlights, sorted by reverse chronological order (most recent video first).

After testing and discussion, we decided that it would be better to have videos sorted by decade, since there would be many of them. It would make for a better experience if the user didn’t have to scroll through them horizontally.

The version of the Highlights page that we eventually settled on. Since there are lots of videos, it would make for a far better experience to have them sorted by decade.

We also needed a Contact page. It is standard to have some kind of contact form, and many organizations have a physical address on this page as well. In the case of the Canucks Alumni, however, we found that there are many reasons why someone might contact them, and each of these reasons may be handled by a different person. For example, the person who handles charity game requests may not be the person who handles corporate partnerships.

Different requests to the Canucks Alumni may be handled by different people.

The form, however, could still look the same for different requests.

After we settled on which designs to use, we put them all together and altered them as needed for the sake of visual consistency.

The Canucks Alumni roster. Player names are sorted alphabetically with the execs on a separate row.

An overview of all the scholarships available.

With the desktop mid-fi wireframes finished, we handed them off to our UI designer while we moved on to the mobile site.

Paper wireframes (mobile)

Like every responsive website, ours needed a mobile version. It was important that we kept most if not functions so that the user can have a great experience regardless of the device they’re using.

Home page with hero image in the background.

The menu that pops up from the hamburger menu icon. It replaces the top nav bar in the desktop version.

The footer contains just as much information as the desktop version.

For the Scholarships page, there were tabs to implement. This meant we had to have a navigation system that’s separate from the header and footer, which looked different from the original tabs since those wouldn’t fit.

We decided to turn the tabs into rows at the bottom of the page, right above the footer.

Mid-fi wireframes (mobile)

After finalizing our mobile paper wireframes, we created screens in InVision Studio for the screens that we had in our mid-fi desktop wireframes. One notable decision we made was that player stats had to be scrollable, since we could not show the whole thing at once:

Only part of the stats can be displayed at any given time.

The stats table can be scrolled all the way to the right.

For the highlights page, we decided to make videos scrollable as well. They remain sorted by decade to provide a relatively consistent experience between desktop and mobile.

Videos are sorted by decade.

Tapping a video on the page would lead to an overlay with a playable video.

Overview of all the available scholarships. Note how the tabs have shifted from the desktop version.

Descriptions for the different contact buttons were omitted. The buttons themselves were merged with the box labels into tiles.

At this point, we sent the wireframes to our UI designer.

Mid-fi wireframes (tablet)

For the tablet wireframes, we used what was mostly a mix of desktop and mobile layouts, resized to fit the tablet screen. Since the exact size was difficult to predict on paper, we did not have separate paper wireframes for these screens. However, one notable change was that we moved the logo above the menu items, since they couldn’t all fit neatly on one row and we didn’t want to use a hamburger menu that took up a lot of screen space.

The Highlights page was arranged much like the desktop version, except with fewer videos on each row (and more rows in total) to account for the smaller screen size.

The Scholarships page was arranged more like the mobile version, with the tabs arranged into rows on the bottom rather than listed on a single horizontal row.

With the mid-fi tablet wireframes completed, we handed them off to our UI designer.

Hi-fi wireframes

While the basic colour scheme was predetermined (it had to fit the Canucks branding), there were still a number of different ways that the colours could be used. The first version produced by our UI designer was heavily inspired by websites for various sports teams, with white text on a dark background. This was intended to provide a more dynamic experience for the user.

The Highlights page. Note the dark blue background with white text.

The dark blue is even more pronounced on the About page, which is quite text-heavy.

Testing showed that white text on a dark background was not particularly comfortable to read, which would not make for a good experience. As such, we decided to have a white background instead.

The white background made the Highlights page much more comfortable to read.

The About page benefitted greatly from having a white background.

Since visual consistency across platforms was an important goal, it was a little more straightforward to create hi-fi wireframes for mobile and tablet devices.

The About page was fairly simple to rearrange.

The player profile could not fit all the stats and the scrolling wasn’t intuitive enough, so we added arrows to guide the user.

Converting from desktop to tablet was relatively simple.

Testing

We tested throughout the design process, and this led us to make numerous changes along the way. Here are the findings that led us to make changes to our design:

Mid-fi prototypes

• We decided that a larger footer would be better because it would allow for links to various pages or websites, instead of simple copyright information.
• We needed a detailed About page.
• An interactive Roster page would provide a better experience for the user.
• Highlight videos should be sorted by decade.

Hi-fi prototypes

• The blue background made the text harder to read, so we changed it to a white background.
• For Player Profiles on mobile, since the information didn’t fit onto the screen, we first tried to make it scrollable. But that wasn’t intuitive enough, so we added arrows to make sure that the user understood what to do.

Summary

We understood that the goal of the project was to create a modernized, welcoming, and user-friendly website for the Canucks Alumni. The old website had numerous problems, including poor organization, dead links, etc.

Following our design process, we believe that we were able to design a website that solves the problem and meets the Canucks Alumni’s goals.