Message Us

Boosting access to cancer research with user-driven web design

Ontario Institute for Cancer Research
Ontario Institute for Cancer Research
How does Hyphen help a complex organization communicate clearly with diverse audiences?

With collaboration, agility & fresh perspectives to design a WordPress website guided by stakeholder needs.

 

Objective:
Enable barrier-free sharing of cancer research information, opportunities & impact with user-driven web design

Background

In January 2021, the Ontario Institute for Cancer Research (OICR) selected Hyphen through an RFP process to design, build and launch a new WordPress website worthy of its world-class cancer research to support its mission to change lives.

Our challenge? To provide diverse audiences with easy access to compelling information about OICR’s wide array of programs, researchers & opportunities – all within just 7 months.

Impact
  1. An easy-to-navigate resource catering to diverse stakeholders
  2. A compelling showcase of OICR’s scientific & economic impact
  3. A custom WordPress website that can grow as OICR’s requirements evolve
  4. Flexible, modular design to meet the needs of a large, disparate organization
  5. An intuitive website back-end that can easily be managed by one person
  6. A template for redeveloping additional OICR website properties
Responsibilities
  • Strategy, design & development of a custom WordPress website
  • In-depth user testing with key stakeholders
  • Copywriting & editing to ensure concise, compelling copy
  • Integration of English & French content from multiple existing websites
  • Migration & launch support in line with public sector security requirements
Insight 1
Your toughest architecture problems can be easily solved by your users

Every organization has its unique internal structure and nomenclature. While it’s a natural instinct to apply these to website design, you can easily end up with a site layout that doesn’t make sense to users.

How can you identify the best approach for organizing content? By asking your users. We used formal user testing to help us translate OICR’s complex framework of programs and researchers into a flat, alphabetized information structure with intuitive navigation and user-driven web design.

The old system of organizing programs was based on how they were organized internally. To anyone at OICR this made sense; to others, it meant they needed to know this structure to find the program they were looking for.

The old site's Programs page

Our solution was to flatten the organization of programs. That meant no hierarchies and sorting everything alphabetically. Our user testing confirmed that this approach worked well.

If it was still too difficult to find a program, we added a dynamic filter to allow the user to quickly narrow the results.

The new Program page
Insight 2
The shortest distance between two points is search

How can a site allow every user to reach their destination within 3 clicks? We initially envisioned using a wizard on the homepage to help users quickly click through to what they were seeking among OICR’s vast universe of cancer researchers, programs, data, and news.

However, user testing showed us this approach was cumbersome. Scrapping the wizard, we turned instead to a simpler solution: Google’s on-page Programmable Search Engine for powerful and precise website search functionality.

Sometimes, you end up overthinking things. We initially proposed a dropdown wizard meant to provide easy-to-use dropdown fields to customize search criteria.

In the end, the simplest solution was the best one - in this case, that meant Google-powered search functionality.

Insight 3
Flexible web page customization requires smart, modular design

Designing a website for a large, complex organization can feel overwhelming given the diversity of the content to be presented. Applying a modular, templated approach can balance customization with consistency.

After a thorough review of OICR’s existing content, we developed back-end templates with modules that could be switched on and off. This allowed for the presentation of content in customized ways while minimizing complexity and maximizing consistency on the back-end.

We created custom component blocks to help the team build pages without any need for additional programming. Blocks can be moved around and placed anywhere on a page.

On pages where content is templated, we built page frameworks so that OICR can easily choose the sections they want and fill them in.

A page composed entirely of pre-designed sections and completed by filling in the missing pictures and content. Some sections are dynamically generated while others are manually created.

An example of a templated page that can be completed by choosing the appropriate sections for the subject and filling them in with content.

In a complex organization like OICR, there is a great diversity of worthy priorities and perspectives. The Hyphen team listened to everyone, balancing different stakeholder needs and helping us unite behind a shared vision for the new website.

Christopher Needles
Christopher Needles
Director, Communications

Next Project

Closing the loop between
marketing and business development

Pillar Financial
Pillar Financial'