Design Process
Retrospective
Walkthrough
Prototype
Anxiety Relief & Reassurance Mobile Application
Duration
January - March 2021
Objective
The objective was to create a design solution which users can use at home or out and about to relieve anxiety symptoms within a few minutes. I wanted to create something which was entirely new. The app should act as a comforting sidekick for individuals whose anxiety really acted as a barrier in their daily lives.
Challenge
The main challenge lay in the nature of anxiety itself. There are many different anxiety forms and symptoms - it was therefore in terms of what anxiety form to focus on within a user-focussed context and ensuring that the UX copy is effective in providing relief.
Tools
Figma
Zoom
OptimalSort
UsabilityHub
Lucid.App
By Benjamin Bruton
Overview
Mindknow is a mental health supporting mobile application which provides users with instant relief for their anxiety. The app focuses on breathing techniques as well as using good UX Copy as part of cause and effect mind explanations.
Purpose & Context
I came up with the concept for Mindknow from previous personal experience. I was frustrated with the lack of apps that aim to provide instant anxiety relief at home or on the go. Therefore, I spotted an opportunity gap to create something new, which would be heavily shaped by user-centred design.
Approach: Design Process
This project followed the traditional UX design thinking process within a user-centred design focus. User-Centred Design principles were placed at the forefront of the decision making in justifying design decisions and trade-offs.
- User Interface
- A/B Testing
- Design Principles
Finally, the app was ready to be polished and to be upgraded visually, subject to further A/B testing and visual design principles.
- Competitor Analysis.
SWOT testing of Headspace, Calm and MindShift was carried out to identify gaps.
- User Interviews.
Three participants took part in a round of user interviews over Zoom to provide valid and insightful data.
- User Personas.
- User Journeys
- User Flows
Using gathered data, user-personas were created to act as a real users to justify design decisions. User journeys and flows were also created.
- Sitemaps + Iteration
Previous information was brought to life, and the app's skeleton started to take shape through information architecture.
- Wireframing
- Prototyping
The app's skeleton started to move through wireframing and prototyping with pen and paper - and Figma.
- Usability Testing x2
Two rounds of usability testing took place involving 6 participants. Further user-based iterations were made.
1. Understand - Competitor Analysis
Where does any great project kick off? Of course - Competitor Analysis! Competitor analysis of Mindshift, Headspace and Calm apps was carried out via SWOT analysis. This is an effective method is analysing strengths, weaknesses, opportunities and threats.
Key Finding 1
Breathing techniques are an effective tool for easing the mind quickly. Long content does not do this effectively.
Key Finding 2
There is a gap to emphasise the importance of the mind/body relationship with breathing and anxiety.
Key Finding 3
Simple, guided content which does not overload the user is the most effective in avoiding "analysis paralysis".
Key Finding 4
Simple and emotionally positive UI contributes to a great overall user experience.
Click to expand
2. Observe - User Interviews
Using Zoom, three user interviews were carried out to generate valid data. To gain a more precise insight into anxiety experiences, three participants who have experienced heightened anxiety in recent months were selected for the exercise. Their participation was of course kept anonymous.
The answers were then sorted via affinity mapping to spot patterns and trends. These would determine the key themes which would encompass the mobile application.
Key Themes
1. Education
2. Distraction/Coping
3. Anxiety Symptoms
4. Sense of Communality
5. Anxiety Causes
6. Usage of Existing Apps
7. App Personalisation
8. Breathing for Relief
Click to expand
Education
Participants were generally unaware of the cause/effect explanations within the brain, but claimed that knowing so would help their anxiety management.
Distraction/Coping
Participants generally grab their phone while anxious. One user noted that they don't experience anxiety while distracted.
Anxiety Symptoms
Anxiety symptoms were both mental and physical. Mental symptoms included emotional instability and negative thought loops. Physical symptoms included physical instability.
Communality
Many participants noted that they feel reassurance knowing that they are not alone with their anxiety experiences, and that it often alleviated symptoms.
Anxiety Causes
Overthinking seemed to be the overarching cause of the users' anxieties. Social anxiety was another key theme, as was health anxiety.
Existing Apps
All participants used existing apps infrequently. Meditation was proven to be useful - but nowhere near instant enough to make a difference.
Personalisation
All participants were motivated to return to personalised apps. Good apps should also tailor to individual anxiety experiences. Too much choice should also be avoided.
Breathing
No participants were aware of the impact of breathing on their anxiety. All users had used meditation, but it hadn't quite worked the trick in providing instant relief.
3. POV - User Personas
Using the data gathered so far, user personas were created to organise the data in a more concrete, user-centred way. These individuals were those who MindKnow would be designed for, and would play an integral part in ensuring the design remains strong to the principles of User-centred design.
Think of these user persona cards as fact files, each detailing the personalities, motivations and frustrations of potential MindKnow users. Introducing: Lucy Hoover, Jacob Chepston and Erika Bortholm!
Click to expand
Having laid out user motivations, goals and frustrations, the path to creating user journeys became much clearer.
In order to complete certain functions in line with the personas' character traits and situational context, user journeys mapped out the stages needed to reach this goal, determining the emotional impact of the user experience could be analysed clearly on a step-by-step basis.
Not only did this help identify potential pain points, but it also demonstrated where steps could be minimised to allow users to reach their goal more quickly.
Click to expand
User flows in particular allowed the steps within the application to tangibly take shape.
The steps from the user journeys were analysed, prioritised and shaved to facilitate the smoothest process in allowing users to gain relief - the users' success criteria. They are as follows:
Lucy Hoover: Panic Attack Symptoms Alleviated
Jacob Chepston: Gains Relief Through Community
Erika Bortholm: Gains Relief Through Explanation
Click to expand
4. Ideate - Information Architecture
Now - things were starting to take shape. After having identified flows and journeys within MindKnow, it was time to lay out the general foundations of the app itself. An initial Sitemap was drafted.
To maintain the project's user-centred design focus, a tree testing exercise as well as two card sorting exercises, both open and closed, were conducted. The users were put at the forefront and completed tasks as prompted.
The key findings from each testing session were as follows:
Tree Testing
14% of participants selected the instant anxiety relief option, despite having the option to select "relief now". Therefore, emphasis would need to be placed on the copy.
Participants found it the easiest to select an education pack with a success rate of 71%.
Open Card Sorting
Only half of participants actually managed to complete this exercise.
The results gathered were determined to not be reliable enough to make appropriate information architecture changes. A closed card sorting exercise would need to be carried out with clearer context.
Considering the quantitative data gathered from the exercise, I was able to ideate a new-and-improved sitemap on that would make up the new skeleton of MindKnow. The result of which can be seen below!
Closed Card Sorting
Participants largely grouped the "why/what" explanation packs under education.
This card sorting round would suggest that the community feature should be more interactive in nature - users should have the option to connect with others.
Over 60% of participants sorted “typical symptoms” under explanations.
However, I felt that the exercise couldn't show the contextual nature of the onboarding. Therefore, I decided to keep "typical symptoms" under "profile".
5. Prototype - Wireframing & Prototyping
The foundations of MindKnow had been laid. What was missing now was the house which rests on top. Wireframing based on the previous created user flows were created, starting with simple sharpie and paper, to high-fidelity wireframing and prototyping with Figma.
As was the case with WaterGo, the high-fidelity wireframes were by no means the final version. They were to be subjected to a few rounds of usabilty testing. But more on that soon.
Onboarding: Entry Point
Low-Fidelity
Mid-Fidelity
High-Fidelity
Onboarding: Success Criteria
Low-Fidelity
Mid-Fidelity
High-Fidelity
6. Test - Usability Testing
Round 1
After having created prototypes by connecting wireframes together with prototyping interactions using Figma, it was time to put it to the test. Five participants took part in an initial round of usability testing.
They were tasked with completing exercises which our user-personas would encounter. The issues gathered were organised with affinity mapping, and laid out in a rainbow spreadsheet to assess issue severity.
Click to expand
Key Finding & Change 1
KF: No participants understood the three-tired bubble format for the breathing exercise - rendering it obsolete.
C: Single bubble & copy was included - subject to another round of testing.
Before
After
Key Finding & Change 2
KF: Participants preferred an anonymous forum-based approach to connecting with other like-minded individuals rather than a chat function.
C: An anonymous forum section was created and added to the community section.
Before
After
Key Finding & Change 3
KF: The button classifications and some copy sections were not personal enough. Generally though, participants commented on the good use of copy, particular with explanations.
C: Classifications made more personal
Before
After
Round 2
The first round of usability testing demonstrated that all participants enjoyed the copy style of the explanations, and that the application was relatively easy to navigate.
However, a second round of usability testing was carried out with a newly iterated breathing bubble-format for the onboarding - seeing as the previous round left them feeling deflated. These results were again organised with affinity mapping and a rainbow spreadsheet.
Click to expand
Key Finding & Change 1
KF: Three participants would have continued the breathing had they not been given the choice to stop.
C: The "I'm done" option after round 1 was removed - round 2 is mandatory.
Key Finding & Change 2
KF: Two participants asked whether they should breathe through the mouth or the nose.
C: A visual animated guide was created to show users how to breathe throughout the exercise.
Key Finding & Change 3
KF: One participant noted that the exercise is also beneficial in a non-panic attack context.
C: A note detailing when to use the breathing was added.
New Wireframe
New Wireframe
New Wireframe
7. Refine - User Interface Design
The foundations had been laid, the house had been built, and some appliances had been installed. Now it was time to redecorate, add a lick of paint and buy some complementary furniture in the form of great UI Design.
33%
22%
44%
(Out of 27 participants)
A/B Preference Testing with UsabilityHub was an extremely efficient and effective way in allowing participants to select their favourite background design in a "mental relief" context.
Each UI theme had rationale for testing selection. Firstly, all designs follow a blue theme, as one wireframe contains a mountainous scene.
Studies suggest that blue has a calming effect. It is also associated with intellect.
A mountainous, "icy" background was selected as relaxing scenes use the Gestalt Law of Closure to grant the page a greater sense of calm.
Key Takeaway & Decision 1
KT: The plain theme helped information to stand out better than the icy background.
D: Pages with explanations + key information were to carry the plain, light blue theme.
Key Takeaway & Decision 2
KT: The icy background theme looked the most pleasing - but was noted to be distracting.
D: A white, blurry shade was added to pages with this background.
Key Takeaway & Decision 3
KT: The results of the A/B testing were close. The icy background didn't win by a majority.
D: The colour theme for MindKnow will depend on screen content.
Visual Design Principles were also applied onto the existing design to improve the app's User Interface. This included additional Gestalt Design Laws and Principles of Design. For example:
Before
Gestalt: Reification
The icy background image adds closure by giving associations of calm and tranquility, without the need for copy.
Gestalt: Proximity
Elements as part of the same category are grouped together using a background box.
After
Gestalt: Unity
These elements were made to be less striking and incorporated under the same theme.
Retrospective
What Went Particularly Well?
UX Writing
The UX copies ultimately proved to be the most successful part of the project. This was particularly the case when it came to the anxiety explanation sections. While users noted certain issues during usability testing, they all concentrated on the "what is social anxiety?" section for a few minutes at a time.
This indicates that the UX copy was being understood by the participants as intended. Moreover, the participants all provided feedback in that the copy was easy to understand - the personal copy style allowed the success criteria to be met. Some even noted that they would reference the section in the future to help them manage their own social anxieties.
The summary copy section, not just from the explanation sections, but from the breathing exercise too, also allowed participants to understand cause and effect explanations.
- Skills: UX Writing, Usability Testing, User Interviews
- Process: Implementing take-aways from user interviews and assessing effectiveness with usability testing.
Click to view UX copies within the prototype
What Went Particularly Well?
User Interface Design
The process of dressing up and polishing the app was rather straight forward. Visual design and Gestalt principles were of course implemented to even out visual flaws, but less work was required than expected.
I credit this down to the wireframe upgrade from mid-fidelity to high-fidelity. As I have previous experience with Figma, I was able to relay my design system knowledge to MindKnow's visual design.
For example, I had already selected a relevant colour scheme for the mobile application as well as usage of icons and images. The rest of the design was subject to polishing with A/B preference testing as well as general comments from usability testing.
- Skills: User Interface Design, Wireframing, Figma, A/B Testing, Usability Testing
- Process: Mid-fidelity wireframes were upgraded to high-fidelity wireframes using previous Figma knowledge. Usability testing also flushed out the relationship of visual design with achieving user tasks. A/B testing was used to enhance the UI.
What Could Be Improved?
Card Sorting Exercises
I carried out three forms of analysis to align the information architecture with the principles of user-centred design - tree testing, open card sorting and closed card sorting.
However, only half of the participants managed to complete the open card sorting exercise. As so many had abandoned the exercise, I decided to conduct a closed card sorting exercise in its place with more understandable context.
This had a higher completion rate and more consistent results.
- Skills Developed: Card Sorting, Tree Testing, Information Architecture
- Process: A closed card sorting exercise with greater context about the app was created to counter the disappointing open card sorting round - and yielded more consistent results.
What Didn't Go Well?
Initial Breathing Bubble Format
I originally created a three-tiered bubble format for the panic managing breathing exercise, focussing on the most efficient way of breathing: Stomach, chest, head.
However, none of my participants were able to follow the structure during usability testing. They all noted it to be too hard to follow and to learn.
Skills Developed: Wireframing & Protptyping, Usability Testing
How Was This Resolved?
New Breathing Bubble Format
I created a new single breathing bubble theme with feedback taken onboard from the first round of usability testing. The wireframes also included the amount of deep breaths the participant would take: 40. These were subjected to a second usability testing round.
As a result, all participants followed the exercise as intended. Two participants even went as far as saying that they will use this breathing technique to manage their own anxieties in the future.
Process: Implemeneted a second usabilty testing round to rectify a major usability issue..
How did the original objective compare with the results?
The original idea of MindKnow was to create something which can be used to quickly relieve anxiety on the go. The topic of reassurance was the foundation on which the rest of the project lay.
During the design process, the app's potential for kickstarting positive cognitive thinking processes became apparent. Therefore, the app in its current form also focuses on long-term strategies in shifting anxieties - by allowing users to learn about cause and effect explanations.
I am confident that MindKnow has ticked the boxes in what it set out to achieve. I am also pleasantly reassured in how good copy is paramount in allowing the app to be understood and create emotionally positive experiences.
What would I plan to improve on in the second iteration?
I am already in the process of conceptualising a breathing exercise that can be carried out on the go. The current heavy breathing exercise, which is effective in shifting anxiety sensations, should not be used while on the go.
This form of breathing is called "Buteyoko", which focuses on extended exhalation periods during breathing.
I am planning on integrating this exercise into the "relief" sections as well as the onboarding. The breathing will also contain a scientific explanation into "what just happened".
Multiple rounds of usability testing will also take place to assess its effective, as was done so previously during the project.