Bringing four contact pages into one for the Canucks Alumni
A client redesign of the Vancouver Canucks Alumni Association website: four contact pages brought onto one.
Role
Primary UI designer
Project type
Client project
Research
Existing-site review
Deliverable
Hi-fi prototype · InVision
The problem
Getting in touch meant finding the right page first.
For hockey fans and followers of the Canucks Alumni Association. The existing site wasn’t responsive, contact was split across four separate pages, each with its own contact person and process, and the alumni roster was a plain list on the landing page.
My role: Primary UI designer in an eight-person team. The UX designers led research, flows and mid-fi prototypes; I turned the tested mid-fi work into the visual system and responsive hi-fi designs: Lato typography, colour use within the Canucks brand, and consistency across desktop, tablet and mobile.
Existing-site review
What was getting in the way
Findings from a UX review of the existing site’s pages before the redesign.
01
4
Separate contact pages
Charity games, alumni appearances, community relations and corporate partnerships each had their own page, contact person and process.
02
2
Pages holding contact details
Contact information was split between the contact page and the landing page.
03
0
Call-to-action buttons
The contact link was neither a hyperlink nor a button, so nothing signalled it could be clicked.
The solution
One contact page, four clear requests.
The four request types now sit side by side on one contact page, each with a visible Contact button that opens its form.
Before · 4 separate contact pages
After · 1 contact page, 4 requests, a Contact button on each
Key decisions
Four decisions that shaped the redesign
Lead with the request
Each request type had its own contact person, process and page. The contact page now shows all four side by side, so visitors start from what they want to do.
Make the entry point look clickable
The old contact link was neither a hyperlink nor a button. It became a button, and call-to-action buttons were added across the site; the old site had none.
Give the roster its own page
The roster moved off the landing page into the navigation, with each player’s photo, position, bio and statistics, in alphabetical order.
Design for every screen
The old site wasn’t responsive. I designed the hi-fi screens for desktop, tablet and mobile with one three-colour palette, adapting layout and spacing to each size instead of scaling one design down.
Landing page
Testing changed the visual direction
The first hi-fi direction was dark and sports-inspired. Testing showed white text on dark backgrounds was harder to read, so I moved the content areas to a light treatment and kept the Canucks navy and green for navigation and buttons. The logo sits inside the outline of a hockey rink.
Accessibility
Checked for contrast and colour blindness
I checked the landing page for contrast and for red–green colour blindness, the most common form, using an online contrast checker. The redesigned footer also gained contrast and breathing room; the old one was dense and low in contrast.
Final experience
Mobile, tablet and desktop.
Reflection
What I learned
Visual choices should follow usability evidence: testing, not taste, moved the UI from dark to light.
Readability comes before atmosphere. A dramatic sports look is worth little if the content is hard to read.
Responsive consistency is designed, not scaled: each breakpoint needed its own layout and spacing decisions.
What changed in the redesign
4 contact pages → 1
Unclear contact link → visible button
Not responsive → mobile, tablet, desktop
Structural changes shown in the redesign prototype. No post-launch business metrics are claimed.
Next project
Recovering from a failed image generation