HereToHelp BC

Changing the web/mobile experience to help people feel more confident in the process of navigating mental health resources within BC.

Making resources quick and easy to find, while providing a variety of support methods to choose from—encouraging them to utilize resources available.

Government of British Columbia
June 2018 — July 2018


Landing pages to improve value and engagement, new user flows & use-cases, secondary research


Sara Bailey
Sandra Han


UX/UI Designer
Interaction Designer



A lot of Canadian mental health websites are filled with a lot of overwhelming information. There seemed to be little to no text hierarchy, too much information per page that can be easily skimmed over, no prioritization of support information, and can appear to be very text heavy at times.

It can be hard for users to navigate through the current HereToHelp BC website when the prioritization of information is not taking up as much space as other features are.

How might we create a more emotionally supportive website that offers a variety of resources to choose from to help them feel most comfortable seeking help?

Problem Space

A resource platform that focuses on providing the right amount of empowerment in seeking help for mental illnesses and substance abuse.

I proposed a design solution to focus on guiding a user to compile their own set of resources. By guiding the user into coming up with their own personalized collection of resources to self-manage or seek further help through different kinds of emotional support in copywriting.

As a website run by non-profit agencies, the priority should be helping users feel empowered about their intentions of seeking support for their mental health. By getting the most out of every interaction through guidance, and allowing them to get in and out easily.

I’ve proposed what the website would act as with a different organization of resources, contact information, illness landing pages prioritized first for UX design.


Through competitors analysis, I've noticed that trying to understand how to navigate where to begin in looking for relevant resources is not usually prioritized. Often times, information can tend to generalize illnesses, and or don't direct the right emotional support that people —who are wanting to learn more— may need.

Figuring It Out

Without the right wording, and or variety of resources that best suit users, thoughts on well being can lead to a negative spiral and can become further intimidating to confront and talk about to someone else.

Through social media, a lot of responses on mental awareness noted the need for a variety of different methods other than someone to call. So it was important for HereToHelp to include other methods of getting help other than a hotline.

Looking into secondary resources like other mental health resource websites, as well as social media responses to being pro-active and increasing engagement of mental health awareness, my main insights were that there was a need for better emotional support and personalized guidance on these sites.

I suggested a change in copywriting, as well as a chatbot or live chat option for users to be able to communicate with someone on navigating resources.

Research Approach

3. Prototype of new information hierarchy of mental health resources

The current information system is overwhelming to look at. It would be hard for a user to know where to start—especially if they didn't know what these illnesses/terms meant.

I re-organized the information in the navigation by expanding the information hierarchy. Through grouping together illnesses that fell into a similar category, this made it easier for the user to look at.

4. New landing page templates for mental health disorders for better resource organization and easier digestion of information

By highlighting an overview of the symptoms of the illness, followed by resources for it, the user would get a better sense of what they are looking for.

I also incorporated a few links in the FAQ for people who weren't familiar with mental health conditions + disorders.

Easy access to the search bar + 'Get Help Now!' button is important for this platform. I prototyped how this would look for the developers using AfterEffects.

2. Highlighting the hide nav bar + 'Get Help Now!' button function on the mobile experience

Outcomes: Four Prototypes

I chose more friendlier typography + colors to match with the approachable experience I was trying to create. Everything else was low fidelity to medium fidelity.

Grey boxes would indicate where an illustration would be. Other mental health websites showed photographs of people with expressions that would give the wrong idea of what the website could provide.

Through working on text hierarchy & information hierarchy, I was able to re-work some of the copy-write so it was easier to look through. I made this lo-fi prototype landing page to show what that would look like.

1. New landing page: re-prioritize information hierarchy

Being able to propose different solutions to copywriting into the wireframes allowed for the idea to seem more tangible and more realistic for our client to see it working.

Being able to prototype the ideas in a tangible sense helped push the communication process further. I also became more driven in wanting to learn more about copywriting, asking more questions, and becoming more self-initiative and curious about things I wasn't too familiar with!

If I had a chance to work on this longer, I would've suggested to go through the research ethics board to gather primary research through participants. I also would've liked to perform usability testing on more detailed prototypes and iterated on it further.

“Tell me, and I will forget. Show me, and I may remember. Involve me, and I will understand.”

Biggest Takeaways