Boosting access to cancer research with user-driven web design

Case Studies
Website
Industry Nonprofit
Deliverables
CopywritingDigital StrategyMaintenance & SupportUser testingWebsite DesignWordPress Development
Christopher Needles

Director, Communications

“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.”

As a research institute that collaborates with partners across Ontario and around the world to accelerate the development of new cancer research, Ontario Institute for Cancer Research (OICR) has a vision to solve cancer together.

Like so many others, our team has personal connections to cancer. Our personal experiences bring OICR’s crucial mission that much closer to home and drove our passion for taking on this project.

We saw potential for a new website that would help fuel the connections at the heart of cancer research and enable barrier-free sharing of cancer research information, opportunities & impact.

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
  • Ongoing website maintenance & support
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
Optimizing Content Organization

The previous system of organizing programs on the OICR website was based on their internal organization.

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. And that wasn’t ideal.

User-Driven Web Design

Our solution was to flatten the organization of programs. This eliminating hierarchies and sorting everything alphabetically. User testing confirmed that this approach worked well.

We also added a dynamic filter to allow the user to quickly narrow the results.

Removing Navigation Barriers

How can a site allow every user to reach their destination within 3 clicks?

We initially proposed a dropdown wizard meant to provide easy-to-use dropdown fields to customize search criteria on the OICR site. However, sometimes in web design you end up overthinking things.

Simplifying the User Experience

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

User testing confirmed this approach.

Balancing Customization with Consistency

We created custom component blocks to allow the OICR team to build pages without any need for additional programming.

These blocks can be moved around and placed anywhere on a page.

Smart, Modular Design

We used modular design to create user-friendly backend templates.

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

Pre-Designed Sections

We created a page template composed entirely of pre-designed sections that can be completed by filling in the missing pictures and content.

Some sections are dynamically generated while others are manually created.

Templated Page Example

The researcher profile page is an example of a templated page that the OICR team can complete by choosing the appropriate sections for the subject and filling them in with content.

Visit Visit the page
Go to the site
next
Chronicle Wealth An impactful website to strengthen the client experience