top of page

Harmonium

H_logo_B_1-01.png

Harmonium

Timeline
12 weeks, Spring 2022
Role
UX, UI Design

Create a platform to spread awareness about mental health

I worked among a team of five people to create a mental health website. Our goal is to bring awareness and resources to those in need. We wanted to keep this question in mind while going through the design process "Why do we care about mental health?". 
The challenge
Website for mental
health awareness &
resources
We wanted to create a place for people to go to for mental health resources. Although there are many mental health websites out there, how do we make ours different? What resources would we provide and how can we make our users care about mental health? For this project, we will walk you through our journey using the design thinking process. 
Frame 1 (4).png
Research plan
Here are some of the key areas that were established in helping us through this process
1
Empathize / Brainstorm
We used affinity diagrams to do brainstorming exercises before establishing who we were designing for. Once we defined the user, we used empathy maps to target pain points.
2
Qualitative Research
We conducted user interviews to find out the needs of users when it came to mental health and the correlation it has to the workplace. 
3
Quantitative Research
We sent out surveys to gauge how users get their information about mental health and what resources they were currently using.
4
Usability Testing
Once we had our first round of high-fidelity mock ups, we conducted usability testing to understand the overall functionality of our website.
Frame 34.png
Brainstorming 
We created Harmonium with the intention to help employees who struggle with mental health in the workplace. When we first met as a group, we were given the task to compile a list of things we had in common. That is when we realized that we all have had prior experiences in the workplace that led to poor mental health. This affinity diagram shows our first brainstorming exercise and what led us in the direction of being mental health consultants for the workplace.
Team C Company.png
Empathy Maps & User Interviews
Once we established our product and goals, we decided to conduct qualitative research. During this process, we conducted 5 user interviews. We wanted to understand how and why their wellbeing was affected. We discovered that people needed more resources and lacked access to therapy. We collected the data from our user interviews and used empathy maps to identify assumptions about the user.
Empathy Maps.png
Surveys & Personas
After establishing pain points of our user through empathy maps, we wanted to collect quantitative data. We conducted user surveys to find out where users go to for mental health resources and how often they talk about it with friends/family. We found that people wanted more social media engagement and there was a lack of community to share in. From the surveys, we noticed that there were two distinct user groups - the Millennial user & the Boomer / Gen x user. We created our two personas based on the established groups.
Group 7.png
Redefine Goals
After discovering who our users were and what they wanted we went back to the drawing board to reflect and modify. We decided to not focus on changing the workplace, and instead on how people viewed mental health, and the importance of making your well-being a priority in your life. Though we would still advocate for businesses to see the role that they played in their employees' lives, we wanted to provide resources away from the place that was bringing many people stress.
Group 181 (1).png
Brand Identity 
Now that we have established the goal for our business, we wanted to define our brand identity. We started off by creating mood boards. We all gathered pictures with round archways and peacock feathers not noticing that we all had a similar color story. Going with the jewel tones, we wanted to choose colors that were calming. Since our focus is mental health, we want the user to feel at ease when visiting our site.
Style Guide.png
Color.png
Logo, Fonts, Assets
Similar to the logo, we wanted to use sans-serif fonts that have those same rounded corners. We wanted to maintain consistency with our branding so we created assets that could be used throughout the website. A major asset that we created was a character that embodies and represents Harmonium. You will see her used throughout our site to maintain this uniformity.
Group 20.png
Wireframes
After we established fonts, colors, and assets, we were ready to begin wireframing and laying out our site's architecture. We used the Golden Ratio during the creation of our wireframes to lead the eye to the call of action.
Group 42.png
1st Round of High Fidelity Mock-Ups
After the wireframes were complete, we moved into the creation of high fidelity mock-ups following our style guide and the layout of wireframes.
Group 73.png
Usability Testing
We conducted usability testing to understand the overall functionality of our website. Users were given a set of five tasks to complete while being recorded. This was conducted through Lookback.com. From the usability tests we found common themes among all the participants. 
 
  • We noticed that users found pages easily if they were listed at the top navigation bar
  • Users were unfamiliar with the payment layout on the donations page
  • Users did not know how to register for an account as the only option was to "sign in"
  • Users want a clear confirmation for when they registered for an event and a place to find it later
 
Screen Shot 2022-04-22 at 10.43.29 AM.png
Usability Impact - Final Prototype
From our usability tests, we learned the following from users and applied that to our final prototype:
 
  • We learned that many users were unclear about what services we provided so we provided a carousel to display our array of services
  • We learned through A/B testing that users wanted both search and filtering options
  • Some users felt overwhelmed by the events page so we used the progressive disclosure principle to lessen the cognitive load on the user
  • We learned that some users didn't feel like this was a website for them by the mascot shown so we included illustrations that show diversity and inclusion for all
Group 181 (2).png

Project takeaways

Create a safe space for people to connect

We started off by creating a company that focuses on mental health. We decided to conduct qualitative research to find out how users felt out mental health in the workplace. We eventually decided to build an advocacy group based on our findings. The group will focus on providing resources to those in need and connecting people with others like them. Our website will include articles, podcasts, and events that help educate people on mental health. Harmonium will be the vehicle to spread awareness of mental health.
bottom of page