Case study: Designing an application to foster better mental health assistance
Building a comprehensive solution that makes accessing mental health assistance seamless
Overview
Sage is a mental health application that I designed through Springboard’s UI/UX Design Bootcamp. This case study elaborates on the design process followed.
Problem
Mental health has always been a neglected area within the Healthcare Sector. These issues have been and continue to be stigmatized, especially in India. This has led to a lack of awareness about how to approach mental health issues.
Reaching out to the right counselor/therapist is a daunting process. Further, there is a dearth of apps that focus solely on mental health assistance.
The COVID-19 pandemic has further exacerbated the issue and has had severe adverse effects on people’s mental health. Now, more than ever, people need a platform that enables them to seek timely and effective assistance.
Role and Constraints
Timeline: December — March 2021 (16 weeks)
Role: Individual project
Scope: UI-UX Design
Softwares used: Figma, Miro, Marvel, Illustrator, Photoshop
Design Process
I followed the user-centric design process to ensure that the end user's needs were taken into account every step of the way.
Discovery
The first step was to empathize with the users to better understand the problem space. This was done through primary and secondary research methods.
Secondary Research
Some of the insights from the secondary research conducted were as follows:
- A report by the World Health Organisation (WHO) revealed that 7.5 percent of the Indian population suffers from some form of mental disorder. Lancet Psychiatry reported that 1 in 7 Indians suffered from mental disorders in 2017.
- The treatment gap, which is defined as the prevalence of mental illnesses and the proportion of patients that get treatment, is over 70 percent.
- Depression and anxiety disorders are the most common disorders.
- Therapy is expensive. Insurance Regulatory and Development Authority (IRDA) has mandated that all mental illnesses are to be treated at par with physical ailments. Despite this, a lot of insurance companies don’t have insurance plans for mental health.
“ Mental health is too important to be left to medical professionals alone”
Competitive Research
- Apps like Practo, Meddo Health focus on the generic healthcare domain
- Other apps like InnerHour, HeadSpace, and Mindshift help with relaxation and meditation but do not enable a user to seek professional help
Primary Research
In order to conduct primary research, I conducted user interviews as my research methodology. I shortlisted 11 users based on a screener survey:
- Users who have sought therapy and users who have contemplated seeking therapy
- Certified medical professionals dealing with cases of mental health issues
A diagrammatical representation of the statistics obtained pursuant to the user interviews are set out below:
The key insights obtained were as follows:
“There needs to be more awareness on mental health”
“There isn’t one single medium of seeking therapy leaving me feeling overwhelmed”
“I would trust a therapist who is recommended by friends or family”
“Cost, Specialisations, ratings are key factors when considering a therapist”
“With the COVID-19 pandemic I prefer virtual therapy”
“I want my data to be safe and secure”
“I would like to be able to self-diagnose my symptoms”
“Talking about mental health issues more openly is the first step in breaking down the stigma around the issue”
Define
The next step was to define the problem. In order to do this, I first needed to understand the main problem areas by synthesizing the research
Affinity Mapping
I started by grouping the insights gathered from user interviews on the basis of similarities. I was able to categorize them as follows:
- Technical competency
- Coping mechanisms
- Causes and triggers of distress
- Mediums of seeking therapy
- Key factors when finding a therapist
- Virtual therapy preferences
User Personas
I identified 2 user personas that represented the type of users who would be using the solution.
Problem Statements (How-Might-We Questions)
From the research synthesis, I was able to come up with specific problem statements that needed to be solved
- How might we create more awareness around mental health assistance?
- How might we get people to self-diagnose better and improve self-treatment techniques?
- How might we enable individuals to find the right therapist for them?
- How might we have a one-stop-shop for all mental health-related concerns?
Ideate
I started ideating potential solutions to help solve the problem statements:
- Allow the user to read and share articles on mental health
- Find a way for the user to self-diagnose symptoms
- Enable the user the option to avail self-treatment
- Allow the user to find the right therapist through a smart algorithm that filters therapists based on inputs from the user
- Promote virtual consultation during the pandemic
Information Architecture
The important task of establishing the information architecture which is the blueprint of the product was taken up next
Sitemap
I started by creating a sitemap of the product — It included the various screens and their hierarchy within the product
User Flows
I conceived 3 user flows that would entail the most vital routes that the users would need to take to accomplish key tasks on the application:
Design
Once the information architecture was in place, I moved on to the designing phase of the case study
Sketching
Thereafter, I started sketching the screens identified in the user flows to visualize how they would look like on a mobile device
Guerilla Usability Tests
With this paper prototype, I conducted 5 guerilla usability tests to see if there were any usability issues and to gather initial feedback on the designs
Applications used: Marvel POP Prototyping application
Tasks:
Use the app to find mental health assistance techniques on your own, without seeking professional help
As a user, you wish to seek therapy, how would you find a professional and schedule a session
Key Insights:
The initial designs had a card matching system (the application shows the users a list of therapists they have matched with, similar to the interface of certain dating apps) which users found confusing. A user mentioned having cards could be anxiety inducing. I replaced the card system with a concise list instead.
Users mentioned that a random list left them confused as to how many therapist options they had. I added a screen notifying “We have shortlisted 5 therapists for you based on your inputs” — this makes users aware of the exact number of options they have
A second-level sorting within the list was needed. I added a “Sort by” option on the therapist's screen as well
Low-Fidelity Wireframes
It was now time to digitize the paper sketches to create low-fidelity wireframes. These black and white prototypes helped me design the skeleton of the screens without considering visual design elements like typography, color, iconography, etc.
Brand Identity
The next important step was to focus on the visual design elements and create a brand identity for the product.
High Fidelity Wireframes
Incorporating the visual design elements to create high fidelity mockups was then undertaken
Some key features and functionalities of Sage are:
Testing
I conducted 2 rounds of moderated usability tests with 5 users in each round. This was to identify any usability or navigational issues that may arise and to get feedback on the visual aesthetic of the product
Issue 1: The therapy tab was confusing to users — they did not know where to book a session and where to start a session from
Solution: Segregated the therapists and appointment tabs. The therapist tab would be used to view the therapist information and to book sessions. The appointment tab would include past appointment history and upcoming appointment details. The second round of usability tests proved that the issue was solved with these changes.
Issue 2: Users did not know how to “Proceed to Pay” as the user had to scroll down to find the button on the Payment screen
Solution: As this was a payments page, I made it more concise and included all the details including the “Proceed to Pay” button on a single page removing the need for the user to scroll down
Issue 3: Users did not know how to reset their preferences to find a therapist or re-access their self-diagnosis
Solution: Besides the “reset preferences” option already available in the “Profile tab”, I added a button to reset preferences in the Therapy and Self-Help tabs so that it is more intuitive
Issue 4: Users wanted an option to “Pay Later” in the payments tab.
Solution: Implemented this option so users could pay in cash if they booked an in-person appointment
Designing for Edge Cases
While designing the screens, I also made sure to design for edge cases. Edge cases are interactions that may occur infrequently but may break the user experience if they do occur, so it’s always a good practice to design for the unexpected
Designing for Accessibility
While designing products one must always design for all. Designing for accessibility focuses on designing in a way that everyone — including users with impairments are able to use your products
Major Considerations:
- I checked the color contrast between foreground text and the background and made sure they comply with WCAG standards
- Buttons that relied solely on colors to indicate active states were modified by adding an outline so that color is not the only indicator (This assists people who have color blindness)
- For error states, I added a red outline but also added an error icon for better identification
Conclusion
This case study has been a great learning experience right from identifying the problem to executing the solution. The various stages of the design thinking process served as a roadmap for coming up with a solution.
Mental health awareness is the need of the hour and products like Sage help streamline the avenues available to someone seeking assistance.
In future iterations, I would like to add features such as:
- Allowing users to link their insurance plans to cover therapy sessions right within the application
- Have a chatbot or a chat feature directly with a therapist for users who need to speak to someone urgently
- Other generic features like notifications, smart-calendaring, the ability to share articles across social media platforms, etc.
Thanks for reading my case study and remember to prioritize your mental health! 😊
Special shoutout to my mentor at Springboard — Kumaresh for guiding me through my UX Design Journey! 🙌🏻
