Mon Ami
"Mon Ami" is a mental wellness application that encourages you to connect with people, explore your interests, and overall, check in on yourself.
An App That Supports Your Well-Being
As college students, my team and I felt passionate about improving mental health for young adults, especially during the Covid-19 pandemic. We wanted to create a wellness application that not only allowed for access to mental health content, but also allowed them to build connections within a supportive community.
Project Overview
Role
Team
Tools
Duration
UX Designer
UX Researcher
Shreya Sundar
Eliza Gonzales
Figma
Notion
G -Suite
February - August 2022
01. Research
To begin our research, we analyzed various mental health platforms and interviewed college students to better understand who our competitors are. This led us to a few insights.
Key Insights
01. Meditation is among the most popular features in competitor platforms
02. Users desired more content variety to engage with
03. Having a community feature would make users feel more connected
We used what we learned in our competitive analysis and user interviews to inspire our brainstorming in this next stage.
02. Ideate
In our ideation stage, my team and I felt it was important to implement a group community feature because of users' desires to connect with their community members. We also wanted to design our product with diverse resource topics for users to engage with, ranging from meditation podcasts (among the most popular) to self help articles.
Low-Fidelity Wireframes
With these ideas in mind, we went to the drawing board and began working on multiple iterations of low-fi wireframes until we settled on our final set.
Final Iteration Wireframes
In our final iteration of wireframes, we made the key features cleaner and easier for the user to engage with. This was especially important for our next step: usability testing.
Usability Testing
After selecting a set of key screens for each page, we prototyped them and gathered a diverse group of users to test them. We wanted to know if our wireframes were simple for users to navigate through. My team and I led usability studies over Zoom to assess five task flows in our wireframes.
Our Findings
-
Lack of feedback made users unsure about if they completed a task
-
Jumble of features became confusing for the users to navigate through
Some solutions we brainstormed:
-
Simplify structured layout so that the UI isn’t so overwhelming to the user, and they don’t have to get through so many steps.
-
Make the platform be more salient and obvious. Microanimation when they complete a task
In our next stage, we began prototyping the visual design of Mon Ami while incorporating solutions to this problem.
03. Prototype
Style Guide
We felt that a mental wellness platform should exude peace and comfort. With chose Monterserrat for its straight lines and simplicity. We chose a green aesthetic for its groundedness and connection to nature and a splash of fuschia to complement it.
With these ideas in mind, we went to the drawing board and began working on multiple iterations of low-fi wireframes until we settled on our final set.
Visual Designs
After weekly meetings of sharing and iterating on our designs, we landed on a visual aesthetic of our app. In particular, we created an intuitive community flow that allowed for easier interactions between users.
During designing, we fell upon a decision that we weren’t sure how to answer: How can we create a seamless way to navigate through the categories in the Discover page?
We had two versions in mind that we wanted to compare. So, we conducted an A/B usability study to determine which version was more simplified and less overwhelming to users.
A/B Usability Study
After selecting a set of key screens for each page, we prototyped them and gathered a diverse group of users to test them. We wanted to know if our wireframes were simple for users to navigate through. My team and I led usability studies over Zoom to assess five task flows in our wireframes.
Test Results
We observed a few rough spots with both version A and B. In version A, participants had difficulty spotting the main Discover categories (i.e. Music, Podcasts, Articles, etc.). In version B, participants found the filter button too complex, with too many clicks to get to where they wanted to go.
We decided to solve this by combining features of both Discover page prototype A and B because feedback suggested the high level categorization of Prototype B and genre categorization of Prototype A made the navigation process of each task more simple for the participants.
With the Discover frames being finalized, we moved on to designing the final frames of the other pages: the Home page and the Profile page. We used the same design style and logic as for the Discover page. You can view the final prototype here!
Reflection
With this being my first design project, I was excited to learn how to conduct a competitive analysis, administer user testing, and prototype in Figma. I was guided through the process by my club’s Outreach lead, Eliza, who really helped Shreya and I organize and implement the design process.
One important takeaway from this case study was to understand why a step needs to be conducted. While I was aware of the common steps designer take in the design process, such as empathy mapping, competitive analysis, and user testing, I was not aware of the impact those steps would have on my particular case study. This was such a vital lesson for me to learn, because every project is unique. Those common steps won't apply to all design works. The design process is created on a case by case basis, and this really makes me appreciate the unique level of depth and complexity one needs to understand when researching and designing.
Lastly, working in a group of beginner designers like myself taught me that communication is key. There's no doubt that doing all of our collaborative work through Zoom was tough. Keeping thorough communication between team members, whether it's about new ideas or study reviews, is so impactful in creating a meaningful and cohesive design.