Serenity
Responsive web app design

client

Student project: CareerFoundry

role

UX Designer
UI Designer

team

Team of one

timeline

6 months

In the UK alone, it is now thought that 1 in 6 people experience a mental health issue in any given week.

Mental health has long been an issue which has impacted the daily lives of millions of people. The stigma attached to the subject of mental health is slowly being tackled and, as a result, individuals are beginning to feel more comfortable recognising the impact this can have on their quality of life, and in turn, are now independently seeking solutions to manage and improve their own wellbeing. One such solution individuals have turned to are wellbeing apps, with their popularity soaring during the Covid-19 pandemic.

The problem space

It is estimated that there are now over 350,000 digital health apps available to download. With such a huge number of apps to choose from, it is somewhat surprising that nearly 50% of all downloads within this industry come from only 110 apps.

Furthermore, specifically in relation to mental wellbeing apps, Calm and Headspace control 90% of the market share, leaving thousands of other products fighting over only 10%. With the numbers so heavily skewed it suggests that, though there is a demand for this type of intervention, the majority of apps created are not meeting users needs, wants and/or expectations.

The proposed solution

Serenity, a responsive web app which takes a holistic approach to addressing mental health support needs by offering a number of personalised resources and tools, aimed at empowering individuals in their efforts to achieve and maintain a positive state of mental wellbeing.

Mobile screen highlighting user freedom in selecting different interventions.
Mobile screen highlighting how users can personalise the app to suit their preferences.
Mobile screen displaying motivational elements to engage users.
Mobile screen highlighting self-help resources feature to help users boos their knowledge around mental wellbeing.

How did I get there? My user centred design process

Steps in my user centred design process.

Secondary Research

Acknowledging ‘one size does not fit all’

I started my process by conducting secondary research. A vast number of articles, journals and product sites were reviewed, giving me a deeper understanding of the market space and both the challenges and opportunities which exist within it.  I will use a quote from Cyndi Williams, CEO of Quin, a digital health startup, which I believe eloquently summarises my findings:

Quote mark symbols, representing cited or highlighted text.
The industry needs to put more focus and money into making health-tech apps that people want and need to manage their daily lifestyles and health conditions. The shift in public opinion towards health-tech apps, in light of the pandemic, shows that there is a demand for data-driven smarter tech solutions. By providing the public with this technology, we can better manage our lifestyles independently, require fewer GP and hospital visits and improve our quality of life.
Horizontal line divider.
Cyndi Williams, Quin CEO

COMPETITOR ANALYSIS

Leading wellbeing apps are too exclusive, can be narrow in their support offer and often lack a personalised feel

Equipped with a clearer understanding of the digital health app landscape, I now wanted to focus on particular products, and I started by specifically evaluating apps with high user satisfaction rates. The rationale behind this decision was based on trying to pinpoint what they are doing effectively in order to meet users wants and needs, but also to try and identify where potential gaps may lie in their product offers.

This led me to carrying out a competitor analysis of two leading apps within the industry, Calm and Sanvello.

As one of the apps which has a shared control of 90% of the mental wellbeing app market, it seemed sensible to review Calm, especially as its product offer is to concentrate on providing one form of intervention, this being meditative practices.

Sanvello, on the other hand, offers multiple interventions. Assessing its ability to provide a well-rounded ‘package offer’ struck me as a interesting pathway to look into. Is equal importance placed on each intervention/feature? Do they make sense being offered as a ‘whole? I was keen to dig deeper to find out.

The process involved analysing their key objectives, strategy, and marketing profiles, as well as completing a thorough SWOT and UX analysis.

Collection of pages from competitor analysis
Pages from competitor analysis

I also decided it would be worthwhile reviewing the user experiences of other apps within the market space, and therefore took it upon myself to scrutinise apps including Headspace, Balance, Done, Being and Fabulous, amongst others. Following the completion of this research, I had a firm idea of what these products were doing well, but also of equal importance, ideas on where improvements could be made.

Following the completion of this research, I had a firm idea of what these products were doing well, but also of equal importance, ideas on where improvements could be made.

How could a design solution stand out from the crowd?

Icon of a fingerprint, symbolising personalised service.
Personalised service
Offering tailored interventions and guidance based on individual user input to create a more supportive and engaging user experience.
Padlock icon symbolising security and the closing of feature gaps.
Close the feature gap
Eliminating the common feature disparities found between web apps and their native app counterparts in the market.
Icon of three people representing broader access for a diverse range of users.
Encourage wider access
Promoting inclusivity by providing a higher volume of ‘free’ content, in a wider range of content areas.
Globe icon representing regional customisation and global reach.
Regional customisation
Tailoring the user experience to a UK and European audience.

user surveys

Themes emerge from collected data

Next, I wanted to hear directly from members of the general public, to gather insights into user thoughts and behaviours in relation to wellbeing apps. I decided to use this method, prior to user interviews, as I believed data gathered at this stage could help shape my goals and line of questioning for the interviews to follow.

I was happy for the responses to come from a broad cross section of participants at this point. The thinking here related to the fact that ill mental health impacts a relatively high number of individuals, but also the fact that everyone possesses ‘mental health’.

The viewpoints gathered would be telling and could give me an insight into the different relationships individuals have with their own mental health, the importance they place on it and how they go about maintaining it.

Screenshot of survey questions designed to gather user feedback.
Screenshot from survey

46 survey responses were received in total and it was clear after analysing the data that common themes could be identified in what motivates users to use wellbeing apps. Such factors included:

  • Connecting with others
  • Reaching goals
  • Feeling a sense of achievement
  • Ability to track and review progress
  • Receiving help

Significant takeaways from user surveys

60%
Of survey participants use apps which they describe as being aimed at supporting their wellbeing.
5
The average number of interventions survey participants selected from a list of options when asked what they hoped to see offered on a wellbeing app.
Vector illustrating key factors: 1 - ease of use, 2 - content quality, 3 - cost
Were classified as the top 3 ‘very important’ factors which impact the enjoyment of wellbeing apps by survey participants.
0
The number of survey participants who had heard of Sanvello in the past year.

user interviews

“I'm motivated to use wellbeing apps when I can feel and see the benefits”

With the valuable insights obtained from the surveys, coupled with the knowledge gained from the secondary research and competitor analysis, I outlined 4 interview outcome goals which, if achieved, could positively shape the design of Serenity in the latter phases of the design process:

  1. How do interviewees aim to help themselves in times when they are struggling with their mental health?
  2. What apps and specific features have interviewees utilised to support their wellbeing and how has their experience been using wellbeing apps?
  3. What drives and motivates interviewees to keep using a wellbeing app?
  4. If interviewees could design an app which could meet their needs in relation to supporting their mental health goals, what would it offer?

5 individuals were interviewed, all of whom used digital health apps and, due to their lived experience or profession, also had a clear understanding of mental health and its impact on our daily lives.

In order to make sense of the large volume of qualitative data collected, I turned to affinity mapping to help me organise the feedback, and upon completion, I was able to identify a range of intriguing themes which could be instrumental in completing tasks in the proceeding stages of the project.

Themes identified from user interviews

Question mark icon representing users' need for key personalised insights into their wellbeing progress.

Action alone isn't enough

Users want to gain key personalised insights into how using a wellbeing app is helping them progress and achieve their wellbeing goals, especially around questions which answer why, what, how and when.
Medal icon representing the need for user incentives and rewards.

Users need incentives

Users want to be guided, encouraged, motivated, and incentivised when using wellbeing apps; otherwise, they can quickly lose engagement in continued, regular use.
Hands shaking icon symbolising the importance of trust.

Importance of trust

There is significant value placed on the credibility, trustworthiness and ultimately, impact, of professional support and advice during times when users experience difficulties with their mental health.
Icon of different shapes symbolising the freedom to choose from various options.

Freedom to choose

Users often undertake a range of activities in attempts to maintain a positive state of wellbeing and there is not a ‘one size fits all’ option when addressing how to support users mental health needs.

Personas and User Journeys

Hello Serenity users

The full list of insights created was incredibly helpful, but to give my research a human face and a narrative, I decided to create 3 personas.

I felt it was important to create more than one persona based on the knowledge gained from my research, that mental health impacts us all and that users will have different wants and needs when using Serenity, based on their lifestyles, experiences and wellbeing goals.

With the creation of user personas, I was able to draw upon their diverse beliefs, behaviours, and challenges when composing user stories, user journeys and user flows, whilst also instilling empathy into my design process and the design decisions to come.

Completing these tasks also gave me the opportunity to focus in on the type of activities each individual persona may wish to complete within the app and how they may think and feel as they are doing so, factors which would go on to influence my thinking when ideating designs.

Persona, flow diagram and user journey map collection
Persona profile, flow diagram and journey map

problem statement

Plenty of ideas, but focus is required

Spending time exploring the problem space and gathering feedback through user research had uncovered some potential gaps in the market space and importantly, ideas for solutions which could meet the wants and needs of users.

But before diving straight into creating solutions, I drafted a problem statement, to help provide focus as I moved into the design phase:

Individuals interested in maintaining and improving their mental wellbeing need a solution which provides them with a range of tools and resources that work together to help support positive wellbeing, whilst also providing evidence as to the ‘how’ and ‘why’. This approach is needed to help encourage, motivate and incentivise individuals to continue to use the solution, and to help facilitate their desired outcomes.

wireframing

Sketch, sketch and sketch some more

With the structure of Serenity outlined, I could now use the user flows and sitemap as a guide to start sketching the individual screens which would allow my personas to achieve their goals within the app. I decided to focus on 4 key features:

  1. Onboarding
  2. Knowledge Base
  3. Meditate
  4. Habits

First, I created low fidelity wireframes, using pencil and paper. This allowed me to focus on the core structure and navigation of Serenity, rather than specific design decisions, such as colour palettes and typography, whilst also brainstorming some different design styles and patterns.

Comfortable taking my sketches forward, and after consultation with both my Tutor and Mentor, I created a mid-fidelity prototype, ready for user testing.

Low fidelity wireframes
Selection of low fidelity wireframes

user testing

Learning from would-be Serenity users

I recruited 6 individuals for moderated usability tests, specifically targeting individuals based on their unique characteristics. As well as ensuring diversity was reflected in the test group, in terms of age, gender and ethnicity, I also wanted to carry out testing with individuals who have, or currently use, wellbeing apps, and who may have had experience of suffering from ill mental health.

As part of the test, I asked each participant to attempt to complete 5 tasks within the app, thinking aloud as they moved through the screens. An opportunity to offer general feedback was also offered at the end of the testing.

The data gathered from the tests was organised through an affinity mapping process, into 4 categories:

  1. Errors
  2. Observations
  3. Negative quotes
  4. Positive quotes

Following this exercise, themes and patterns within the feedback could be identified, and using the Rainbow Spreadsheet technique, data was organised to provide a visual overview of the frequency and severity of particular usability issues. This focused my attention on where design revisions should be made.

Screenshot of errors collected from usability test sessions, displayed in a rainbow spreadsheet format.
Errors collected from usability test sessions in Rainbow Spreadsheet

Design iteration

Enhancing the design through user feedback

Drawing from the insightful feedback and data acquired during the usability test sessions, I set about on refining the design with each adjustment being tailored to bring the design closer to meeting the preferences of Serenity users.

Home Dashboard

Before and after design of the home dashboard with annotations showing changes made based on usability test feedback.
Home Dashboard designs before and after usability test sessions

The aim for the home dashboard, from the very first sketch, had been to provide users with a clean, uncluttered screen, which clearly presents the feature options available. Prior to user testing, I spent considerable time analysing the feedback gathered during initial user surveys and interviews to see what other themes and features could potentially be included on this page whilst still providing a home dashboard that does not overwhelm.

This led to the inclusion of the positive affirmation and ‘progress and achievement’ panels. Adding these spaces I hoped could offer early support, motivation and inspiration. Of equal importance, however, was the fact these were also key themes and features which came out of the user research.

Results from card sorting and usability testing also led to the decision to simplify feature titles, as users highlighted a degree of confusion and ambiguity with these.

Meditation

Before and after designs of screens from the meditation feature with annotations showing improvements based on usability test feedback.
Before and after designs of the process introducing meditation facilitators to users

The Meditation feature evolved with each iteration of a new wireframe. Design patterns, spacing, usability heuristics and accessibility considerations, coupled with the feedback from users, have all led to its current high fidelity design.

Changes included:

  • Prominent filter options via a horizontal scroller at the top of the page.
  • The combination of lists and horizontal scrollers to access content.
  • Time labels displayed in a different font colour.
  • Ability to track and review progress.

All these modifications were made with the aim of providing an easier and smoother experience for users when navigating the page.

A major usability problem highlighted on the facilitator selection screen during testing, led to the removal of the ‘play’ icon and a new process for users who wish to ‘meet’ the facilitators before proceeding with their meditation.

Habits

Before and after design of the habits feature screen showing improvements based on usability test feedback (screenshot 1).
Before and after designs of the Habits creation screen
Before and after design of the habits feature form with annotations highlighting changes based on usability test feedback (screenshot 2).
Before and after designs of the Habits insights dashboard

The Habits task flow presented more complexities, and with it, more potential pain points for users, than the other flows designed. Feedback obtained during user testing was extremely valuable in aiming to design a simple habit creation process, as well as an easy to read and insightful stats screen.

Testing with users provided clear evidence that users wanted, and needed, clearer headings to allow for the input of correct information. An auto-generated ‘habit description’ panel was added to provide direct feedback to users on their input, and with the design of the high fidelity wireframes, attempts were made to ‘de-clutter’ the screen as much as possible.

The format of how specific statistics were shown in the ‘stats dashboard’ was also simplified, after users encountered friction when attempting to extract meaningful insights from the graphs presented in the mockups during testing.

concluson

“I enjoyed using the app and would definitely use it again”

Working on this project was extremely rewarding, and the overall process was certainly eye-opening in highlighting the power of a user-centred design approach. By focusing on user research and empathy, I was able to gain a deep understanding of the user's needs and pain points, which helped inform the design of the app. The prototyping and testing phases allowed me to iterate on the design based on user feedback, resulting in a prototype that was well-received by users.

Hearing potential users of Serenity offer praise for the approach and methods used to try and tackle this important societal issue shows that there is a need and want for this type of solution, and I would be excited to see how it would be received by the wider public if fully developed.

Next steps

Building out the rest of the app and testing its functionality with users would be of the utmost importance. Also as part of my course, I was tasked with primarily focusing on the design for mobile, but as a web responsive app, I would be looking to invest more time in completing parts of the design process, notably wireframing and testing, with a focus on larger devices.

An area of the app I believe could be enhanced is linked to providing users with more meaningful incentives. Tracking statistics, supportive statements and, within the habits feature, specific incentives, were built in, but digging deeper into this theme I believe could go a long way toward improving the overall experience.

The features included in the current version of Serenity are based on a combination of requirements outlined by my course provider and user needs. I would be interested to see which features would prove more popular and beneficial to users. Based on this, I would then be looking at what other design solutions could be applied to the app to further the holistic approach to supporting individuals’ mental health support needs, possibly in place of features which are not meeting the needs of users.

Reflections and lessons learnt

With this being my first UX project, I have taken away so much by working as the sole designer on Serenity and navigating through the design process independently. Some reflections and key learnings I takeaway with me are:

Working with freedom vs with constraints

As a student project, I was able to work freely and ideate based on an unlimited budget and with a fairly relaxed deadline. What a dream. In reality, it would be interesting to see how a similar product would take shape whilst working with constraints and business expectations. This is something I’m looking forward to facing and I’m sure my previous experience in project and programme management, as well as completing this project, will be helpful when navigating this process.

As a student project, I was able to work freely and ideate based on an unlimited budget and with a fairly relaxed deadline. What a dream. In reality, it would be interesting to see how a similar product would take shape whilst working with constraints and business expectations. This is something I’m looking forward to facing and I’m sure my previous experience in project and programme management, as well as completing this project, will be helpful when navigating this process.

Testing is key

As this was a time-limited project, also with limited resources, the time given to user testing was restricted. However, I was able to gain so much interesting and useful feedback by carrying out this task, that I believe having more time to test further iterations of prototypes could only enhance the final product.

It’s ok to make mistakes

The process taught me that it is very unlikely that something created in its first iteration will be perfect, even if we may think so ourselves! Taking a step back from the design and encouraging the views of others, especially the users of our products, was a powerful, and ultimately, rewarding experience.