Vancouver Coastal Health Research Institute

homepage mockup for VCHRI website
VCHRI logo
Client Name
Vancouver Coastal Health Research Institute
Website
www.vchri.ca
Year
2021
Categories
Government, Healthcare

Vancouver Coastal Health Research Institute

Here at Massive, we pride ourselves on producing deeply resonant branded website experiences that matter in culture.

So before engaging a prospective partner, we always ask about their deeper purpose. We want to know if their products and/or services are aptly curated to address real world problems. We want to know if they’re a positive social force fighting for a more equitable world. That’s how we know we’ve found an organization worth going to bat for.

Enter Vancouver Coastal Health Research Institute (VCHRI): one of Canada’s largest research organizations, and one of its most renowned healthcare thought leaders. We were engaged to creatively direct, design, and develop VHCRI’s new Drupal website. A site that would serve as the organization’s primary communicative portal to the communities and individuals it serves.

As the research arm of Vancouver Coastal Health (VCH) and a principle partner to the University of British Columbia, VCHRI encompasses three research-intensive institutions: Vancouver General Hospital, UBC Hospital, and GF Strong Rehabilitation Centre. Additionally, the organization maintains productive working relationships with Richmond Hospital, Lions Gate Hospital, and various public health agencies across Vancouver Coastal Health.

Together, these entities collaborate in generating invaluable health-focused resources through discovery, education, application, and evaluation. The goal of their efforts is to improve health outcomes and generate measurable results to acute and chronic patients, plus the broader population.

Our work yielded an award-winning website that seamlessly unifies form and function. It delivers on VCHRI’s mission to improve patient care through an approachable, accessible digital experience for all. We break the whole thing down below, so keep reading.

Services

  • UX + UI
  • Website Design
  • Drupal Development
  • Copywriting
Mockup of the VCHRI website across multiple pages
Mockup of the VCHRI About page on desktop

Accessible, Intuitive User Experiences

With a keen understanding of VCHRI’s primary goals, we knew its website had to mitigate technological and informational barriers that may make it challenging for users to easily access their essential health resources.

Beyond simplifying the site’s content and user flow, this meant ensuring it adhered to critical accessibility requirements (WCAG 2.1) and was equally as intuitive for all people – the able-bodied, and those living with temporary or chronic physical impairments.

Our approach to holistic accessibility was exhaustive. From clear content tagging for easy resource discovery, contrast ratios and font choices that emphasized key CTAs,, schema, and meta data, to ensuring the site was navigable via keyboard shortcuts and responsive across all device types, we made sure ALL users would have open access to VHCRI’s life-changing work.

Simplifying the Complexity of Healthcare

With 2,400 active investigators, 115 new invention disclosures over the past five years, and over 473,000 sqft of research space, VCHRI is an inherently complex organization. With multiple stakeholders, departments, and a broad variety of users to account for, our first order of business was mapping out the site’s content for its various target audiences. 

Fortunately, VCHRI had already completed a significant chunk of legwork on the new site’s information architecture, which was validated through wireframing, card sorting, and additional user testing. 

A flat, clear, and intuitive navigation paired with a site-wide search functionality makes specific information available at a moment’s notice, without having to drill down through multiple content levels. This, along with a robust set of dynamic modules complete with clear tagging and categorization help users easily locate similar content with ease.

 

Consistency + Clarity Over Cleverness

So, what role does creative direction play in a project centred around creating an accessible user experience? A leading one. One of the Massive design team’s primary objectives was to establish a scalable, design system that married beauty and utility. 

We created a branded watermark, along with a set of image treatment filters to achieve consistency across a mixture of stock and branded photography. 

In adherence to VCH’s parent brand guidelines, Massive implemented an expanded colour-palette, providing consistency and flexibility for things like wayfinding, hover-states, and reinforcing the site’s overall visual hierarchy.

A mobile mockup of the VCHRI homepage A mobile mockup of the VCHRI research page A mobile mockup of the VCHRI study page
A mobile mockup of the VCHRI about page A mobile mockup of the VCHRI blog page A mobile mockup of the VCHRI navigation
Homepage mockup of the VCHRI website

Engineering a Website for Today + Tomorrow

Like so many others, a primary driver of VCHRI’s project was the necessary migration to Drupal 9. You’d be forgiven—and definitely not alone—if the mention of a Drupal 9 upgrade induces slight nausea. In dev-land, this particular migration can be a nightmare. That said, with requisite content planning, data-modeling, and by clearly determining the new website’s minimum viable content (MVC) threshold, the site’s migration prevailed without a hitch.

In fact, the migration experience provided an opportunity for other essential improvements to the site’s authoring experience and content governance. VCHRI’s internal team was now well equipped to sustainably manage the website’s contents the organization continues to  evolve.

Results + Recognition

We often tell our partners our role as an agency is to speak on behalf of your internal and external users; prioritizing their wants, needs, and expectations above all throughout the project. Maybe not the sexiest answer, but an absolute non-negotiable if you’re aiming to create websites that provide meaningful change in the world. 

Fortunately, VCHRI’s internal team was in complete alignment. Consequently, the final product is a website that serves the organization’s diverse user groups, while offering equal access to critical healthcare resources and research for all. 

And, while winning an award literally couldn’t have been further from our minds when we designed and developed the new vchri.ca, we were admittedly flattered to learn the new website had won the International Association of Business Communicators 2022 Gold Quill Award of Excellence in “Communication for the Web.”

Check out the website for yourself here, or drop us a line to discuss a project you’d like to collaborate on.