SERENE
A platform that caters to your mental health needs.
Context
Overview
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.
​
My Role
User Researcher and UI Designer
​
Project
UX/UI Passion project
​
Timeline
8 Weeks
RESEARCH
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.
The Opportunity
Create a product that allows you to successfully track your feelings and emotions in order to maintain good mental health and have the opportunity to gain knowledge to understand your problems.
Initial Thought
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 conducted further research.
Background Research
Issues surrounding mental health are reported to be one of the leading causes of illness and disability worldwide. SOURCE
​
​
​
​
​
The pandemic fuelled a 25% increase in 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
1 in 4 people in the UK will experience a mental health disorder each year.
Research Findings
Individuals find it hard to speak about the topic of mental health issues
Mental health disorders are predominantly overlooked or ignored, due to ignorance, the lack of knowledge and the stigma surrounding mental health.
​
Psychological self-care is not easily obtainable
People are unaware of the help that is out there. They may be open to the idea of a therapist but it is too expensive for the average being and not always available. Others find it difficult to talk to others and express their concerns.
​
People have a shortage of time
A large percentage of people 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 to therapy may clash with their busy schedules
Competitor Analysis
To figure out how to augment a new application I compared the features of 5 different mental health apps to see what was lacking from them and where users were struggling.
Competitors
Key Features
Competitor Insights
Competitor apps operated by tracking and monitoring users’ behaviour and provided users with solutions for how they were feeling at that current moment.
Mood fit and mood mission offered some activities or exercises to help assist their users in times of need.
No app provided sufficient information or resources to benefit their users in understanding why they were experiencing a certain emotion.
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.
EMPATHISE
User Interviews
Occupation:
​
10x Employed
4x Student
2x Unemployed
​
​
Gender:
​
12x Females
4x Males
​
​
Age:
​
2x 28yo 3x 27yo
4x 25yo 3x 24yo
3x 23yo 1x 22yo
​
Data collected came from google forms and phone interviews & surveys. I posted the survey into slack groups as well as sharing them with friends/family.
​
Google forms: 16 responses
​
Demographics:
​
​
Phone/Zoom interviews: 4
​
Demographics:
​
​
Occupation:
​
2x Employed
2x Student
​
​
​
Gender:
​
2x Females
2x Males
​
​
Age:
​
1x 36yo 1x 28yo
1x 25yo 1x 19yo
​
​
User Interviews: Key Insights
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 besides 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 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 cant 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.’
User Persona
User Journey
To see how a user may react to the flow of an application and how their overall experience
will be I observed any obstacles or pain points they encountered when using a mental health application already on the market.
​
USER JOURNEY MAP: Finding a mental health app to help improve and promote better mental well-being
​
User Journey Insights
IDEATION
Features
Prioritisation
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.
Sketching Ideas
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.
Wants constant reminders to journal.
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.'
Feedback
-
Users wanted the 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 for what you were looking for.
​
-
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.
DESIGNING + TESTING
MID-FID
WIREFRAMES
I created mid-fidelity wireframes to see how my app's interface would look and what features should be added.
​
I tested the wireframes with users to see which design they felt was more useable.
The initial onboarding to the application will give you a chance to log your mood and enter a diary entry.
Dashboard has a for-you daily resource section to cater to individuals specifically.
Tools tab consists of a search bar so you can easily search up what resource you would like, and resource recommendations, if you are unsure about what you are looking for and are seeking inspiration and filters, you can narrow down your search to look for specific resources and save time.
Your journal is located on your profile dashboard. It includes the history of your moods and diary entries organised using dates and times for easy navigation.
Feedback & Improvements
-
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.
Final UI:
The Solution
​
FEATURE 1
Mood Logging & For You Page.
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.
FEATURE 2
Journalling.
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.
FEATURE 3
Tools & Resources.
1. Pick from a standard resource or search in the search bar for what you are looking for specifically.
​
2. Search what you need help with.
​
3. You are able to filter out what type of resource you would like ie: videos.
​
4. You will then only be shown resources which are in video format.
Testing
-
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.
Final Iterations
FEATURE 4
Social Feed.
'Your feed' a social networking blog page where you can interact with other users, like, help each other and share content online.
Takeaways
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 more user testing.
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. :)
​