UX Case Study
A mental health and wellness mobile app
This project was my main case study from my UX Immersion course at CareerFoundry. It was my first experience of conducting a UX design project and lead me through the whole design process. I learnt the basics of UX design principles in great detail and was able to put them into practice.
1 in 6 adults experienced a ‘common mental disorder’ such as depression or anxiety in the past week - NuffieldTrust
Since the COVID-19 pandemic first hit in 2020, our daily lives were shaken and we collectively formed new perspectives on life priorities. The fear and tragedies combined with the stresses of working from home has wreaked havoc on many peoples mental health sending them down a steep slope that is difficult to recover from. For others, this disruption was a wake up call and opportunity to check in with themselves and open the door to mental health practices.
Once deemed as taboo, 'mental health' has now become a priority for most.
Despite the looming statistics, people are becoming more comfortable engaging in conversations and seeking help regarding mental health issues. People are more aware of terminology and are actively seeking out resources and services to better themselves and others.
Self-care is essential.
Especially in younger generations, there is a huge social emphasis on 'self-care' and 'self-love'. People are starting to treat their mental health like their physical health and are taking the time to create routines and practices to help them feel their best.
Despite being a fairly popular concept, many people struggle with getting started with their self-care routines and knowing where to look. This is often as a result of the viscous cycle many people experiencing mental health issues face; the more difficult a task, the less likely a person is going to feel able to start it, let alone be successful in completing.
People need an easy and accessible way to manage their mental health, access resources, and build healthy mindsets through routine.
To create Olive, a mobile app designed to help users by providing the tools and resources to manage their mental health however they feel comfortable, all from one place.
It provides a soothing environment for users to track their emotions, express their thoughts, and find the resources and information they need with minimal hassle.
First I needed to scope out the market of mental health wellness apps by analysing competitors.
An in depth analysis of two competitor apps was performed; including objectives, strategies, market profile, as well as a SWOT analysis. By analysing apps that aim to solve similar problems, I can target any existing points of friction for users and thus design a better suited app for the market.
Using this information I was able to define the business requirements of Olive. This set the direction for the project
In order to really understand the user’s needs when it comes to a mental health app I conducted user research using two methods to obtain a well-rounded scope. The questions and participants were chosen in alignment with the business requirements outlined above.
The data from the surveys was collected and analysed using the Google Forms software.
This way, I was able to quantify any trends and insights to provide a solid understanding of the general consensus surrounding mental health practices.
It was found that:
The data from the survey and interviews were analysed in detail using affinity maps.
Statements and quotes were extracted from individual data sets which were then categorized under collective themes to expose key insights. In total I created six themes to sort the data with each colour representing an individual data set.
From these maps, the key insights were picked out:
From the research insights I was able to pinpoint user goals and gather information needed to create user personas.
User personas are great at personifying the project goals which makes it much easier to adhere to user-centred design principles throughout the project.
Based on the user research and subsequent user personas, I was able to confirm the core features for Olive.
The research insights highlighted a lot of information regarding the key demographics desires and requirements for a mental health app, hence the core features of Olive were designed in the hopes of solving these.
I then created the following journey maps to better visualize the thought processes the personas will go through in order to complete tasks in the application.
Another way to visualize the users journey through the app is via user flows; this way I can define each step the user requires in order to complete a task. These flows are extremely useful for the information architecture of the app.
User flows were created for each core function of the app in order to plan site structure.
With the user flows mapped out, I was then able to visualize the information architecture and create an initial site map for Olive. The sitemap was constructed with Olive's four main features in mind plus the standard settings area; thus 5 main subsections were mapped from the dashboard.
.png)
This initial site map needed to be tested to justify the information architecture so I conducted a card sort to see how users interpreted phrases and labels.
I chose an open-card sort because I wanted the user to categorise freely to create their most intuitive structures. This method was used to test the logic of the site map architecture and see how people associate the terms and functions of the app.
The results were analysed and here you can see the similarity matrix. There seemed to be four distinct groups identified by the participants. However, there were some cards that did not seem to fit into these categories or were placed into an unidentified category.
With these results in mind, the initial sitemap was revised to create a more intuitive architecture for the user.
The main differences being that the ‘Self-reflection' function is now a subsection of ‘Journal’ and the addition of two subsections; 'Profile' and 'Mood Insights'.
With the revised sitemap and core functions in mind, low fidelity wireframes were developed to map out screens
A thick marker pen and paper was used in order to limit the amount of detail and keep this initial wireframing process efficient.
The dashboard screen was the most important screen as it is the first screen that the user sees and will navigate from there so it was designed first; from here the user has direct access to other all sections of the app.
The navigation bar was another feature to focus on which drew inspiration from many other apps' flat navigation style. This style was chosen so that the user has quick and easy movement through the app and the menu is present on most screens.
The sketches were then developed into mid-fidelity wireframes using Figma.
The mid fidelity prototypes look much neater compared to the low fidelity ones and contain a little more detail. This enabled me to refine the navigation and architecture of the app to create a logical flow for the user.
.png)
The mid fidelity wireframes were then formed into an interactive prototype to be tested with users.
Before going any further with the designs, I conducted some usability tests in order to observe how well the app measured up to the users’ expectations.
In order to ensure thorough and smooth testing sessions; a test plan and script were created.
The feedback from the testing was recorded and analysed using the 'Rainbow Spreadsheet' technique. This way we can add a quantitative aspect to the qualitative data.
The sessions were first analysed using affinity maps which were then cross examined and compiled into the rainbow spreadsheet. Each colour represents a different participant. The errors were scored in terms of severity using the metrics outlined in the test plan; the higher the error score and total, the more severe the issue was considered.
The usability testing revealed that the prototype was well-received as all users were able to complete all tasks; however, it did expose some flaws in app architecture, especially surrounding the mood log feature.
The findings from the usability tests were taken on board and used to revise the prototype. As highlighted, the mood log feature seemed to be a pain point for most users and needed serious revision.
The overall function and structure of the ‘mood log’ was redesigned as seen here.
.png)
Previously, the users would follow a very simple process of selecting their emotions and activities from an existing library with the option to customize them and add any details to their day. Users felt that it was not specific enough to track their moods over time - something was missing.
In the revised version the user has the freedom to choose their own labels and rate them quantitatively to provide a more detailed look into their moods over time.
Now with the functions and architecture verified by user feedback, the mid fidelity screens were adapted into a high fidelity prototype featuring colours and graphics to compose the UI.
There were many iterations of the high-fidelity screens as new insights were discovered throughout the process; from peer reviews, operating system guides, and accessibility guidelines, etc.; below you can see the final high-fidelity screens.
I am proud of my first attempt at a UX project and am keen to learn more. It was really fascinating to learn what thought processes go on behind the scenes to produce a web application.
This project took me through the UX fundamentals in great detail.
Olive was my primary project for my 'UX Immersion' course with CareerFoundry; my aim was to learn about the UX design processes and principles which I believe was successful. I gained hands-on experience of each design stage in detail; from user interviews and persona building, to rapid sketching and Figma prototypes.
I do think it is possible to have an app that does it all; mood log, journal, and therapy search; however, for a small scale project like this it may have been too ambitious.
Looking back at the conceptualization of Olive, I feel that I fell into the trap of trying to make everybody happy when in reality its okay to be niche sometimes. I had initially planned to focus around the mood log feature and self-reflection questions, however, I found myself snowballing together more features as they were suggested by potential users. I feel like this mistake eventually cost me in terms of overall user experience; the information architecture and flow could be improved to be cleaner and flatter (fewer clicks to get places).
I am looking forward to learning more about UI design.
During this course I was introduced to some basics of UI design, however, I understand that it is an entirely different discipline to UX. Looking back at the final screens I can see that there is room for improvement and I am eager to learn about the principles and practices behind beautiful interfaces.
I am currently working on a revised version of Olive.
As mentioned, I think there are lots of things I can improve on for Olive. I have since completed a specialization course in UI design and am keen to apply my new knowledge.
Check back soon!
