← Home

HereToHelp BC

Bringing more accessible content to promote safety, confidence, and emotional support when navigating mental health resources.

I was hired by referral as a contract UX/UI designer to work with a graphic designer to improve the mobile experience of navigating through mental health resources in British Columbia's official mental health resource site, HereToHelp BC.

We created a goal to re-design the experience to create more accessible content.

I also got started on content guidelines to follow for trust, safety, and emotional support in content and resources.

June - August 2018 (8 weeks)
My Roles
UX/UI Designer
UX Strategist
UX Researcher
1 UX/UI Designer
1 Graphic Designer
Problem Space

Many Canadian mental health websites are filled with overwhelming information.

Through secondary research, competitors analysis, along with evaluation of HereToHelp BC's information architecture, I've outlined the following main pain points to define the project scope.


Navigating through mental health resources can be intimidating—especially with current mental health stigmas and stereotypes.

Secondary research highlights that navigating and accessing relevant resources was the biggest pain point when seeking help.

To tackle this, I identified friction points in the UX of the current site by revising the information architecture and content strategy. I placed emphasis on navigation and content accessibility.

This helped me map out potential solutions and layouts that can spearhead user pain points from navigation and accessibility of the website.

How might we make navigating mental health resources easier to navigate and less intimidating?

Exploration of Design Solutions

I worked on content accessibility by prototyping different layouts and features that can help content be more diverse and engaging. I created these features through an exploration of branding and visual identity as well.

How might we make navigating mental health resources easier to navigate, and less intimidating?

Before: Overwhelming amount of information

Solution A:
Strategizing content to inform support and guidance in navigation

To help with the overwhelming amount of information, I categorized illnesses into groups.

Providing an option for a screening questionnaire as a guide would help with the overwhelming feeling too.

After: Information is condensed, and screening questionnaire can be of guidance

Solution B:
Emphasis on information hierarchy for accessibility and distinction between content

Information hierarchy and text hierarchy was crucial to getting users to access relevant and local resources, as well as make content diverse and interesting.

Using clearer titles with a thicker font and descriptive sub-headings help make content easier to digest than long bodies of text.

I created a series of templates for HereToHelp BC to use for their resources.

Before: Difficult to distinguish link previews and know what to expect

After: Visual elements and typography help set distinctions

Solution C:
Providing options and clear descriptions for trust and safety

Supplementing text and live chat options is important for those who are anxious about phone calls. By providing context that comes with resources, people can know what to expect, and feel more confident in their decision to reach out.

This is important for vulnerable users who don't know what to do — but especially for those who are in a mental health crisis.

Before: Don't know when you should call these resources

Solution 1: More options to call, text, or live chat with counsellors

Solution 2: Supported with text, users can also call immediately

Solution D:
Content guidelines to support consistency in brand voice

To promote the trust, support, and safety in resources, it would be essential to have content moderators. Since anyone is allowed to submit their stories, having content guidelines would ensure resources are consistent, supportive, and effective.

This can also support those who want to share their personal stories.

Next Steps

It would be necessary to explore edge cases within the MVP solutions such as:

• Testing for quantitative and qualitative data.

• How it can help connect people to local emergency mental health clinics.

• How can British Columbia integrate better mental health literacy to children and adults?

• Guidelines for more culturally diverse content.

Lessons Learned

1. Importance of design systems
Seeing a similar pattern in a lot of other mental health resource websites was eye-opening. Using design systems (in this case: accessibility guidelines, content guidelines) to tackle systemic issues is crucial in beginning to understand the holes in existing products and services.

Having a single goal to guide the designs of other components such as content layouts and tone of voice, can really help users be more intuitive about the information that is laid out.

2. Impact of accessibility

It's interesting to learn about how accessibility and inclusion are big parts of design systems.

By prioritizing accessibility and inclusivity, you get products/services that are catered to more user groups and it usually ends up benefiting other user groups as well.

In this case, accessibility would improve inclusion and morale. In turn, users can have more confidence in the parties that are providing these resources.