The Canadian Public Health Association (CPHA) is a non-profit association looking to create a resource hub for substance use topics aimed at various audiences. A key challenge was to ensure the website's design promotes a safe and welcoming experience free of stigma to the diverse groups visiting the site.
From a UX perspective, the main goal of a resource hub is to offer individuals an easy and intuitive path to finding content. Ensuring topics are relevant and understandable was top of mind to ensure they are easily findable.
Lastly, the project needs to accommodate new resources as they get developed, so the website needs to be designed for growth.
Throughout the project, we learned of the delicate balance between providing resources with clear topic terms and language that speak to various individuals while respecting the sensitivity of the subject matter. Translating this to the visual design was critical, ensuring the design communicated safety and comfort.
Intuitive Search Experience
- Created an extensive taxonomy to organize all resources
- Accommodated different browsing patterns by allowing indiviudals to filter by topics, subtopics, audience, substance, language, region etc.
- Easy to use and accessible search controls to indicate filters added with clear search bar prominence
Topic pages to guide people to correct resources
- Created topic and sub-topic pages to support an intuitive pathway to resources
- To contextualize resources, we organized them into subtopics & topic landing pages
- Created an educational experience by featuring key influencers in topics and linking to their bio
Optimized organization of content
- Leveraged Drupal's CMS to facilitate quick and easy population of resources for a positive admin experience
- Organized homepage to accommodate flexible content needs
- Placed resources at the forefront of most pages by utilizing a featured resources section
Sensitive and accessible branding
- Balanced professionalism and sensitivity
- Customized icons for a unique experience
- Careful use of imagery to increase feelings of well-being
Enhancing the search experience
As the website contains many resources, facilitating the search experience was a top priority. We ensured search filters would be intuitive and easy to use and returned the most relevant results. For example, taxonomies were exposed in the search filters to accommodate different browsing patterns depending on user types, topics of interests, or location.
Hierarchical topic and sub-topic pages
To create a guided experience and contextualize the resources in the hub, we created topic and sub-topic landing pages to frame content. This allowed for a natural exploration of resources by topics relevant to different audiences. Within each topic page, sub-topics are listed with featured resources for each.
Detailed topic pages include:
- Two levels of pages (topic and sub-topic) to allow for exploration of resources by topic
- The addition of a contextual area to allow for quick navigation within the page
- Collapsible sub-topics for easy browsing
- Key influencers to learn more about researchers in a particular topic
The homepage of the resource hub features a flexible area to highlight content and newly added resources. Calls to action for important pages such as a learning portal and a page to contribute resources are also prominently displayed.
The homepage's design uses vibrant colours and intentional imagery to evoke interest and comfort while leading individuals to designated areas of the website.
Creating a brand that empowers leadership, individuality and progress
Questions came up during the design brief that we needed to address before effectively communicating the brand's look and feel.
- How do we position CPHA SURE brand as a thought leader and subject matter expert in substance use?
- How do we create a look that will communicate safety from judgement and stigma?
- How do we communicate that each individual affected by substance use has their own unique journey?
We answered these questions by creating a visual and brand strategy that set a professional, forward-thinking, safe, and reliable tone.
Starting with the logo, we strived to embody the individual journeys of those personally affected or those helping others with substance use. The icon consists of a series of circles forming a path. The circles are symbolic of the different steps one may encounter along their journey. The path consists of upward and downward fluctuations that symbolize the ups and downs experienced in the journey. The size of the circles goes from small to large to represent progress. The use of colour and type in the logo creates a modern and professional brand yet conveys reliability and friendliness.
Creating a safe space dedicated to knowledge expertise
When creating the look and feel of the website, it was crucial to maintain the brand values in all its design elements. Through the use of colour tones, typography and spacing, the website conveys confidence and a strong sense of leadership while ensuring its content and resources feel trustworthy and reliable to the end-users.
The site uses a Mondrian-style grid, creating a dynamic look and feel that individuals find highly engaging.
Topic icons consist of a bold linear style invoking confidence and stability, while the round edges and colours tie in feelings of reliability and friendliness to capture the overall tone.
CPHA is now equipped with a resource hub that positions the organization for growth. Website admins can easily add new resources and update featured resources to highlight the most current or relevant information.
Website users can enjoy a guided experience, allowing them to naturally navigate to topics of interest and dive deeper into specific resources and authors.
Despite a quick turnaround time, we maximized the site's usability by focusing on the search functionality. We created logical taxonomies to organize resources, designed an inclusive search interface and filtering options for various individuals, and ensured the search displayed top results.
Lastly, the customized icons, intentional imagery, and vibrant colour scheme created a bright and welcoming place for people to go for substance use resources.