Helping users heal through humour and nostalgia — UX Case Study
Designing a mental health companion for people who would not usually use one
The Project
Duration: 13 days
Methods: JBTD Interviews, Surveys, Wireframing, Empathy Map, Ideation, Prototyping, UI Design
Tools: Figma
Intro
With the advancements and growing accessibility of technology, the health and wellness industry has been experiencing considerable changes. Today’s consumers are embracing wearable technologies and other activity-tracking products more than ever before. Healthcare-related mobile apps are becoming popular at an astonishing speed, as indicated by the fact that 69% of US smartphone owners track at least one health indicator using them.
The Challenge
The Wellness Institute is very excited to explore how they can leverage technology to help people live healthier lives.
The institute defines wellness as an active process through which people try to improve or maintain their well-being. But they noticed that despite the vast availability of personal metrics and health apps, people continue to struggle.
Thus, the client set up a call-for-projects for an application that would enable members to track health metrics. They did not know, however, what issue to tackle first. This meant that designers could research, develop and pitch solutions with an open subject that would be developed into the first digital tool that the institute would offer as well as being the foundation of their Design System.
As we were free to tackle the health issue of our choice, my team reflected on what people would need as a companion in 2021 and the subject of mental health arose almost immediately.
Research
Job To Be Done Interviews
So as best to understand the problems potential users had, it was important for us to speak to them directly. We chose to undertake Job to Be Done Interviews to best understand how people deal with a mental health crisis or episode when it happens. Our main axis of questioning was:
- How do people speak about their mental health? What vocabulary do they use? What tones and register do they use to express nuance?
- What is their first instinct or action when they are struggling?
As we were interested in challenging ourselves in terms of UX Copy and add somewhat of a novelty spin on our App Design, we decided to try to create an application for a user that wouldn’t usually want to use a Wellness Application of the sort that are currently on the market. We also wanted users to be able to feel safe while using the app, trusting it enough to give personal information but also somewhat make light of the situation they're in.
During our secondary research, we realised that a lot of people suffering from long-term mental health issues like depression or anxiety are acutely aware not only of the severity of their situation but also of how that situation affects others and the stigma surrounding Mental Health. Studies have shown that people suffering from similar afflictions tend to joke about it together, to be able to process their feelings but also to create a mutual bond with people who share similar experiences.
This led us to want to develop an application that would be somewhat humorous, letting users deal with moments of crisis on their own in a safe but also lighthearted way, all while staying clear of the twee-ness of some mental health applications we studied during Benchmarking at the beginning of the process.
Survey
To have a variety of data, we also decided to publish a Survey. While our User Interviews mainly focused on how people cope with the difficulties of mental illness and how they talk about their situation, we wanted our survey to be specifically about humour applied to mental illness.
Our main goals were to understand what the majority of the surveyed suffered from, to have a sample size overview of the most prevalent illnesses for the demographic we had in mind (18 to 26) but also their opinion and their use of humour in regards to mental health. Finally, we also wanted to try and see if we could understand if users who enjoy making light of their mental health as a means of grounding themselves would gravitate towards what the french call Second Degré if given the choice.
Thanks to the results of the survey, it was clear that the main problem that we had to tackle was anxiety and thus the beginnings of panic or anxiety attacks. May it be the only mental health issue the user was suffering from or if it was combined with other symptoms, 89% of people who answered the survey noted suffering from anxiety-related issues. We discovered that there was an interesting market entry for a Mental Health application that didn’t take itself too seriously. However, since 57.4% of respondents noted that they enjoyed sarcasm with moderation but also half of them noted that mental health jokes were only funny depending on the context, we knew we didn’t have completely free reign in terms of copywriting and that, going forwards, it would be one of the parts of the project that we would need to take most care with.
Thus, we would use these results of the survey to:
- Adapt Copy
- Adapt Features
- Adapt target audience
Empathy Map
To see more clearly into our insights, we downloaded the data from the Survey and our JBTD Interviews thanks to an Empathy Map, the tool which seemed the most appropriate to truly get into the user’s mindsets with a subject like mental health.
We were able to understand their main pain points, which were:
- The feeling of isolation when dealing with mental health, may it be due to not feeling understood, or feeling like one has to deal with these struggles alone so as not to bother others or because they had no one to turn to.
- Not feeling safe in regards to certain healthcare professionals, not being in control when they’re suffering from anxiety or not understanding what was happening to them.
- The lack of a meaningful and/or constructive outlet to alleviate stress and clear their heads to calm down.
In terms of gains, we were able to distinguish four main insights that would help us ideate the project which were:
- Dialogue often helped users feel better. Talking about their issues or simply having conversations about completely different topics with friends online or in real life enabled them to leave the mental space they were in and stop focussing, at least for a moment, on what was happening to them.
- Transitional moments were also important for the users we interviewed. These moments could be simply taking a shower or making a meal which represented a ritual or a break in routine that would help breath new life into their day when they were feeling lethargic or unmotivated.
- Finally, may it be through the survey or our interviews, we found that making light of their situation or making lighthearted jokes about their illness helped people suffering from mental health to reduce the perceived gravity of their problems and decomplex.
UI Benchmarking
Equipped with our UX Insights, we went forth and started concentrating on VENT’s UI. We proceeded to benchmark existing mental health applications on the market such as Headspace, Calm, Daylio, Happify, Mindshift and MY3. We found that, while very practical and adapted in concept, most mental health applications on the market at the moment had a very twee, modern and minimalist design and illustrations in the same vein as the one's Google and Facebook have recently started using. We also Benchmarked some screens on Dribbble.
As we were interested in using this opportunity to explore our mutual interest in nostalgia design, it was at this stage of the project that we started playing with the idea of how we might reassure users through modern nostalgia design. We started playing the idea of concentrating on 1990s web aesthetics. In the 90s, everything was more simple. Fukuyama theorised that the fall of the USSR symbolised the End of History. The penultimate decade of the 20th century would be the endpoint of mankind’s ideological evolution but also the moment where technological advances were opening new doors for innovation, provoking a sort of hopefulness in the collective consciousness.
Ideation
Feature prioritisation
Thanks to a couple of successful ideation sessions including one with another group working on the Wellness Institute Call-for-Projects, we ended up with a lot of features to sift through to finalise our MVP. We were somewhat overzealous with ideating fun and creative features and had started to stray somewhat from the main objective of the application.
We decided to implement two Feature Prioritisation Techniques so that we had the perfect mix of innovation and helpfulness.
Moscow Method
We first decided to implement the Moscow Method as it was important to concentrate on core features that would be helpful to users for the MVP. This enabled us to filter down our list that would be a must-have for our MVP, without definitively setting aside our more ambitious ideas for later versions.
Value & Complexity Quadrant
We approached the second prioritisation method from a Design standpoint. We had to understand what we wanted to create because the concept was cool and what we should create because it would be truly important and of use to the user.
Thus, we were able to find a comfortable middle ground between creativity and practicality which gave us a clear vision of the MVP to start designing and iterating.
Wireflow
Because we were in such a visual mindset, we decided to design a wireflow instead of a lo-fi wireframe and a userflow. This gave a certain tangibility to our application that had only been existing in our brain up until that point. Since the flow was a simple one (creating an account and using the I Feel feature for the first time). A wireflow made that process clear from a practical standpoint but also showed us that we already had a clear idea of what the bones of the application were going to look like.
Mid-Fi
Once we had agreed on our Userflow and polished our Lo-fi Wireflow, we set out and created a stylised Mid-Fidelity Prototype to Test Users. We made the choice of mildly stylising our prototype so we could test the User Experience of the application and see if users understood that the feature we were testing were for moments of crisis, but also to start testing the visual identity of the application and gain insight as the UI of the application was just as important in the Design process as the UX for us at this stage.
The journey we tested users with was our rough draft of the onboarding process, as well as the “I Feel” feature when you open the app that, according to your input, suggests activities to either prompt you to log information into the app for tracking purposes or exercises and games to help centre and/or calm users.
User Testing Results
Thanks to our Mid-Fi User Testing, we were able to collect interesting insight not only on the User Experience but also on our preemptive Interface Design choices that we had started to implement. Users generally enjoyed the overall layout of our mid-fi, calling our Welcome Page and Onboarding process “Calm”. They did however think it would be interesting for the experience to input more personalised information to feel like they’re moulding a companion for them. During the activities, users noted that they would have prefered to have more descriptive information before clicking through. On a purely UI level, we also were able to realise that some of the features were too small as users were squinting or struggling to distinguish important information. Adversely, testers were bothered by the size of the icons that they found too big and made them hesitate over what they were for.
Iterate
Moodboard
We designed this Moodboard to feel witty, reassuring and wistfully futuristic.
Given that our user would use this application to combat an emerging crisis, we wanted the tones to be cool so we opted for a clear and muted light blue gradient as well as a deep purple and light green for highlight colours. In terms of textures, we were particularly interested in the concept of reflections and soft, malleable plastic materials which coincided perfectly with the tech design craze of transparent appliances that was particularly popular in the late 90s and early 2000s. We also wanted to incorporate pop culture references from the period, particularly Gregg Araki movies because his filmography encapsulated the vibe we were going for.
Style Tile
Regarding colours, we were greatly inspired by the dark and light blues from our Moodboard with the accent purple and green and declined them into different gradients that could be used as shadows, tertiary features or interactive elements.
While benchmarking and researching current UI trends, we became interested in glassmorphism which, while complicated in terms of accessibility, inspired us to play with transparent cards or the application’s native icon design.
Finally, in terms of typeface, we chose Druk (which we used to create VENT’s logotype) and RF Dewi to emphasise header or button text with personality, all while keeping a very minimalistic look for our Body Text so our copywriting could bask in the limelight.
Final MVP
After user testing and aesthetic iterations, our final product aligned with the objectives of the call-to-project. It permits users not only to track and log their progress during extended periods of mental health struggles but also offers grounding activities or constructive outlets for frustration or sadness all while helping to combat the isolation that mental illness can sometimes create with the safe anonymous chat feature.
We were also particularly fond of how we were able to reference 90s aesthetics and 2000s UI all while keeping a forward-looking interface.
Retrospective
Challenges
As this was the most ambitious project we had worked on so far, we encountered multiple pain points. The first one was finding the perfect balance between minimal colour tones all while staying readable and accessible. We occasionally struggled with the right balance for opacity and shadows as we had a very specific vision of the UI effect we were trying to achieve. We also particularly struggled with how to keep in mind our Survey insights about the application of humour to mental health. We truly had to work on a tightrope, with on one side an application that was too tame and too similar to the more twee mental health applications we were trying to avoid and on the other side edgy humour simply for the sake of it.
What can be improved
In terms of UI, some elements of the screens could be made larger and more readable, notably the chat functionality. It was a struggle for us to juggle between leaving enough white space for the application to feel airy all while ensuring that the screen didn’t seem bare and was readable.
It would also be of use to improve the onboarding process by adding or changing some questions to personalise the user experience even more without making it very much longer.
What’s next
As this is an MVP, if we were to return to VENT as it is, we would like to try and integrate more of the aesthetic or novelty features to keep building on the application‘s personality even more.
I would also be particularly interested in continuing to work on the UX Copy, which is the aspect that we were able to concentrate on the least due to the time constraints of the project. I’d be very curious about how the application could address the users and how that could change thanks to AI according to what the user logs over an extended period or how the user answers questions.
Thank you for reading!
If you have any feedback, want to collaborate or just want to say hello, let’s get in touch!
