NewPhase
LEt yourself grow: stigma-free.
INTRODUCTION
Growing up, I noticed that a silent mental health crisis existed within the South Asian community. South Asians seeking therapy often feel misunderstood by health-care providers and got discouraged from getting further help. My goal was to create a wellness app that would give a voice to those who had difficulty opening up about how they feel. Introducing customizable therapy was the first step to overcoming this stigma.
MY ROLE
Tools
TIMELINE
Responsible for creation, ideation, research, illustration, design and user testing.
Figma, Miro, Sketch & Milanote
5 months
A silent mental health crisis exists among South Asian communities. South Asians seeking therapy often feel misunderstood by health-care providers and get discouraged from getting further help.
A wellness app designed for stigmatized communities. Helping overcome the stigma against mental health through customizable therapy options. Featuring a mood tracker, journal and therapist matching. Using customizable therapy as the bridge to overcoming stigma.
Problem
Solution
Design Process
After figuring out my problem and solution. It was time to get started on my design process. The first step in my design process was to Emphasize with the user and gain an empathetic understanding of the problem I am trying to solve. Then, with the research I collected and all the information I learned, I started to Define the problem and dove into more detail. Next, I began to Ideate my findings, bringing all my thoughts and ideas to life - visually. Finally, I created a Prototype & Tested my final app to a group of users and made final iterations.
Emphasize
In this stage, the goal was to gather secondary and primary research. Before I could dive into primary research, I had to educate myself on the research that already exists about mental health among South Asian communities. These were my observations:
🌎 86 million people
📉 Lowest rate
🧠 1 in 5
🔍 1/3 of the world
WHO estimates that nearly 86 million people in the South Asia region suffer from depression, making the region one of the highest populated in terms of depressed people. Worldwide, the number is 322 million.
The World Health Organization estimates that almost one-third of people suffering from depression worldwide live in South Asia, making the region home to a large majority of the world’s depressed.
According to the Asian and Pacific Islander American Health Forum (APIAHF) South Asian Americans have the lowest rate of utilization of mental health services.
Over 1.75 billion people in the world are South Asian, with over 20 million of them living outside South Asia.
1 in 5 US South Asians report experiencing a mood or anxiety disorder in their lifetime
💡 1.75 billion
User Research Survey
Now it was time to take all of that research and find out more. I sent out a user research survey calling all immigrants (specifically South Asians) to better understand the root problem. I received 13 responses and these were my findings:
Define
After gathering all my research & user survey results, I interviewed 5 people and started the process to define the problem with an affinity map, empathy map, heuristic analysis of competing apps & user personas. I used Miro to put together the affinity map & empathy map, Google docs for the heuristic analysis and Figma to create the user personas.
Affinity Map based on information collected during user interviews
Empathy Map based on information collected during user interviews
Heuristic Analysis Using three of Nielsen Norman Group’s 10 Usability Heuristics for User Interface Design: User Control & Freedom, Aesthetic and Minimalist Design, & Help and Documentation.
User Personas
Ideate
Now it was time to transition into the Ideation stage. I created Lo-fi & Hi-fi Sketches, HMW statements, User stories, Mood board, UI Guide, Site maps & User flows, to document all of my thoughts and ideas.
Low-Fidelity Sketches
My first step was to grab a pen and paper and make my way to a nearby cafe to sketch as much as I could! These were my first set of sketches.
Mood Boards
I created Mood boards with Milanote to get all my visual ideas organized and experiment with different colours, texts, illustrations, and more!
Style guide
With my background in Fine Arts, I made it my mission to design everything myself (from illustrations to icons and everything in-between) pixel by pixel! The UI I chose for the app was based around the idea of transitions. The transition from darker tones (blues, greens, navy) to warmer tones (yellow, orange, beige) represent the shift from night to day and visually represents the user's progress within the app. From understanding themselves better to accomplishing the ultimate goal of connecting and committing to their perfect therapist. "From the shadows to the light, Let yourself grow: Stigma-free."
Site map & user flows
I created a low fidelity site map to map out the navigation and to understand how many screens I wanted to include in the app. This process also helped me eliminate any screens that were repetitive and not necessary, It helped me narrow down the best paths for the user. Then, I went into Miro and created a high fidelity site map. Finally, I went into Miro and created a user flow for all navigation between Login, Onboarding and the Homepage.
Prototype & Test
The final stage was to Prototype and conduct Usability Testing. I jumped into Figma and created low-fidelity screens and put together my first prototype. I examined the screens and started polishing them by adding colour, custom-made vector illustrations, text, and all the final UI essentially. Bringing all of my ideas, research, flows, and sketches to life! For Usability Testing, I conducted 3 rounds of user testing, made final iterations and then treated myself for successfully completing my dream app!
Low-fidelity prototype
When creating low-fidelity screens, I knew I wanted to focus on Login/Signup, Onboarding, and all navigation from the Homepage to different sections of the app including settings, preferences, profile, therapist dashboard and more! This stage was critical to laying a solid foundation for the UI.
High-Fidelity Prototype
One of my favourite parts of this entire process was creating custom UI for all these screens in Figma. One of the most challenging screens for the custom made vector illustrations were the screens in Onboarding that say "Let's overcome the stigma" showing multiple hands placed on top of each other (that took me almost a day to finish and get every detail!) and as well as the "Let's celebrate where you come from" with the map of South Asia. (yes, I created every single vector for every edge and corner of each country 😅) but it all came together in the end!
usability testing plan
NewPhase completed 3 rounds of usability testing. This was the rating system and tasks that were completed by 10 users in total.
1 unmoderated remote usability test
Findings:
During this remote usability test, I discovered some underlining issues and pain points with the interactions built into the app.
1. Sign up Onboarding: the onboarding interactions were difficult for the user to navigate.
2. Therapy Onboarding: the therapy onboarding had missing interaction links.
3. Profile: The profile had overlapping interactions that caused the screen to disappear at times.
Next Steps:
The next steps were to resolve these pain points and move onto round 2 of testing with 4 new users.
Findings:
During this remote usability test, I discovered some underlining issues and pain points with the interactions built into the app.
1. Sign up Onboarding: the onboarding interactions were difficult for the user to navigate.
2. Therapy Onboarding: the therapy onboarding had missing interaction links.
3. Profile: The profile had overlapping interactions that caused the screen to disappear at times.
Next Steps:
The next steps were to resolve these pain points and move onto round 2 of testing with 4 new users.
Round 1 of User Testing
4 moderated in-person usability tests
Findings:
During these 4 in-person moderated usability tests, I discovered some occurring issues that were present from the remote usability test, and some new pain points that needed attention.
1. Quick-Add: Many users were having issues with the quick-add feature when trying to exit to the homepage. They instinctively clicked the screen trying to exit and instead ended up on another screen.
2. Therapy Onboarding: the therapy onboarding was still difficult for users to interact with, especially when I asked users to book an appointment. Most users couldn’t make the connection from the “confirm email” button to the “book an appointment” task.
3. Mood tracker Analytics: The mood tracker analytics was only accessible through the profile section, making it difficult for users to find a weekly, monthly and yearly view of their mood tracker. Also, there were interaction problems when the users navigated through the 4 tabs (today, week, month & year)
Next Steps:
The next steps were to resolve these new pain points and move onto round 3 of testing with 5 new users.
Findings:
During these 4 in-person moderated usability tests, I discovered some occurring issues that were present from the remote usability test, and some new pain points that needed attention.
1. Quick-Add: Many users were having issues with the quick-add feature when trying to exit to the homepage. They instinctively clicked the screen trying to exit and instead ended up on another screen.
2. Therapy Onboarding: the therapy onboarding was still difficult for users to interact with, especially when I asked users to book an appointment. Most users couldn’t make the connection from the “confirm email” button to the “book an appointment” task.
3. Mood tracker Analytics: The mood tracker analytics was only accessible through the profile section, making it difficult for users to find a weekly, monthly and yearly view of their mood tracker. Also, there were interaction problems when the users navigated through the 4 tabs (today, week, month & year)
Next Steps:
The next steps were to resolve these new pain points and move onto round 3 of testing with 5 new users.
Round 2 of User Testing
5 moderated in-person usability tests
Findings:
In the final round of testing, I analyzed all of the problems from round 2 and made updates.
1. Quick-Add: Instead of being able to click the screen and being re-directed somewhere else, I removed that interaction and instead made it simpler by letting the user tap on the “+” to exit the interaction, making it work both ways.
2. Therapy Onboarding: I added interactions to the 4 blocks in the therapy onboarding, giving the user 2 options to navigate, either by tapping the 4 blocks that are marked as “steps” or clicking the right bottom arrow. Also, I changed the “confirm email” button to “book an appointment” making it easier for the user to make the connection between the task and the design.
3. Mood tracker Analytics: I noticed that the mood tracker analytics page was a common issue among most users. I made the analytics page as the Mood tracker dashboard, avoiding the need for the user to go through profile to access it and also, using the quick add feature more often, since that was the only way to log your mood. As a result, users were able to separate the two screens easily and more effectively.
Next Steps:
Nothing is perfect at the end of the day, so there were still some pain points in these 5 usability tests. However, it was a significant positive difference from the original 4 tests. At this point, NewPhase officially complete its testing stage and was ready to be handed off to the development team!
Findings:
In the final round of testing, I analyzed all of the problems from round 2 and made updates.
1. Quick-Add: Instead of being able to click the screen and being re-directed somewhere else, I removed that interaction and instead made it simpler by letting the user tap on the “+” to exit the interaction, making it work both ways.
2. Therapy Onboarding: I added interactions to the 4 blocks in the therapy onboarding, giving the user 2 options to navigate, either by tapping the 4 blocks that are marked as “steps” or clicking the right bottom arrow. Also, I changed the “confirm email” button to “book an appointment” making it easier for the user to make the connection between the task and the design.
3. Mood tracker Analytics: I noticed that the mood tracker analytics page was a common issue among most users. I made the analytics page as the Mood tracker dashboard, avoiding the need for the user to go through profile to access it and also, using the quick add feature more often, since that was the only way to log your mood. As a result, users were able to separate the two screens easily and more effectively.
Next Steps:
Nothing is perfect at the end of the day, so there were still some pain points in these 5 usability tests. However, it was a significant positive difference from the original 4 tests. At this point, NewPhase officially complete its testing stage and was ready to be handed off to the development team!
Round 3 of User Testing
Final Few Screens ✅
Try out the prototype below to interact with the app and see all of the screens.
