top of page

A Platform That Caters To Your Mental Health Needs.

UX/UI Design . 12 Weeks Timeline . Passion Project

Serene

Friendly reminder: The main points are highlighted for your convenience and better user experience :)
MY ROLE
As this was a passion project I was responsible for the end-to-end design process, which included being both the user researcher and user interface designer.
DELIVERABLES
Analysis and user research, Market research, Competitive analysis, Interviews, Personas, User flows, Sketches, Wire-framing, Prototypes, Mockups, Usability testing.
QUICK SUMMARY
Serene is an app that promotes a healthy well-being lifestyle by providing individuals with accommodating information and coping strategies.

Users can utilise the app to track their moods by journaling whilst being able to access resources for their various needs.

I designed this platform after considering the lack of features available on the current market and what pain points users are experiencing.
APP OVERVIEW
Alternative to therapy 
  • Provides a collection of dependable and easy to access material on mental health and psychological self-care.
​
  • Topics consist of anxiety, depression, stress etc in forms of podcasts, audio, articles, videos.
A ‘for you’ section 
  • Write down your thoughts, about your day, any problems you faced in your diary. 
​
  • Adding tags will automatically filter out key words giving you a personalised ‘for you’ section with relevant material that relate to your current mood.
​
  • Perfect for on the spot solutions/help. 
Mood tracking
  • Statistics of when you were feeling good and not so good logged daily whenever you open the app.
​
  • Keep track of what times or days you have low mental health. 
​
  • Helps find a pattern and provides motivation to keep going.
‘‘Tracking your thoughts is good for maintaining well mental health, aiding to your psychological wellbeing.’’
THE CHALLENGE
Due to the lack of easily accessible resources out there on mental health, people find it hard to maintain a positive relationship with their mental health.
 
Initial thought...
Before getting started I was sceptical about creating a completely brand-new product for the problem at hand. Since the market currently has several apps already out there, I was unsure if this was the route to go, therefore I began to conduct further research.
UNDERSTANDING THE PROBLEM
Before jumping straight into the main problem, I had to answer the question of who is the key user? 

Therefore I began some background research to understand current mental health in more depth, analysing at key statistics and findings. 
BACKGROUND RESEARCH
Issues surrounding mental health are reported to be one of the leading causes of illness and disability worldwide.
Sources used
1 in 4 people in the UK will experience a mental health disorder each year and in alone England 1 in 6 people have reported to have experienced a mental health problem such as, anxiety or depression. 
Source: https://www.mind.org.uk/information-support/types-of-mental-health-problems/statistics-and-facts-about-mental-health/how-common-are-mental-health-problems/
The pandemic fuelled a 25% increase of cases of depression, anxiety, and suicide, due to the following factors: 
 
  • Increased unemployment rates.
  • Prolonged lockdown. 
  • Working from home in an environment that lacks tranquillity.
  • Increased cases of domestic violence and abuse.
​
Source: https://www.who.int/news/item/02-03-2022-covid-19-pandemic-triggers-25-increase-in-prevalence-of-anxiety-and-depression-worldwide
When it comes to your psychological wellbeing, self care is crucial to help you manage your mental health issues and lower your risk of illnesses.
Research summary and key findings...
Individuals find it hard to speak about the topic of mental health issues.
As the topic of mental health disorders is predominantly overlooked or ignored, feelings and emotions usually get disregarded. Largely due to ignorance, the lack of knowledge out there, and stigma surrounding mental health. 
Psychological self-care is not easily obtainable.
People are unaware of the help that is out there. May be open to the idea of a therapist but they are typically too expensive for the average being and not always available. 

Others find it difficult to talk to others and express their concerns.

It is reported that only 1 in 8 adults in England and Wales with a mental health problem are currently receiving treatment. 
People have a shortage of time. 
A large percentage of adults find it hard to find free time due to other responsibilities such as being a parent, work, education etc. Therefore, they seek a quick fix to their solutions.

Long-term treatments, or the commitment of therapy may clash with their busy schedules. 
THE PROBLEM
After analysing the data collected, I was able to identify the problem which was...

As there is a lack of knowledge and resources out there on psychological wellbeing and mental disorders that are easily accessible for people to use, and people find it hard to maintain good mental health routine.
To solidify what features to add within my application, I conducted further market and user research...
MARKET/USER RESEARCH
What I accomplished through this research...
  • Found out what problems & struggles people encounter on a day-to-day basis through questionnaires and surveys by highlighting what their  wants and needs are when it comes to receiving help.
​
  • By analysing the different methods people have been using to receive support I was able to figure out what is currently lacking on the market. 
​
  • Conducting research in terms of interviews and surveys  gave me a clear insight into what the users wants and needs are.
​
  • Looking into current digital solution exists today I was able to learn as much as possible about potential users. 
COMPETITIVE ANALYSIS
I wanted to figure out how to augment a new application by comparing the features of different mental health apps to see what is missing from them. 

 
COMPETITOR APPS
APP FEATURES
I noticed a pattern in most of these platforms which was that they operated by tracking and monitoring users’ behaviour, and then provided them with feedback on their difficulties and solutions for how they’re feeling in that current moment. 
 
Key insights...
  • A few apps such as, mood fit, and mood mission offered some activities or exercises to help assist their users in times of need.
​
  • None of these apps provided any sufficient information or resources to benefit their users into understanding why they were experiencing a certain emotion or why they are feeling the way they are feeling.
​
  • Early intervention is important. Since these apps did not provide the user with any long-term fixes people may go through the same problems again. 
USER RESEARCH
I THEN CONDUCTED USER INTERVIEWS…
  • Data collected came from google forms, phone interviews, and surveys.
     
  • I posted the survey into slack groups as well as shared them with friends and family. 
Response breakdown and key findings...
DEMOGRAPHICS

Google Forms Survey: 16 Responses
​
Age: (22-28)
- 9 People aged: 23, 25, & 27
- 6 People aged: 24, 26, & 28
- 1 Person aged: 22
​
Gender:
- Female: 12
- Male: 4
​
Occupation:
Employed: 10
Student: 4
Unemployed: 2
 
​

 
Phone/Zoom Interviews: 4
​
Age:
- 19
- 25
- 28
- 36
​
Gender:
Females: 2
Male: 2

Occupation:
Employed: 2
Students: 2
KEY QUALITATIVE INSIGHTS

Although I only had a small sample to go off, I noticed a similar theme and pattern in the responses received. These insights later helped to influence my design decisions.
Most people are aware of the support/resources regarding mental health out there, however, have not used any themselves.

‘I don’t really know much about it beside just the traditional therapy sessions, but haven’t used any kind’

‘Yes, I know what support is out there, I have just not really gone and like and made use of the services, because I didn’t feel comfortable discussing my health with someone else.’

‘I’ve tried to use apps, but they got very confusing and weren’t visually appealing, so I got rid of them. The whole layout was confusing and browsing for what I’m looking for was very difficult.’

People want to help themselves when it comes to their mental health but feel that there is a lack of information accessible to them.

‘Yes, 100% there needs to be more accessible information, and clear guidance on ways to cope. Most people who search for resources are lost and don’t know where to start and need the right advice/info.’

‘It’s very hard to find out about ways to help yourself’

Searching for solutions is not always successful as people find it difficult to find what they’re looking for.

‘I suffer with social anxiety, I try to look for solutions online to help me in forms of an app or website, but I can’t seem to find one, the main solution that comes up is therapy as I’m not yet comfortable to go out and talk to someone.’

‘Yeah, I did search, and it didn’t work as it suggested methods that I wouldn’t want to try.’

‘I have tried to look for solutions to start working on my mental health, I don’t know how successful I was apart from thinking about going down the therapist route.’
 
A change of mind...
From both competitive and user research I scraped my initial thought of redesigning an existing app. I noticed from both app reviews and the interviews/surveys that past apps had failed the users and they were left dissatisfied. Therefore, my decision to create a brand-new product was finalised.

Using the data, I collected from the interviews I conducted I then created a primary persona who will be my  key user.
 
Primary persona
After analysing all the data collected and looking at my persona I decided to create a mobile phone application. I came to this conclusion after observing what forms of digital tools people use the most and what will be the most efficient and effective place to showcase my product.

When designing I will be focusing on my primary persona as the main user of this app.
A USERS JOURNEY
The best way for me to see how a user may react to the flow of an application and how their overall experience is was to observe any obstacles or pain points they may encounter when using a mental health application already on the market.

By creating a journey map I was able to figure out what features I should include within my application, what I should avoid and how to give my users the best experience.
 
USER JOURNEY MAP: Finding a mental health app to help improve and promote better mental wellbeing.
User journey insights
From the user journey map I was able to extract this key information.
Although the user journey map allowed me to see where a user was struggling and what to include within my application, I went back and spoke to users again to see what they would expect within an app and what they did not find useful.

I shadowed the users whilst they used current apps on the market to get a non biased reaction so my research can remain authentic.

Using all this data collected, I created a features prioritisation chart. 
featurespiro.png
STARTING THE UI... 

DESIGNING, PROTOTYPING, TESTING (and then repeating)
SKETCHING AND PAPER PROTOTYPING
It was important for me to begin my design phase by testing my ideas and gathering valuable user feedback earlier on so I could iterate and make changes to my ideas accordingly that would meet my user’s needs. 

I began by drawing several sketches and then combining them into a paper prototype using the paper prototyping app ‘POP’ so I could gain user insights and get feedback.  
Pictured are early sketching iterations of my initial ideas.
The feedback I received included...
 
  • Users wanted the main profile to consist of more personal resources. They did not like having liked videos on this page as there was already a separate tab for this. ​
​
  • The tools section was quite difficult to use as there was not an easy option to search up what you were looking for. It was a long journey to find resources.
​
  • The UI was not very clear as icons were quite large and confusing as there were no labels just images.
​
  • Users mentioned that they would have trouble keeping track of their emotions/journaling as there isn’t much to remind them to do so on the app. Emphasised that they would need daily reminding to log their moods. 
Wants constant reminders to journal so add journal reminder after this screen.
Icons are too confusing.
Resources are complicated wants an easier way to find what they're looking for.
Search bar should be easier to navigate.
Profile icon is too aggressive and 'in your face.'
ITERATIONS I MADE
From the feedback I received from my users I began to iterate my design and create wireframes. I comprehended the importance of having a clear UI and good flow within my app. 
 
What I changed...
​
  • Made the icons smaller and limited them to 4 instead of 5, and I also clearly labelled them.
​
  • Added more personal resources to the profile page such as a ‘for you’ section which includes personalised resources according to your mood. 
​
  • The tools tab now has a search bar as well as filters so you can easily search up what you need and then filter out whether you want a video, audio, course etc.
​
  • After logging in/opening the app daily, you will always be greeted with a ‘Log your mood’ page where you can log your mood and enter a diary entry.  
WIREFRAMING
ONBOARDING
The initial onboarding to the application will give you a chance to log your mood and enter a diary entry. 
PROFILE DASHBOARD SCREENS
Main profile dashboard.
  • Includes: Recommended for you daily resources to cater to individuals specifically.
​
  • Last watched and currently watching resources for better and simpler  user experience
Resources saved by you are located in your profile dashboard as they can be easily located and are all available in one section.
Your journal located on your profile dashboard which is a private section within the app. It includes the history of your moods and diary entires organised using date and times for easy navigation.
The tools tab consists of a search bar so you can easily search up what resource you would like, resources recommendations, if you are unsure about what you are looking for and are seeking inspiration and filters, so you can narrow down your search to look for specific resources and save time. 
starting the design
THE UI
ONBOARDING
SIGN UP
LOG IN
MAIN FEATURES
MOOD LOGGING/JOURNAL
The mood/journal screens are shown before entering the app so you can remember to track your mood daily.
A 'For You' section is generated according to your mood with relevant resources and tools, so you can have better user experience and less stress when visiting the app as resources are automatically generated.
Journal tab, profile page.

Within the journal page you can see your previous moods as well as any previous journal entries. You are also able to add/change your entries throughout the day.
TOOLS/RESOURCES PAGE
You will then only be shown resources which are in video format.
Tools bar: Pick from a standard resource or search in the search bar for what you are looking for specifically.
Search what you need help with.
You are able to filter out what type of resource you would like ie: videos.
The feedback I received:
​
  • Should have an ‘I’m not sure’ button on the log your mood page for when you are not sure about your mood.
​
  • Filters should have more options such as time duration, most popular, most recent, etc.
​
  • Would be nice to have a social feed section like ‘Reddit or Twitter’ where you can have discussions and share materials. 
 
Applying the feedback ...
I went back and iterated on my final design making sure I refined it according to the feedback I received when user testing. 
 
ADDITION OF THE HOMEPAGE: SOCIAL FEED
'Your feed' a social networking blog page where you can interact with other users, like, help each other and share content online. 
LOOKING BACK AND MOVING FORWARD
 
This was my very first UX/UI project! Although there are many things I have learnt on the way and will do differently next time I am still extremely grateful for all I have learned and developed a whole UX process from scratch.

Carrying forward I will...

1. Iterate and do user testing as much as possible. At the beginning of my project, I noticed quite a few flaws in my design which were due to the lack of user testing and iteration I had commenced. I then realised the importance of user testing and iterating. I made sure to back and speak to users and constantly update my designs. 

2. Put more importance on WCAG standards. In the exhilaration of getting my UI to look appealing, I left checking the WCAG too late. When I put my completed designs into the colour contrast checker, I noticed a few failed. Although it may seem like it was something as small as text colour (white should have been black to pass) this is extremely important when it comes to UX/UI. I now have a better sense to submit to checking WCAG standards to ensure inclusion and accessibility. 

The most important thing I learned was not to be too hard on myself. All the errors I noticed within my project which initially would have discouraged me, ended up motivating me to do better and continue to enhance my skills. I’m also thankful to every user that participated in helping me get user feedback and improve my work. :)
THANK YOU FOR READING!
bottom of page