Case Study for HERE Global Relief: User Experience and Mindfulness — A Match Made in Figma
A project undertaken for HERE Global Relief
The Project
Client: HERE Global Relief, Los Angeles, CA
Timeframe: 3 Weeks
Team: Three team members — Amber, Charity, Ed.
Tools: Figma, ProtoPie, Zoom, Google Docs, Slack, Confluence
This client project was undertaken as part of my studies at General Assembly.
When you imagine being at peace, where does your mind take you?
This question is something often asked in meditation sessions to get us into a tranquil mental state and ground ourselves — that’s the beauty of the human mind. Sometimes it may feel like life is in hyper-speed and this can hinder grasping those fleeting moments of calm in real time, but we can always return to that tranquillity by taking a deep breath and allowing our powerful minds to take us there.
For me, it’s the calm quiet of late spring in a serene field of newly sprouted grass, a gentle breeze swaying once-bare trees now filled with vibrant green leaves as the sun beams down through fluffy clouds. The sounds of a nearby stream, rustling leaves and chirping birds fill the atmosphere.
You may have answered differently — we all have our own personal calm. I would love to know what yours is.
The Client
HERE Global Relief is a social enterprise combining science and meditation with a “mission to ease human suffering with digital treatment technologies that help humanity triumph over trauma” [more information here]. In 2018, a free app was released by HERE to provide mindfulness and relaxation exercises to the masses in order to improve mental health and wellbeing on a large scale.
The Brief
HERE has a golden opportunity to roll out the next version of their beta product to over 3000 employees within a public company in the US later in 2022. They have been evolving the mobile product into a desktop experience in order to integrate their products into a corporate wellness program, with a new feature that brings employees together through a collective real-time meditation experience.
The app currently has two exercises developed with neuroscientific research in mind. Incorporating interactions such as staring, pursuits and saccade eye movements, mindful breathing and alternating finger movements that cross the body’s midline, the exercises are designed to stimulate the brain’s “rest and digest” parasympathetic nervous system, induce subconscious activity and aid in cross-hemispheric brain communication.
Our team of three was tasked with creating a handful of completely new interactive meditation exercises to add to HERE’s current offerings, while also ensuring any designs were kept in-line with a new user interface yet to be released. Within three weeks, we needed to conduct extensive research to ensure that our products would be as effective as possible for our users, iterate and develop exercises based on our research and the scientific research HERE had provided, and test the final products. In combination with this, the exercises also had to be scalable and ready to migrate to Flutter.
The client explained that they had over a decade’s worth of aspiration leading to this point and as a team of UXers, we collectively held the last piece of the puzzle to turning their dream into a complete product.
Requirements
HERE had a few stipulations about how the interactive exercises should perform, and what should be included:
- The exercises must incorporate: Breathing, alternating finger gestures, humming, eye movement and staring elements
- Each interactive exercise must include visual breathing cues
- Aesthetic-wise, our client wanted an animation style that is unique to their organisation, preferably incorporating nature themes
- The exercises must include a feedback loop at the end of all exercises
- Include some element of fun — dopamine is an excellent aid to habit-forming, after all.
The interactive exercises were just that — interactive exercises and not games, however elements of gamification would be carefully incorporated to ensure the exercises would be engaging for target users and hold their focus just enough to allow them to detach from their primary stressors and reap the benefits of meditation without causing overstimulation or inducing a stress response from our target users. We were inherently aware that as a team of UX designers and not games designers developing the product, we had agreed our animation capabilities were limited and we would eventually discuss workarounds for portraying these exercises in the final prototypes.
When it came to designating roles for this project, these were an even split and the work was shared due to the small size of our team. The benefit of this was that our initial research and interview phase lasted just three days which left us ample time to develop the products. Team work makes the dream work!
Empathise: Research
After receiving the project brief, our team took a moment to digest the brief and started on setting out a plan of action. We needed to know the innermost thoughts of our interviewees regarding meditation — how can we best deliver the experience to them? What will be effective? How can we cater to a large audience to ensure that everyone benefits from these new exercises?
Interviews
We interviewed twelve participants with an age range of 26–32. The example professions of the interviewees were Project Managers, Sales Managers, Account Managers and Software Engineers.
The questions asked in our interview stage were centred around:
- Stress triggers
- Their personal experiences of “switching off” and their self-soothing methods
- Their recalling of peaceful memories and imagery relating to tranquillity
- Their experience of interactive exercises and games
- How they come together and interact with others
Interview Analysis and Key Findings
From the interviews, we found that the most common cause of stress among participants was work-related issues (deadlines, management-related stress, dealing with difficult colleagues) and something we all empathised with greatly. Next up were personal relationship-related stressors (arguments, misunderstandings, receiving bad news) and lastly a lack of self-care regimen such as lack of sleep or excessive eating and drinking, all of which are commonly seen as coping mechanisms for those experiencing stress.
Looking at the “switching off” methods of our participants, 75% of our participants swayed towards passive and calming activities to self-soothe after a stressful day (think watching TV, “doom scrolling” aimlessly, listening to podcasts and meditating) and 25% of participants preferred stimulating activities such as exercising and engaging in learning.
We also found that users who regularly play video games enjoy the competitive, social and escapism aspect but a negative point of playing games is that they don’t want to lose, or are worried that they will get addicted to playing.
During the interviews, to get an idea of participants’ peaceful core memories we asked “Can you describe a time where you felt completely at peace? Where were you? What were you doing?” — a key insight from this was that the happiest memories were heavily based outdoors and in nature.
Nature was further solidified as the strongest mental image when 100% of users described nature themes (mountains, chirping birds, waves and ambient silence) when asked to visualise “tranquillity” — this is the question I initially asked you at the beginning — did your mental image align with our research?
From these insights, we gathered that:
- We must consider ways to encourage users to associate triggers and feelings of stress with using the HERE app to get into a calm state and create a healthy habit of using meditation to self-soothe.
- The new exercises should reflect the preferences of users with a choice on whether to engage in soothing or mentally stimulating exercises to ensure both sides are catered for.
- The thin line between creating games and incorporating gamification must be taken into careful consideration because it will affect user expectations and overall satisfaction.
- Visuals and sounds of nature should be a key theme among all exercises on the app — for example, in the background and as standalone visuals for users to observe.
User Testing Stage #1 — Original Meditation Exercises
Because HERE already had two existing exercises (albeit exercises that will eventually be replaced with the new ones that we have developed), we tested these on six of the interview participants to see what was currently working, and any areas for improvement that we could implement in the new exercises. Both exercises included the option to select an audio track and different meditation moods, such as “trust”, “calm”, “intuition” and other options to assist users in reaching their meditation goal. The interactions can run responsively or independently, meaning that users can decide if they want to interact with the screen or simply observe.
LEFT: Exercise selection screen. MIDDLE: Breathing orb that expands and contracts, exercise timer in the middle bottom. RIGHT: Shape sorting exercise with “shapes sorted” counter on either side and exercise timer in the middle bottom.
From the current app exercise usability testing, we found that:
- Almost all users found the background music/narration took away from the satisfaction of their overall meditation experience, with some saying it distracted and irritated them. Along with this, users mentioned that the five-second countdown before the exercise starts (with the option to change the audio track) was not long enough for them to interpret the text on screen and make the decision to switch audio tracks which led to confusion and panic
- The visual element of staring/focusing on a shape or interaction was received with positive reactions — users found the shapes and orbs relaxing to watch. Not all users utilised controlling the shapes with their fingers and some found that using fingers to control the orbs detracted from the experience
- Gamification needs to be considered very carefully. In the shape sorting exercise, there are counters for circles and squares that only count when the user has sorted the shapes themselves. This left some users feeling distracted and distressed, although other more competitive users did state that they felt it increased their engagement
- The timers on each exercise and exercise length left some users feeling confused about just how long they were supposed to be doing the exercises for as there was no clear indication prior to starting the exercise
- Users were unsure about the benefits of each exercise despite information relating to the exercises being included on the exercise selection screens, however we observed that most users clicked through this without seeing the context.
With this constructive information noted and taken on board, it was time to look at what HERE’s competitors were doing…
Competitive Analysis
We looked at three competitors (Meditation service Headspace, habit-building Fabulous and the UX-designer developed puzzle video game Monument Valley) to see what they were offering their users, how they engaged with users and if we could see any feature gaps or room for improvement.
We started with Pluses & Deltas to analyse their current offerings. We all downloaded the apps and discussed main features, iconography, colour, sound and motion use as well as “delighters” and other smaller features that enrich the user’s experience. Below are the key takeaways:
Research Conclusions
With the research analysed and taken on board, the following recommendations were carried forward into our Ideation stage:
- Personalised onboarding with user-focused wording is a must to ensure users feel front and centre in the meditation experience — For example, “You’re about to start this [X] minute breathing exercise, [NAME]. It will make you feel [X]. Get settled in and enjoy”. Onboarding and feedback should be minimalistic to avoid overwhelming users.
- Interactions should be kept simple (e.g. Monument Valley) so users feel in control of their experience
- Sounds should be used to create cognitive patterns (e.g. a chime at the end of each exercise period to signify the end of a session)
- Roadmaps and journey maps can help to gamify content without including game elements within the exercise itself
- Tooltips are a useful implementation to inform and educate users on the purpose and benefits of the exercises
Define: Persona and User Journey
To summarise our data and bring the human element back into the room to aid with user empathy, we created a persona.
How Might We…
To consider how to effectively help Jerry, we collaborated on a few “how might we” statements to base our initial ideations on:
- Convey the benefits of each exercise clearly so users never feel lost or confused at any point?
- Assist users in utilising meditative practices to increase their mental wellbeing and mindfulness?
- Find the balance between calm and stimulating self-soothing techniques?
- Give users control of how they want to relax without information overload?
- Track whether users feel a difference in focus and mental wellbeing after using the app?
Problem Statement
We iterated on a problem statement in what I like to call a “frankenstatement” — we each came up with individual ideas and took the most relevant information from each to end up with a concise sentence to sum up the problem we are trying to solve:
Jerry needs a way to reduce stress in his day so that he can improve his focus and mental wellbeing whilst learning new mindfulness habits
Ideation
With the research process concluded (for now), it was time to begin broadly thinking of solutions to the problem. With the Co-Founder and existing UX Designer at HERE, we conducted a Design Studio and came up with over 50 rough sketches. Getting the existing staff involved helped them to observe our process and get hands on with the project which resulted in an incredibly fun and productive session for all. We collectively voted and reduced the number of sketches down to twelve, and then again to leave us with five to take into development.
Low Fidelity sketches — the five that were took forward for development are outlined.
Because some of the exercises had already been explored (expanding orb breathing exercises etc), the client was interested in prioritising the more complex exercises. As this project was centred around giving users a tangible feeling, we felt it was important to move forward into the mid-fidelity stage for testing the motion and timing, which these exercises heavily relied on as part of the meditative experience. Also included was an emoji-based feedback loop for users to log their satisfaction rate after each exercise.
Prototype: Mid-Fidelity
When we took the exercises to the next stage, we started to consider just how to animate these with Figma. This is where the newly introduced feature Smart Animate became a powerful tool for motion design and we absolutely pushed it to the limits, using hidden vector shapes to guide the exercises and using different animation styles to get as close to the perceived motions as possible. At the beginning of each exercise, a brief onboarding screen gave a description of the task and benefits.
Test: Mid-Fidelity
We began usability testing via Zoom with 7 participants in order for us to address the following queries:
- Do users understand the purpose of each task (via onboarding screens) and feel the benefits of each exercise?
- Are users able to navigate and interpret the task without issue?
- Do users feel the benefits from the exercises?
- What do users like about the interactions, and what would they change?
In addition to this qualitative research, we asked users for quantitative feedback in the form of a 1–10 satisfaction questionnaire and implemented the aforementioned feedback loop:
Feedback loop — the concept was that users would expand or contract the emoji with their fingers to switch emojis (IE bigger = more satisfied, smaller = less satisfied)
From the user testing, we made the following findings:
- Onboarding Screens: Use less jargon to ensure that all users understand the benefits of the exercises on tutorial screens. Improve consistency across all onboarding screens.
- Breathing: Refine the breathing pace across the exercises
- Visual Design: Standardise visual design across all exercises to improve HERE’s brand recognition factor and keep things in line with current app aesthetic
- Assets: Remove assets and animations that confuse users (eg: Sand castle in Humming Ripple exercise)
- Feedback Loop: Include a larger range of emotions in the feedback loop. Make the copy on the screen more user-centric. Amend the feedback loop so that all emotions are visible on screen to reduce click rate and improve accessibility (drag interaction could make it difficult for users with limited mobility to select their intended option)
The recommendations were taken forward to the high-fidelity stage of development — below is a User Journey Chart to better articulate the feelings of our users during this phase.
Design System and Assets
Now that the initial testing period was complete, we switched our focus to the design system which was a large aspect of HERE’s goal for ownable, brand-affiliated exercises. HERE’s new UI consists of a sunrise and sunset theme and simple, clean lines. This UI hadn’t been finalised, but colour-scheme wise we received confirmation from the client that we could proceed with the same day/night shift theme.
Art Style
The client provided a mood board at this stage, with Polygon Art, Geometric Art, Vector Art, Cymatics and Laser Light Outlines as design inspirations for my team to base the standardised art style around. From this, we collectively agreed that Polygon or Vector art would likely be the most feasible art style, given the short project length and our abilities to create these assets on Figma.
A section of the client’s mood board with design inspiration
Assets and Colour Palette
Using the provided mood board and current colour palette as inspiration, we created a library of assets and individual nature-themed colour palettes for each exercise with a central magnolia shade to bring consistency across all screens. The magnolia shade was something we had seen in HERE’s own colour palette, within Monument Valley’s design system, and also within some of the reference images from the mood board.
Assets were created using Figma’s Pen Tool to create assets that scale across multiple viewports.
Design System with Assets and Colour Palette
Prototype: High Fidelity
Using the new colour palette, design system and prior research findings, we created our final prototypes using standardised clean lines, single gradients and vector assets. Within three weeks, our team of three had created five scalable, ownable and beautiful exercises, mindfully animated with extensive neuroscientific research in mind.
In regards to adding easy-to-follow tutorials, all humming exercises guide the user with text-based prompts for a few rounds until the user can follow the breathing by following visual cues, such as following the sun, moon or bee. All exercises have the benefits on the start screen.
Humming Bee
Description: As the user hums, the bee flies along a scenic landscape. At the end of each hum, the bee reaches a flower to collect pollen. The exercise repeats as the bee travels along until the bee settles on a final flower.
Interactions: Breathing, staring, eye movement
Humming Ripples
Description: As the user breathes and hums, the sun rises, stopping for a brief pause at the centre peak of movement before gently setting. As the user hums, the moon rises, a droplet falls and a serene rippling occurs on the surface of the water.
Interactions: Breathing, staring, eye movement
Humming Mountain
Description: The user breathes as the sun expands. As the sun contracts, the landscape gradually zooms out and the scene reveals mountains, flowers, a lake and a volcano. When the volcano erupts, the segment is over and the exercise repeats.
Interactions: Breathing, staring, eye movement
Perspective Building
Description: Text guides the user’s breathing moving from left to right. As the exercise progresses, the user’s point of view expands. This continues until the user reaches outer space and can see the earth, the sun and stars and eventually the galaxy.
Interactions: Staring, breathing, saccade eye movement.
Nature Jigsaw
Description: The user holds the device head on and uses both thumbs to twist the shape. When the shape fits into the border outline, the edges click and move inwards in a smooth motion and the shape is illuminated. This repeats with various shapes.
Interactions: Alternating finger gestures crossing the midline
Feedback Loop
Description: A new feedback loop with a more nuanced range of emotions — the user can see each option and select as opposed to expanding/contracting one circle. Improved visibility and accessibility,.
Reflection
Within the short time frame, and given our limited experience in games design (which this would technically fall under), we got an incredible amount of research and design work done, which we are all incredibly proud of.
The brief was to create unique exercises incorporating breathing, alternating finger gestures, humming, eye movement and staring while including visual breathing cues, a unique animation style and fun — and we did just that.
The client’s feedback was overwhelmingly positive. Below is what the Co-Founder had to say about my performance during the project:
Key Learnings
Due to the out-of-the-box aspect of this project and my love of science, digesting the neuroscientific research and continuing this in my free time has given me an insight into how I can implement subtle but effective meditative aspects into the apps I am developing to not only give users a brilliant experience but to also improve their overall mental health. This isn’t just applicable in mindfulness apps and can be implemented across any interactive interface.
Next Steps
The animations have been handed over to HERE’s team for animation artists to complete the exercises and will then go through further testing cycles before being implemented within the app.
If given the opportunity, I would like to develop at least five more exercises incorporating all aspects of mindfulness and meditation in a broader time period.
It has been lovely to have you HERE. Thanks for reading!
