Canadian Mental Health Association

I helped redesign a new information architecture for the Canadian Mental Health Association's (CMHA)'s website as well as improve the interface for several other pages.

Problem

Users who are in a heightened state of emotion (i.e. anxiety) which impairs their ability to think clearly are frustrated when they visit the CMHA website and are unable to find relevant resources to help them cope.

Solution

As a team we redesigned a new information architecture for the CMHA's website. I then went on to improve the visual interface for several other pages found on the website, focusing on reducing cognitive load.

Role

Product Designer

Keywords

Responsive Web, Branding

Category

Health

Design Tools

Adobe XD

Year

2020

The Truth Hurts

In any given year, one in five people in Canada will personally experience a mental health concern or illness. Half of these individuals have never consulted a health professional about their concerns with such issues as depression and anxiety. Even scarier is that by the age of forty, fifty percent of the Canadian population will have or have at one point suffered from a of mental illness.

To help mitigate the effects of mental illness, the Canadian Mental Health Association was founded in order to provide access to resources designed to maintain and improve mental health and community integration, build resilience, and support recovery from mental illness.

preface

The project began as a collaborative effort during the research phase but soon after, took on the work at an individual level. Further, a short, three-week timeline meant we needed to define our scope as early on in the project as possible.

research

Narrowing the Problem

To better understand our user’s main points while visiting the CMHA website, we conducted usability tests where users were asked to locate the "resources/self-help" page specifically related to stress and anxiety. On the original CMHA site, this was found under a header titled ‘Brochures.’

The results were alarming. All five of our users were unable to find the associated page. This led us to believe that there was a deeper issue related to information architecture.

How Might We Improve the CMHA website in order to facilitate easier access to critical information?

Card sorting validated our hypothesis that the information was indeed mis-categorized. What we found most interesting was how all participants created a header related to "Self-Help/Get-Help," something that was not visible on the original CMHA navigation bar. The ‘Brochures’ header was also renamed "‘Tips For me,’" indicating the severity of its impact.

storytelling

More Than Just A Homepage

I wanted the user to feel inspired upon first visit to the website, which is why I intentionally worked to display meaningful imagery on the homepage. I recognized how difficult it may be for some users to willingly visit this particular website as a starting point, so it was important to emphasize specific content by making it both accessible and visually appealing. The old CMHA website can be seen below on the top row and my CMHA design can be seen on the bottom row.

cross-platform consistency

Built to be Responsive

It was important to create a website that did not just function well on a desktop platform, but also empowered users to achieve their goals across multiple platforms. Our target demographic was more likely to search for resources using a mobile device.

multiple solutions

Navigation x2

I decided to go with a multiple navigation layout for the mobile design as in times of crisis our decision-making is severely compromised. By allowing users easy access to features such as the crisis line contact page, self-help tips and the ability to find a CMHA office nearest them, they are able to focus more on receiving the help they need, rather than on spending time trying to locate information.

iterate

Refine and Distill

To further iterate the high-fidelity prototype, I conducted a usability test with seven different users. They were asked to locate specific topics within the navigation, in addition to providing commentary on the overall layout of the home page.

Key insight #1

Spacing was not conducive - content was not grouped effectively resulting in uncertainty among users as to which text was associated with each image.

Before
After

Key insight #2

Lack of ‘breadcrumbs’ made it difficult for users to identify where they were on the site. Further, there was no consistency with the desktop version in terms of layout for the blog page.

Before
After

bonus

What If...

I wanted to find a way to make people feel like they didn’t have to experience their struggles alone. I brainstormed and asked users what other types of pages they felt might  benefit them. Their response? Blogs. Initially, this surprised me. But the more time I spent thinking about it, the more it made sense to me. People want to connect with others on a personal level; they want to know that they’re not alone and that if others can overcome struggles related to mental health, then so can they.

I felt like the previous CMHA blog page was transactional and unemotional. The imagery was not conducive to the page and the text alignment was generally awkward.

final product

Prototype Play

To summarize, users wanted the ability to access resources in a timely manner. They wanted the core features to work seamlessly across multiple device platforms. Prototypes can only be viewed on a desktop.

Mobile Prototype:
Open in new tab
Desktop Prototype:
Open in new tab

Reflection

One of the key learnings for me was to bin my assumptions whenever I felt my own confirmation bias coming into play. Prior to the card sorting activity, I had already formed a mental model on how I expected the results to unfold. By making myself aware of this I was able to objectively approach the activity and ensure that the results were accurately portrayed. Another key learning for me was coming to the realization that UX writing is about achieving understanding. Ultimately, a clear and consistent message will help with respect to inclusivity and ensure that a wide range of audiences are able to understand and extract value from your message.

credits

Next Project