Project Context
How long did it take?
3 weeks, work with 3 UX designer
What are my Responsibilities?
UX research, UX design, Wireframing and prototyping, UI design, Usability test
What tools did we use?
Figma, Google Doc, Adobe Creative Suite
The Problem
Users find it challenging to prioritize their mental health as a priority due to their busy lives, financial constraints, and fear of judgment to seek the help and resources they need.
How can we help them?
"How might we create a gamified mental health app that offers interactive activities to engage users and keep them motivated in their mental health journey?"
Why is Gamification?
Gamification is an interesting and engaging method that keeps user loyalty. It aligns with our goal of keeping users motivated in their mental health journey.
User Research
We used a combination of quantitative and qualitative methods to gather our insights. We conducted 5 one-on-one interviews to gain a deeper understanding of the barriers that exist, preventing individuals from seeking out help when needed, and sent out a survey to 59 participants who have or are currently experiencing mental health challenges.
Research Findings
Through our survey, we find that there are over 84% of participants don't have any mental health support or therapy. Additionally, all participants faced various barriers hindering their ability to seek professional help, with fear of judgment (over 40%) and limited time (over 50%) cited as predominant concerns.
Further insights gleaned from one-on-one interviews underscored the pervasive sense of disconnect between individuals and mental health resources, with cost and time constraints emerging as key barriers exacerbating this gap. Moreover, the stigma surrounding mental illness compounded the challenges, leaving many feelings isolated and ill-equipped to address their emotional struggles.
Also, most of the respondents also stated that they do not have the habit of using any tools to monitor their mental health condition because they perceive them as unhelpful and may even have a counter productive effect. This is a potential issue that we need to address during the design process.
Meet Sam, Our User Persona
Based on our research findings, we created our user persona, Stressed-out Sam.
Sam is a marketing manager, he feels his mental health condition is getting worst because of his work stress. He used some apps to track and manage his mental health condition, but he found that it was unhelpful. So he tried to reach out to professional resources but failed because of time and cost constraints.
Now, he is looking for a tool that can record his mental health condition, understand his mental health condition, and provide advances for him to relax and improve his mental health well-being.
Can I reduce the time of user spend on look for desire information by streamline the categories and navigation system, and redesign the UI layout from text-oriented to visual-oriented?
Problem Statment
MindfulPlay was designed to engage users to keep track of their mental health condition and motivate them in their mental health journey to improve their mental health well-being. We have observed that many individuals facing mental health issues were challenging to sustain their motivation and commitment to traditional mental health treatments or self-help practices, due to time and cost constraints, and lack of emotional support. This is causing our individuals to ignore their mental health issues their mental health issue and hindering their progress in improving their mental health and well-being.
How might we create a gamified mental health app that offers simple and interactive activities, and community support to engage and motivate users to keep progress in their mental health journey?
Feature Prioritization Matrix
We used the "I like..., I wish..., What if..." method to brainstorm ideas for our design solutions.
Then, we do a dot voting to find out the ideas that are stunning and beneficial to users. Based on the vote result, we prioritize those ideas and generate the Feature Prioritization Matrix.
In this case study, we will first focus on the ideas that are high impact & low complexity, those are high impact & high complexity will be in second priorates.
User Journey Map
User Flow
Homepage Wireframe
5-Second Usability Test
I conducted a 5-second usability test to determine the user's first impression of the wireframe, and if it effectively communicated its primary message
The result shows the simplified design helps users find the desired categories more easily, proving that the new UI layout and the new categorize system work effectively.
However, I still received some feedback that pointed out some pain points.
Iteration
First, although most participants successfully located the search button, the button's design made it less noticeable. Participants can locate the button because it is in an expected location.
To make the search button more noticeable, I add a background color to highlight the button, and keep it in the same location.
Second, some of the participants couldn't read the whole page because the "Feature Link" section was too long, some of them didn't even know there was a "Feature Link" section.
I added the "Feature Link" title on top of the section and then reduced the length to make it shorter, so user can read the whole page faster and easier.
UI Style Guide
High Fidelity Prototype
On the Homepage, I created the top navigation bar based on the site map to replace the existing navigation system. It looks simplified and the image helps the user to understand the link easily.
Besides the homepage, I also redesign some pages of the secondary and third navigation to demonstrate the new UI design of the CSA website. I combine all the links and their next layer navigation to the side menu, it can reduce elements on the page, and users can easier to scan the page.
On the third navigation or the article page, I also added a side menu as a table of contents, users can use it to jump to different parts of a long article.
Usability Test
To find out how the new UI design element affects the user experience, I conducted another usability test to collect some insight to improve my design.
Here is the usability test plan:
Result
Here is the result of the usability test. I found that there are some issues of the UI element that need to be fixed.
Iteration
First, I changed the layout of the card, increased more space for the image, and moved all the words to the top. Users can easier to scan the card from top to bottom and know the meaning of the cards.
Second, I add a break line between the different links on the side menu, to reduce the confusion for the users
Third, I add a link for users to select different language.
Let's Try My Prototype
Final Thoughts
In this project, I learn more about the UI design process. It is an interesting but also confusing stage, all the research methods, and design principles are new for me, it is a hard time when I try to understand all the things and create a case study in a short time. I wish I could have better time management, so I can spend more time in the research stage to get better and comprehensive results for my design.
During the case study, the most difficult part is to combine and simplify the existing complex navigation link and system. Although the card sorting already helped me to create a simplified site map, it still has some issues that need to be resolved. For example, some users are still confused about the category title on the top navigation bar.
In my next step, I will conduct a open card sorting, to discover the possible title for the category, and improve the site map, make the wording and navigation system easier to use and understand .
Copyright © 2023 Chi Hong Lai. All Rights Reserved.