Challenging the Stigma of Men’s Mental Health
--
The UX process of designing a web platform to provide mental health resources catered to men.
While mental health conditions affect both men and women, men often face the sexist stigma of showing weakness and vulnerability when they speak out about their problems. According to the National Institute of Mental Health, they are therefore less likely to address their mental health conditions and seek treatment. Consequently, the incidence of suicide is significantly higher among men. According to the Centre for Suicide Prevention, men are three times more likely to die by suicide than women — a disproportionate ratio that needs to be addressed.
I had the opportunity to help redesign a men’s mental health website to try and break through the stigma and provide much-needed support. Heart of a Man (HOAM) is a platform that strives to provide men with tailored mental health resources, allow them to connect with each other, and give them the ability to spread awareness to reach others who may be struggling. HOAM offers men a safe place to express themselves and work through their darkest moments with male-oriented workshops, support groups, public speaking events, and access to a team of qualified mental health professionals. The services are, of course, accessible to women who want to learn about how to support the men in their lives. HOAM also sells merchandise to motivate and spread mental health awareness, and donates 20% of all apparel proceeds to mental health organizations.
Research Process
The goal of my team’s work was to create an effective web-based platform for our client and their users. We identified three main features for the website:
- Mental health: Provide more information about mental health resources.
- Merchandise: Promote merchandise to provide motivation and spread mental health awareness.
- Stories: Share stories about users and their mental health journeys.
We had to ask ourselves: What exactly did users want, need, and expect to find when seeking help for their mental health conditions through online research?
Our research stage was critical for gaining an understanding of the user perspective, so that we could build a website that effectively combined our client’s goals with their users’ needs. This primary stage in our UX design process was composed of three steps: surveys, interviews, and CC analysis.
Surveying our Users
We deployed mental health surveys to 33 anonymous respondents and interviewed 9 subjects who were a mix of existing and potential HOAM clients. Overall, we hit our target market, as 94% of respondents stated that they had been affected by a mental health condition at some point in their lives, and 88% had helped a loved one through a mental health condition. 51.5% of the respondents were male, which was valuable for our research purposes as our analytics showed that HOAM’s website users were approximately half male and half female. We focused on our target age groups: 17–25 (39.4%) and 26–30 (30.3%).
Analyzing our Competitors
We conducted a CC analysis of direct (blue) and indirect competitors (grey) across two distinct categories: mental health resource platforms, and mental health awareness apparel platforms. Competitors providing specifically male-oriented resources were indicated as a male symbol (arrows). We compared the client’s competitors to look for mistakes to avoid, features to prioritize, and enhancements to create.
When evaluating online resources for our first CC analysis category, we considered criteria such as online interactive forums/chatrooms, blogs, and testimonials. When evaluating in-person resources, we considered access to mental health professionals (social workers, psychologists, psychiatrists, etc.), availability of support groups, and the ability to book/attend informative events such as workshops or speaking events.
Planning
During our planning stage, we began analyzing our research to create our affinity diagram, user personas, user stories, scenarios, and journey map.
Affinity Diagram
The affinity diagram was the first step in our planning stage, where we collected all the survey/interview data points and started looking for patterns in the responses. During our analysis, we discovered specific trends relevant to our three website goals.
Related to our first goal of providing mental health resources, we found that users conducted a lot of independent and online research in regards to their mental health conditions. Satisfaction with the available resources ranged significantly. Dissatisfied users cited reasons such as lack of information and high costs as reasons for their dissatisfaction. A majority of respondents (67%) stated that they had not attended any in-person mental health events (support groups, workshops, public speaking events, etc.).
However, of those who had, more than half found events helpful for reasons such as gaining practical tools to help themselves, gaining insight into their partners’ conditions, and getting to share their stories. We saw ample opportunity to reach both new and returning members of mental health events, as the majority found them useful. These statistics also showed us that the mental health stigma is not yet broken, and that people are more comfortable with online mental health services than in-person ones.
Related to our second goal of providing merchandise, users had an overall positive reaction to mental health messages on apparel. Although 70% had never purchased socially conscious apparel, 60% stated that they would consider purchasing, contingent on factors such as how the messaging is worded, who the brand behind the apparel is, and transparency regarding where the proceeds are going. People responded well to the idea of apparel because they found that it helped break down stigma, made them feel more comfortable opening up, and reminded others of the importance of recognizing mental health.
Lastly, regarding our goal of sharing stories, users stated that among the resources they researched, they found interactive forums/chatrooms and stories/blogs from others effective for alleviating feelings of hopelessness and isolation. Users felt less alone and found comfort in reading about others’ mental health journeys to learn about what solutions were effective for them, and could therefore potentially be implemented into their own lives.
User Personas
Based on our survey and interview responses, we were able to flesh out three user personas, each with their own user stories and scenarios. John was selected as our primary persona and focus for the duration of the project.
Journey Map
After selecting our primary persona, we created a journey map around his day, complete with relevant opportunities (in teal) for HOAM and other mental health resources to intervene and help solve the user’s problems.
Design
Site Map & User Flow
Based primarily around John’s scenario, we started creating a site map while keeping HOAM’s three goals in mind. We wanted to highlight the resources, blog, and merchandise pages while giving the user multiple opportunities to book in-person services. This is also reflected in our user flow, where the user is prompted multiple times to learn more about HOAM’s available support and to book an in-person service throughout the site.
Initial Designs
After developing our site map, we began to design our actual website pages with low-fidelity (lo-fi) sketches. We made several iterations of the same pages in different layouts to see which would work best prior to starting our mid-fidelity (mid-fi) wireframes. To create these designs, we first made a feature prioritization table to ensure we designed according to the project goals — to help users gain more information about mental health resources, read stories about others and their journeys, and discover the opportunity to purchase motivational merchandise.
Our quick wins were creating a resources/support page and a booking page, as they required little effort but conveyed the most information to the user. The ability to shop on the site would be a major feature as it would take a lot of effort and have a high impact on the user. As a future consideration, we considered having a chat bubble to prompt the user as soon as they entered the site. That way, if they needed immediate assistance or had questions, they could be helped quickly. We also had the booking page under Reconsider, as a booking platform would be more helpful than the current email contact form.
Mid-Fidelity Wireframes
Next, we began our mid-fis in Figma with the creation of a navigation bar. Our three goals are shown through the support, merch, and blog page links. With the use of a booking button in the nav bar, it is made very clear to the user how to book a service. The support is once again shown clearly on the home page with links to both our internal and external resources pages.
A simple box layout was used to help the user easily navigate and identify where they were located on the site. Clear visual hierarchy and descriptive text and titles were also implemented to avoid user confusion while looking through information. Lastly, the text size and line spacing were slightly bigger than average to help make the information easier to skim and read through.
User Testing
During our testing, we identified some key areas in our design that needed reconsideration. While we thought that our titles were descriptive, we found that users were still getting confused. Straightforward page titles proved to be important for the user to effectively navigate the site. For example, when naming a page “stories,” people would often look there for testimonials, even though it was meant to be a blog page. We realized that we had to reserve our creativity for the section headings within pages and keep the page titles themselves very clear, especially considering that users would potentially be navigating the website in times of stress and confusion.
Based on our research, transparency in charitable apparel was also important. Potential shoppers wanted to know what percentage of proceeds were going to charities, and which charities they were going to. We had to re-work the existing site content to make this information as clear and transparent as possible, as users were not always quickly able to identify this key information during our testing phase.
Lastly, we tested our prototype based on our heuristics. The heuristics we chose to test were selected based on our audience. We had to make sure that the site design was consistent, that users could understand where they were, and that they could take minimal action to find what they needed. We did not want to overwhelm someone who may already be anxious. We also took measures to ensure the site was accessible. This meant testing colour contrast ratios, enlarging target areas, and avoiding confusing or deep site navigation.
High-Fidelity Design
The last stage of our project was a one-week UI design sprint. When it came to polishing our final high-fidelity design, we ended up using calming teals as our dominant colour in place of the vibrant red on the existing HOAM website. Instead, we darkened the red to a less aggressive maroon and reserved it for use sparingly as our contrasting colour for CTAs. We wanted to use soothing, non-threatening colours from the blue family to help put the user at ease and encourage calmness. This relaxing colour scheme went in tandem with the clear, easy-to-use design we worked hard to create.
Conclusion
Through our research, we found that the resources currently available for those impacted by mental health conditions are not only limited, but often difficult and time-consuming to navigate. People struggle to find adequate support, and men in particular have to deal with the stigma that accompanies speaking out about their conditions. Our team worked hard to overcome significant challenges regarding fitting a wide variety of content into a clean and efficient design that was also accessible for a variety of users.
I admire the work that organizations like HOAM are doing to help break down sexist stigma and provide support to more men who need it. I wish HOAM the best of luck with their mission, and hope that they can continue to grow and make a much-needed positive impact on mental health. I am grateful for the opportunity to have have contributed to their website and potentially helped men in need, and I look forward to my next project as a UI/UX Designer.
Thank you for reading! Please feel free to visit my portfolio or LinkedIn if you’d like to connect or see more of my work.
