UI/UX Case Study: An app that helps you with your mental state
Here I am going to share my journey of the assignment I completed during the 10k Designers UX/UI cohort. The assignment was about creating a Booking Flow of any problem statement of our choice.
Where did it all begin?🔍
In 2017, the ex-President of India declared that India was “facing a possible mental health epidemic”. According to research, it was found that 14% of India’s population was suffering from mental disorders, including 45.7 million suffering from depressive disorders and 44.9 million from anxiety disorders. This was all before Covid-19 ever happened. Things started to degrade further once Covid-19 hit our bases and made things worse. And most of the ones suffering were younger individuals.
The contribution of mental disorders to the total DALYs in India increased from 2.5% in 1990 to 4.7% in 2017. According to the research done on the national level, it was found that during 2017, depressive disorders contributed the most to the total mental disorders DALYs (33.8%), followed by anxiety disorders (19.0%), idiopathic development intellectual disability (10.8%), schizophrenia (9.8%), bipolar disorder (6.9%), conduct disorder (5.9%), autism spectrum disorder (3.2%), eating disorder (2.2%), attention deficit hyperactivity disorder (0.3%) and other mental disorders comprising a total of 8% of DALYs.
So to say, keeping the population of India in mind that during 2017, 1 out of every 7 Indians had some mental disorder of some kind.
Problem Statement🙇
Nowadays we all know how the need for a therapist/counselor has drastically increased as compared to our previous generation. Looking out for the right one could be a hectic process, for example, Google search. It’s time now, since Covid-19 hit the planet, that people need mental care assistance, and for that, they need a trustworthy and reliable platform.
Why PSYGroom? And how is it going to help?🙋♂️
Let’s tell you a short story about myself.
So it all began in the year 2018, after graduating with B.Tech as an Automobile Engineer. Things seems to have been going pretty smoothly until I started losing people from my life. I still managed to go on to work and follow the cycle of life till 2020 when I was one of the early victims of those who were booted out of the company I was working in as a cost of cutting of recent joinee due to Covid-19. Since I had no one in my life to talk to and now sitting at home, jobless for a year started to mess up a lot in my head. I chose a different field by the idea of doing something I did not like ruined my mental peace more. I wanted to talk to someone, but the fear of being judged and laughed at always pulled me back. Tried a few apps but none helped as they solely focused on anxiety and stress disorders but they never tried to show the reason as to why and how their procedures might help.
This, this is the main reason why most of the people out there are still suffering, because they don’t have the right platform to share their feelings with, and I felt that why would I let someone else go through the same thing I went through, Google search can become more hectic if you do not know what you are looking for. That is where PSYGroom swooooooooooshh in like a Supermannn!
So how is going to help you ask? Here are a few bullet points to answer that-
- 1-click consultation with any nearby therapists/psychiatrists.
- 1-to-1 therapy sessions or Over-call sessions are available.
- Limited free sessions for financially weak clients with the option to pay in EMIs for future sessions.
- Progress Tracker.
- Activities for mental health improvement.
- Availability of Support groups.
Let us check out the Process🔁
Iterate…Iterate…ITERATE!!!
Research🕵️♂️
I talked to a few friends and members of 10k designers C5 as well through forms which helped me understand their problems. I also interviewed 3 people who were suffering from some mental disorders.
Insights from Interviews:
- They prefer talking to their friends first and foremost.
- They cannot consult their families and talk freely about what they are going through.
- Scared of being judged by the people.
- Those who visited some therapists decided to go for self-diagnosis cause they had a bad experience with the therapist.
Insights from Surveys:
- Finding the right therapist/counselor is a challenge.
- Lack of money.
- Prefers to give time and let it cure by itself.
- Opt for music as a cure.
SWOT Analysis:
Some questions made me think from the insights I got:
- How can we create awareness about mental health in today’s market?
- How can we help individuals perform self diagnose on themselves?
- How can we connect the expert with the client on one touch basis without having them go through multiple experts’ profiles?
- Just keeping care of our mental health is not enough until we take in a healthy diet. So how are we going to encourage people about the same?
- What are the fun activities we can bring out for our users suffering from anxiety and stress?
Competitive Analysis💪
Since Mental Health is a very delicate subject, figuring out the competitors and their work process was a necessary task too. This way we can figure out what should be the necessary input to be made.
I came across quite a few products, with the help of Google search of course, and found that they differed a lot from each other. Though most of the products are aimed at curing Stress and Anxiety among people most of them lacked about the third biggest mental problem, i.e. Depression. Also there most of the products didn’t had provided an emergency contact number, which can be needed in some high-level cases.
This is my review based on the products I researched and I feel there should be more to engage with people’s mental health, as most of the products here only help with meditation but don’t provide professional help.
Information Architecture (IA)
I had a brief idea about what my product is going to look like, so to make the user flows simpler and to save time and less caffeine intake I came up with a blueprint that was laid out to the user keeping the best interests in mind.
Sitemap
I created a sitemap with planned IAs of various screens within the application. I understood the need for various jobs to be done and played around with them.
Wireframing📝
I started to brainstorm the idea about how the screens would look like in Figma and hence iterated on the same before getting down to Visuals.
With the help of Low Fidelity wireframes, I could easily visualize what my application is going to look like having yet to decide on the brand color and typography.
Branding
Since this application is based on Mental health, hence I went for the shades of Blue and White as these are one of the calmest colors and Kodchasan as a Font since it gives a pleasant vibe to our eyes, i.e. peaceful.
I created a fictional brand called PSYGroom which covers all the pain points under one single application hence allowing users to choose 1 instead of many.
Visual Design🎨
So now the time has come, where I will show you the visuals I have worked around with more than 10+ iterations with multiple changes. We will go in detailed about how I ended with the designs and will go into How’s and Why’s too.
I made a few decisions while iterating the screens related to the visuals:
- The screens should be a pleasant and calm vibe.
- Balanced screens towards comfort to the eyes, hence more white spaces.
- Illustrations make the visuals pop out.
There are screens that I won’t be included here in this case study but will stick to the ones we were asked to deliver, but in case you wish to see the iterations and other edge cases then you can SMACK ME!
Login/Signup Screen
Any application is incomplete with a Sign-up screen. The users’ trust, credibility, and intentions will solely depend on this very screen, hence making it visually appealing and satisfying was a way to go.
Discover Screen
Now when we were done with Login/Signup screens, the next big challenge was to design a suitable Home screen where the users can interact with most of the biggest assets provided to them at their fingertips, including various exercises to keep them mentally fit, healthy diet to keep them warm in their stomach, after all, “The road to health is paved with good intestines!” And also some great ways to keep them entertained through various activities like Drawing, Socializing, Games, etc.
Let’s come to another pain point that the majority faces: the Lack of options in most of the applications, i.e. Booking an appointment.
See Details Screen
Booking an appointment is not the only thing to consider but the credibility of the expert we are booking. There are lots of Therapists available on Google but to skim through all to get to well-experienced ones is one hectic process. That is where the filtering and sorting cards come in handy.
Let’s get to the screen where we can see the details of one professional.
Booking Screen
Once we fix an appointment, the last boulder left to climb was the Payment section. We have numerous ways to make a payment but how do we show it so that the user has a smooth process with the payment section? Let’s see it down below.
Some BONUS Screens!!!!!😉😉😉
Prototype
Last but not the least, every design looks lively when we put our hands on them, hence a prototype.
Key Takeaways🎓
Since you made it here, let me thank you for giving your precious time into reading this piece. As my first Case Study and my first Visual design, I now understand the energies and research it takes to even consider the correct font and color of the brand. So to conclude, the key takeaways I got from this assignment were:
- Thorough research is needed to land proper IA and user flows.
- Iterate. Iterate.. Iterate….!!!! Yes! New possibilities unlock as we keep iterating.
- Along with iteration, feedback is necessary. With proper feedback, iteration becomes easier and more approachable.
- Designs are everywhere around us. Take ideas from everything around us.
- Just Start. Don’t waste too much time on research. Research is important but what’s more important is Visuals too.
It’s a wrap, baby!🧳
Please show appreciation by hitting on the clap. Your support will mean everything. In case you want to view my entire assignment, here is the link to my Figma file! Most of my credit goes to the 10kdesigners mentors who showed me the ropes and guided me through every its and bits.
Feel free to reach out to me on:
