HereToHelp BC

Improving navigation, text hierarchy and content design for people to find mental health resources.

July 2018 — August 2018

Client

Government of BC

Roles

UX/UI Designer

Tools

Sketch
Invision Studio
Figma

Outcomes

Landing pages to improve value and engagement, user flows, secondary quantitative research

Context

Many Canadian mental health websites are filled with overwhelming information. There was minimal text hierarchy, too much information per page where important content can be easily missed, and no prioritization of support information.

I was hired by Sara Bailey to be an on-contract UX/UI designer for HereToHelp BC and create proposals for a better user experience. With her guidance, I learned so much about how much content strategy can really impact a user experience.

Role

As the UX/UI designer working on the project, I set project outlines, interaction design principles, created new user flows, and created prototypes to illustrate to stakeholders what we've been working on.

I also created a few iterations of landing pages with the intentions of improving value and engagement, and conducted secondary research to support my design decisions.

Final deliverables were exploring the UX/UI of navigation on the home/landing page, navigation of information resources, layout explorations, illness landing pages, and re-designing the 'I need help now!' page.

Project timeline


Due to the project timeline, main project constraints were not being able to go through content and explore how it could be improved in terms of consistency of terms/definitions.

Problem space

Through competitors analysis, I noticed that trying to navigate to relevant resources as a new user is not prioritized. Often times, information can tend to generalize illnesses, or don't direct the right emotional support that people —who are wanting to learn more— may need.

Through this secondary research on mental health websites, I also found that mental health advocates on social media focused on being pro-active and increasing awareness. For the website, HereToHelp, my main insight was that there was a need for better emotional support and personalized guidance on mental health resource sites.

How might we design better navigation and cater content to be more reassuring towards users who are seeking emotionally support for their mental health?

UX goals & design principles

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

Given the problem space, I outlined UX design principles to follow as I explore design solutions.

Concept

First and foremost, intentions to design better navigation throughout the website with an educational goal in mind. To better inform users on mental illness definitions and terms used to describe mental health.

For this specific case study, research and content strategy were the most important aspects, followed by design. Content and research informed my design decisions for reducing friction in accessing information resources.

But to push it further, I proposed a set of new content solutions to help solve information asymmetry, as well as allowing users to compile and save their own set of resources to self-manage or seek further help.

Design explorations

The client expressed interest in re-branding the website, so this was also explored through these iterations.

I explored design solutions to improve navigation and create better user flows to information resources. This included considering what people who are under distress might be thinking throughout the entire experience.

Iterations and considerations

'I need help now!' page (mobile)

The main focus was to consider how the user would feel when given the information to call someone. Based on my previous secondary research, a lot of people had mentioned they didn't know what to talk about when calling a crisis line, or had phone anxiety.

It was important to layout clear alternatives for other people to browse through so that they have access to something they felt most comfortable with.

Searching for resources + resource landing pages

I explored layouts to display the information resources in the best way possible. This included figuring out filter options. Since there are a lot of illness categories, I also did some UX writing explorations for grouping illnesses together.

With an educational goal in mind, I kept these things in mind for design explorations and suggestions for the proposal:

📚 Content
🔲 Generate guides for people who want to help somebody
🔲 Include guides for people who don't know how to talk to somebody about it

🗄 Information Resource Page
🔲 Recommend articles based on illness
🔲 Link to appropriate self-assessment for users who are unsure where to start
🔲 Include contact/support phone numbers, emails, chat websites, SMS

After these variations, it was clear to me that simplifying the user flow above with the second user flow on the bottom was more appropriate as a mental health resource website.

Home page + navigation

The client had expressed focus in the landing page to shine importance onto 3 sections—looking for resources, their values (the importance of mental health literacy), and who they are.

Illustrations from home page were from UnDraw.

I took this time to explore how the navigation bar would work and what kind of information would immediately pop-up for someone who is immediately looking for information resources.

Next steps

I'm glad this project has opened the conversation of what it means to have a conversation on mental health. After talking to a psychiatrist on how they build rapport with their clients, and learning about how a more 'positive-psychology' vernacular can better suit users who are in distress and looking for a place to start when navigating mental health resources.

So for next steps, I've suggested to:

🔲User testing the proposed design solutions
🔲Tweaking and creating new content that is more inclusive
🔲Creating a language library for consistencies in terms and tone that supports a voice that is emotionally supportive and encouraging

Since BC has a very diverse population, it would really benefit to have resources in other languages for families to educate each other and help take care of each other.

Sandra is a UX designer and researcher currently based in Vancouver, Canada.