Mental Health App
A mood-tracking experience designed to make emotional well-being easier to understand.
Overview
Applying for a position in a digital agency, I was asked to participate in a design challenge to create a mental health app from concept to final deliverable. I was only given the project brief and two weeks to submit any activities, screens, or artifacts to support my idea.
Process
Review Project Brief
The first thing I did was to breakdown the project brief so I can understand the main “asks.” To review, the project brief states:
For many people, there is a great deal of purpose and self-worth tied to our work. We often face new challenges, which can turn into learning opportunities that foster growth and change. As we commit ourselves to meaningful endeavours in the workplace, how might we make sure that we're actively tracking our thoughts and moods to help promote and maintain good mental health?
- How could this practice be made more accessible for people in the workplace?
- What are some ways in which people can document their thoughts without it feeling too repetitive or task-based, share things that they've learned, and receive guidance or support without feeling obtrusive?
Data Gathering
Focusing on the important specific phrases bolded above, I have converted them as being my goals for the app. To organize my thoughts, I created a table and started doing some divergent thinking to come up with as many possible solutions.
Assumptions
The difficulty with creating an app from scratch is that it’s easy to run into a lot of gaps. Some of these gaps are 1) what are the user pain points? 2) what information is relevant to the users? 3) and what do stakeholders find important?
With these and many more unknowns, I had to make a lot of assumptions:
- people are not comfortable to reveal their mood openly to their team
- people do not want another app to check messages and conversations
- people will not want to stop their current tasks to add their mood in the app
- moods change constantly
- people will only add comments if the mood is negative
- you have to focus on yourself first before being able to help the team
This was a good exercise to practice empathy towards potential users. I kept several post-it notes next to my computer to remind myself of these assumptions as I work on the design.
User Flows
I’m naturally a visual person, so it’s really helpful for me to create simple user flows so that I have a general idea how a user will navigate through my app without creating any UI screens.
User Story Mapping
My experience as a product owner allowed me to see the importance of user story mapping. Usually done as a team, user story maps allows for the defining of user goals to tell stories to make sure the entire team is on the same page. It also helps from over-building features and getting a better understanding of the “big picture”. The final story map for this project looks like this:
The steps I took to create this was to use the data I gathered in the earlier phase. I summarized the goals into four major groups: onboard, capture, measure, and share. Next, I would detail the user’s steps to accomplish the goals mentioned. This would then allow me to start designing and creating user stories for each user step or activity. The final step in a user story map is to prioritize the features but I skipped this since I’m not looking to build a MVP.
User Testing
Testing the Capture User Flow
With a basic idea of what I wanted to build, I fired up Figma to start designing the wireframes. The first thing I wanted to work on was the capture user flow.
My immediate plan was to quickly design the screens and show them to a couple of my friends to get instant feedback and make further adjustments. But after a few quick searches on Google on online user testing tools, I decided to take it a step further and use an app called Maze.
Maze was a great tool as it gave me detailed insight on my designs. The only problem was it’s still an unmoderated remote testing tool which is useful for simple findability tasks and visual design signifiers but given that I was using low fidelity wireframes and the instructions I gave may have been a bit confusing, there was high abandonment and misclick rates. Here are the results:
Testing the Measure and Team User Flows
The next screens I wanted to test were the measure and team user flows.
Learning from the first set of tests with the capture user flow, I tweaked the testing to be semi-moderated. After giving the test link to my friends, I also got on a call with them to answer any questions they may have and to clarify the objectives of the testing.
The results speak for themselves. There were still a few things that definitely needed to be addressed but overall the designs were on point.
Revised Wireframes
Armed with the knowledge gained from the usability tests as well as the post interview with my participants, I had a good idea where improvements can be made. My first action item was to improve the home/timeline screen. There were several users who could not find the Add Mood button to get started. Looking at the heatmaps, it showed that users were fixated at the top half of the screen. In order to improve the design, I needed to bring the Add Mood button higher because the distance to this main action was too far for new users unfamiliar with the app (Fitt’s law). Adding labels and increasing the contrast also increased the chances of them discovering this action as well. Below is the before and after designs to the wireframe:
Another screen that needed significant improvement was the Add Activity screen. I realized that I missed the ability to optionally share comments/insights with the team. This would allow the user to add comments confidently knowing that they have control over what is shared or not. Another issue that the user test revealed was that some participants ended early by clicking on the Save button. By changing the primary call-to-action from Save to Add Feeling, participants had a higher chance of completing the Add Mood workflow.
One of the concepts I have to keep reminding myself is the notion of simplicity. I have often fallen into the trap of taking away elements to make the page less cluttered. I used to believe that less elements on the page would make it less overwhelming for the user and therefore less complex. But perceived simplicity is different from operational simplicity, where taking things out could actually make it harder for the user to find what they need to complete a task.
The heatmaps for the screen below showed how some users were trying to click on the calendar icon to possibly change the date range. I’ve made it easier for the user by showing the controls immediately without them having to open another screen.
Wireframes with User Flow
Final Deliverable
Color
In choosing a color palette for this app, I wanted to assign each mood a certain color. I decided for the colors to have a playful and soothing aesthetic so I chose a pastel palette to complement the users’ emotions.
Primary Color Palette
Secondary Color Palette
Greyscale Color Palette
Typography
Two typefaces are used within the Mental Health App: Omnes and Neutrif Pro. Together they promote a playful and friendly feeling that’s inviting to users.
UI Elements
In designing the UI elements, I wanted to make sure that all components are consistent and intentional. Bringing the colors and typography together should invoke the same feelings of playfulness and friendliness that entices users to discover more. The goal was to inject serendipity through messaging, animation, and other delightful surprises.
High Fidelity Screens
In choosing the screens that I wanted to showcase, I chose the Timeline/Home screen and a couple of the Team screens. I believe that the Timeline screen is important to get right because this is what the user will first see when they open the app after registering. It has to focus on providing the right amount of context so that the user receives a snapshot of their progress. It is also important that this screen keeps its inviting and pleasing aesthetic to the user even if they have entered multiple negative moods.
The Team screens were the ones I wanted to feature next. I feel that these are the most valuable features of the app because of how it shifts the focus from “me” to “we”. In the workplace, it is important that people are not just focused on themselves as individuals, but also take into account the team’s collective disposition.
One of the main goals in creating this app was to provide an avenue for guidance and support without feeling obtrusive. That is why I designed the app to allow users to express themselves and give honest feedback while remaining anonymous.
This data is also extremely valuable for managers as it can help them increase the team’s morale and flag issues before they can possibly escalate. It can also provide rich talking points during sprint retrospectives as real problems can be addressed by the whole team.
Prototype
Final Thoughts
This has been both very exciting and quite challenging at the same time because I’m used to collaborating with a team on UX projects like this. I was able to use my past experience to apply user-centered design techniques in order to come up with a product that I’m truly proud of.
I know there are still a few gaps in my design but given the additional time and budget, I would’ve fleshed out the onboarding and sharing experiences and ran more usability tests. I really would have liked to delve a little deeper on the buddy system and how to incorporate mental health management skills.