Case study: Wellness app | Alriight, your personal chill kit.

All your favourite tools and resources in one place.

Hi there! Another week, another project. This time we dive into the fascinating and complex world of wellness, which at first glance may sound like it’s all about relaxation and enjoyment, but those who know more about this area will know that it takes a lot of work and effort. For this project, the main goal was to develop the UX design process while also applying key UI skills. The objective of this project was to create and design an app and a Landing Page. As MVP, our app shouldn’t try to solve all the wellness issues people have but focus on just one aspect of wellness that we consider important, based on the findings of our User Research. This also shouldn’t be a meditation app, because currently there are too many of them available in the market.

The project length was two weeks (the fifth and sixth) during the UX/UI Ironhack Bootcamp, and this time I had the great pleasure of working with Aline de Oliveira Barros, Iona Keeley, and Lamiya Adilgizi. We all participate together in the different stages of this project, but to summarize, my role in this project was UX Research, UX strategy, UX Design, and UI Design. As I said before, this project goal was to design a Native iOS or Android App and a Landing Page. And the challenge was to design with a focus on just one aspect of wellness that we consider significant, based on the findings of our User Research.

Design Process

Image source: inkbotdesign.com

Stage 1 — Empathise & Discover

So, to begin with, we started to define our field of study or, in this case, which area of Wellness we would like to focus on. We thought, discussed between us and with psychologists, and finally decided to focus our effort on developing an app for adults suffering from Generalized Anxiety Disorder.

Generalized anxiety disorder (GAD) is a mental and behavioural disorder, specifically an anxiety disorder characterized by excessive, uncontrollable and often irrational worry about events or activities. Worry often interferes with daily functioning, and sufferers are often overly concerned about everyday matters such as health, finances, death, family, relationship concerns, or work difficulties. Symptoms may include excessive worry, restlessness, trouble sleeping, exhaustion, irritability, sweating, and trembling.

After defining our main topic, we set our Roadmap, which helped us to plan in a more holistic way to include non-financial goals and drive towards more sustainable development. This way, we defined that during the first week, we would focus our efforts on the UX part, and during the second week, we would develop the UI design. Then, we began the Empathy stage of the Design Thinking process by defining our UX Strategy Blueprint, so that we can share a product vision while providing value to our users in a meaningful way, minimizing the risk of making an app that helps no one. This is a creative exercise to develop and sustain a competitive advantage.

Quantitative and Qualitative User research.

After setting the UX Strategy Blueprint, and having our goals better defined, we started to develop our Lean Survey Canvas. We did this to set the questions for the surveys and interviews with people suffering from this disorder, and psychologists. These people can help us identify some interesting and unknown aspects about this condition suffered for so many, especially during the Covid-19 Pandemic.

Qualitative research

Our main goal while using this tool was to learn more about how often do our Interviewees feel anxiety, to identify some primary symptoms, what do they do to cope when having an anxiety episode, what do they do to prevent anxious feelings from arising, to get to know if they use any app or online tool to deal with this disorder, and what do they like/dislike from those digital tools.

We were able to interview 4 people who suffer from this syndrome, as well as a therapist, from whom the following Insights were gathered:

Interviews Insights: Regarding the symptomatology and coping methods, we got answers like “I even could not realize that I might have anxiety”, and “I don’t think talking to other people will help me”. From the digital-tool questions, we found some interesting and eye-opener answers, like “It’s easy to forget what activities reduce your anxiety when you’re panicking”, “Social media does not help, I need to be with myself”, and “I want a discrete app to use on the tube to work without everyone knowing”.

Key findings:

• Every person suffers this condition in a very different and personal way, thus everyone has different coping strategies that work for them, but may not work for others to the same extent.
• People suffering from GAD have enough on their plate without having to worry about being scrutinised by others while trying to deal with an Anxiety attack in a public place. They need to solve it privately, even if they are in public.

Therapist interview: We talked with a therapist named Aysel Aliyeva, who kindly explain to us some interesting information, which will be detailed below.

Key findings:

• People with anxiety disorder and depression are in such a state that they need extensive support from their community and close circle, even though they can have some difficulties expressing it.
• Trust and consistency of any activity (talk, exercise etc.) are important for people with an Anxiety disorder.
• Apps or any kind of tools might be helpful only in the first stage so that these people can understand what's happening because most of them even do not understand or do not want to accept that they are having the symptoms or disorder.
• Apps need to prepare people with an Anxiety disorder to resort to professional help (medicament or therapist)
• Apps can also provide contacts to different therapists, as finding a therapist for example in Berlin is a huge hassle.
• A community where people with anxiety disorder share their thoughts and feelings is good but someone with professional moderating skills must be there so that the people statements are not overwhelming.
• If there are not adequate people to supervise the community, chat boxes might be helpful to instruct a person with anxiety disorder.
• Rewarding activities are valid to level up the mood.

Quantitative research

At the same time that we were talking with our Interviewees, another 15 adult people from all genders answered our survey online. From the answers, we learn that 40% of our respondents suffer Anxiety attacks, and another 40% were unsure if they might have suffered one in the past. Also, they reveal to us that the most common symptoms are:

• Feeling restless
• Feeling worried
• Struggling to sleep
• Heart palpitations
• Panic attacks

To cope with these symptoms, each person has their method like avoiding stressful situations, breathing exercises, writing, playing music, doing sports or dancing, talking about how they feel, etc.

All these insights helped us to realize in which direction our project should go and how it should face the problem so that it’s a real help for our users and doesn’t generate more stress and worries when it is needed.

Affinity diagram

At the same time, we used the Affinity diagram to group similar answers from our surveys and interviews into different topics, with a natural or common relationship. Here, the biggest concept clouds were defined as “User problems”, “User’s motivations & preferences”, and “Users needs”. From them, the most feasible findings to develop in an app came from the following groups:

• “Triggers”: Being around a lot of unknown people; Not knowing what is going to happen next/unpredictable situations.
• “Improve anxiety symptoms”: Pay attention to her breathing and confront her thoughts; Trust and consistency of any activity (talk, exercise etc.) are important for people with anxiety disorder.
• “Preventive measures”: Prevent by practical problem solving; Prevent by avoiding stressful & uncomfortable situations; Prevent by trying to keep me present.
• “Apps”: “I like apps with helpful guidance”; Habit trackers; Audio content is important for 80% of people; Breathing/mindfulness content is important for 70% of people.

Affinity diagram showing our decision-making process.

Empathy Map

We then continue with the definition of our user's Pain Points using the Empathy Map to gain a deeper insight into their emotions, thoughts, dreams, and fears.

Empathy Map based on what our users experience.

Pain Points:

• Feeling like a burden to other people feels some reservation before reaching out — but knowing this is part of anxiety.
• Sometimes struggle with motivation to run but knows she will feel much better after.
• Apps like Headspace are expensive.
• Easy to forget what activities reduce your anxiety when you’re panicking.
• Apps/time on the phone can cause more anxiety rather than reduce it.
• New/unknown situations can trigger anxiety.
• Being around new people can trigger anxiety.

Gain Points:

• Build habits that reduce overall anxiety in life.
• Be able to face new situations and people.
• Learn more about anxiety so that they can identify it.
• An app can help these people only in the first stage so that they bit by bit can understand or accept their state.
• Structure the day /routine scoring system.
• Feel less anxious!!

User Persona

Based on the previous stages, and the knowledge gathered while performing those activities and tools, helps us to define our User Persona, called Anna Blaser, a 25 years old Bachelor student in Communication, who lives in Berlin and suffers from Anxiety attacks when in public spaces.

Anna Blaser’s presentation card.

User’s Journey Map

Consecutively, we developed Anna’s Journey map while attending a work party from the human rights organization where she works as an intern. Here we see how Anna decides to have a good time at the work party, but as time goes on she begins to feel doubts and insecurities because she will be sharing with many people she doesn’t know or interact with regularly daily. As she gets closer to the venue she starts to feel worse, the symptoms of anxiety become more and more noticeable making her think about going home even though she hasn’t arrived at the party yet. As she is about to enter the venue, she decides to look for a YouTube video with breathing exercises to help her feel better and regain control over her emotions, wishing she had a better tool at hand with which to cope with these situations. Finally, and after a long time, the exercises take effect making her feel calmer and more present, which makes her feel more prepared for this social activity, even though she wishes she had material to help her overcome these moments prepared in advance.

Anna’s Journey map while attending a work party.

Competitor Analysis

As we continued, we selected the four most named apps available on the market to carry out a Competitor and Visual Competitive Analysis. We did this, so we could better understand not just the market but also our user needs. These apps are “Calm Harm”, “Headspace”, “Insight timer”, and “Wysa”, and from them learn many interesting features that could help our users better, although most of these apps have their focus on relaxation and meditation, which it’s nice, it doesn’t fulfil our users needs when suffering an Anxiety attack. They also have repetitive errors after updates, and when some chats are automatised with AI they ended up feeling not human for the users, which produce a negative effect when what they need is to calm down.

Competitor Analysis.

Visual Competitive Analysis

From our Visual Competitive Analysis, we learn that not every app allows to personalised content tailored to the individual user’s needs. We also notice that navy blue, purple-blue, and greens are the dominant colours in most apps, used mostly as gradients, and contrasted with warm colours (usually in the orange range). The illustrations or photographs are subdued and calming. Also, the four apps use Sans-Serif rounded fonts, to appear modern and with a more informal look.

Visual Competitive Analysis of Calm Harm, Headspace, Insight Timer, and Wysa.

Stage 2 — Define

With our learning from the previous stage in mind, we defined the Problem Statement and How-Might-We, to help us clarify our goals and to decide which solutions we should implement during the sprint to solve Anna’s Pain Points.

“Anna needs a way to easily and discretely access her chosen anxiety-reducing tools because she often experiences anxiety in public spaces, and it is interfering with her daily routine.”

“How might we provide a way for Anna to easily and discretely access chosen anxiety-reducing tools, so she can manage her anxiety better in public spaces?”

To bring an answer to this, we then defined our Hypothesis statement

“We believe that by creating an app with easy and discreet access to anxiety-reducing tools, we can help people sufering from GAD manage their anxiety in public spaces. We’ll know this is true when we hear positive responses through qualitative interviews, when users recommend the app to friends, and when the app receives high ratings.”

Stage 3 — Ideate & Develop

Ideate

After defining the Hypothesis statement, and also had to understand that this topic is very sensitive because many people could result seriously damage if this app doesn’t work properly or if its results are not as expected. Having this in consideration, we began the Ideation stage of Design Thinking using a mix of Round Robin and Crazy 8’s methodology, to make the creative juice flow. As we collected a bunch of ideas we order them following the M.O.S.C.O.W. method to determine which of them would bring a better solution, fit for our How-Might-We statement.

Results of the M.O.S.K.O.W. method.

This methodology helped us to prioritise the most needed features for our app. Due to the time constrain, we decided to focus on ideas from the “Must have” section, leaving the other ideas for future sprints. Although this decision, and because of our great time management, we agreed to add the “Links to helplines” and “Call yourself function” from the “Should have” section because we thought that they would be easy to implement, and they would bring a highly positive impact improving our user’s mental health when having an attack. We also decided to incorporate the “Ability to add mood after using content” feature from the “Could have” section to allow users to keep a clearer record of whether the features they used work for them and to what degree they improve their mental state while increasing the data visualisation of their progress, and as a record to be shared with a specialist with whom they are in treatment. Finally, we keep always present that the tracker of our app won’t show as “low points” of our users when they’re having a bad day, taking special care in how it displays the data collected about our users’ states of mind, so as not to discourage them when checking their log.

Sitemap

Now that the features are defined, we build the app’s sitemap to show the relation between the different pages and where the features would be located. So, we decided that, after arriving at the home page, our users would find there some predefined activities such as “Breathing”, “Grounding” and “Note to self” available to all users, as they are generally simple and highly effective tools that help a large percentage of people suffering from GAD.

Users would also find on the home page a “Folders” section, where they could create as many folders as they want to easily organise tailored content that helps them cope with an Anxiety attack situation. These folders would have only one level of depth to avoid hiding helpful content unintentionally, keeping in mind that the content must be easily accessible, according to what we defined in the M.O.S.C.O.W. method.

Users can also find access to the mood tracker on the homepage, where they can keep track of their moods and when they experience an anxiety attack. This feature will not be mandatory for users to use, as we do not want to make them feel as if they are forced to do so. However, its use is recommended as it helps to visualise the progress the user has made, making them better appreciate their progress and thus producing a sense of reward for an achievement. In the same way, it can help to share the user’s progress with their therapist for those who are professionally supported.

Finally, access to the settings would also be found on the homepage. Here the user’s data can be defined and edited, as well as the language, enabling notifications and night mode (a feature that could be developed in the future).

User Flow

Following the Ideation process, we define two different User Flows for our users when in contact with our app, based on two different mental states of Anna.

The first happens when her mind is clear and she downloads the app, thanks to a recommendation from a friend, and she has some time to set it. The second flow happens when having an Anxiety attack in a public space, so she needs to access quickly and easy her tailored content to help her ease her symptoms. Yeah, a bit difficult to test, but not impossible for a team like ours. However, we decided that our main focus would be on the second flow, as this is the time when the app will be most needed.

Stage 4 — Prototype

LO-FI Prototypes

In the following process, our team began to design LO-FI prototypes based on our findings during the previous stages and was very focused in to answer the How-Might-We statement the best we could.

As each of us had different ideas to propose and used different techniques according to each person preferences, we gathered as many options as we could, so then we voted for the ideas that could bring us to a seemingly better outcome.

Some of our LO-FI prototype ideas before voting.

MID-FI Prototypes

Now that we had the first structure of how our app would look, we began the development of the MID-FI prototypes, so we could begin to test them. As we did this, we started to slowly but steadily create our Design System, knowing that what we define in this stage would most certainly change later, although to begin now seemed to us like a good way to win some time for later development stages.

Some screens as examples of our MID-FI prototypes.

To continue with the tests, we used the two flows previously defined and we set them on maze.co, where a total of 22 people tried to complete the tasks to evaluate.

From the results, we confirm that more than 94% of testers had direct success in the first part, and 100% of them achieve direct success in the second and most important part of our test, receiving also some insightful comments from the questionnaire at the end of each test. From this, we concluded that it wasn’t intuitive to click on the mood icon to display a self note explaining the reason for the corresponding tracker entry. We also discovered that our users would need some kind of tutorial to learn how to use the different features of the app, such as knowing that they can enter more than one mood per day in the tracker, to reduce the uncertainty that the app might cause during the discovery phase for the user, so as not to add any reason to stress them out. We learn as well, that it wasn’t obvious to click the folder’s name to be able to edit it and change its name.

Moodboard

With the results of this prototyping process, we went back a bit to the Ideation stage to define our Moodboard. At this stage of development was very clear for us that, based on our research, our mood board should have light pastel colours, calming images and maybe illustrations to help the users to chill while navigating the app. It should also use modern rounded Sans-serif fonts, to keep a fresh and easy to read look, while at the same time reinforcing the calming UI. That’s why we choose Circular Std Bold as our main Font for this app. For our logo, we designed a simple wordmark with the app’s name using the same font as in the app, accompanied by a simple and abstract smiley face.

Alriight’s mood board.

Stage 5 — Test & Deliver

Design System

With our mood board defined and based on the results of the testing of the MID-FI Prototypes, we began to develop the HI-FI prototype version of “Alriight” for mobile devices.

As we always should, we create effective interface design systems using Atomic design. By defining styles, such as the size of the different texts and how and in what way the different colours will be used, we were able to keep defining larger and more complex elements, such as the navbar or the input fields and the mood tracker. Thanks to that, we could integrate and match components, create our prototype faster and it was easier to update or remove elements of the screens.

Main elements of the Design System created for the Alriight app.

Landing page

As part of the deliverables for this project, we develop a landing page for our app, so future users could learn there the main features this app posses, to allow them to have a less stressful life. You can check here our landing page prototype.

HI-FI Prototype

We finally implemented all the findings and insights learned during this sprint in the latest versions of our prototypes, which you can see now in the following videos.

Here is shown Anna’s first User Flow. When she opens the app, she is welcomed by a short animation, followed by the settings needed for the app to work, like the user’s name, country, and language. After that, she reaches the home page, where the first that she explores are the different exercises in the activities section. Then, she visits the folder section, where she needs to name her first folder in order to add content to it, what she does by adding a video from YouTube. From there she goes to register her mood for the first time, adding a text note to the activity log.

After doing this, she now knows how to tailor her folders, where to find exercises to relax, and how to register her mood and add a note to it.

First User Flow.

In the following video is presented the second User Flow. Here some time has passed since Anna installed the app on her smartphone, and now that she’s going on the U-Bahn to another work activity, she needs to use Alriight to calm down before starting an Anxiety attack in front of strangers.

To do so, she accesses her folder “On the go”, which she already has prepared for a situation like this. There Anna decides to listen to an audio file with relaxing waves sounds. It takes a bit of time until she calms down, but after all, she is now fine and decides to register this situation on the mood tracker. There she already has added something before, but now she is feeling better than before. After that, she checks her progress during the week and the month, recognizing her improvement during this time. But just in case, she checks one last time the SOS section, where her most trusted friends were listed by her to be contacted in case of emergency, and where she can also find the feature to call herself, simulating that she received a phone call, allowing her to escape a stressful situation without giving to many explanations.

Second User Flow.

Next Steps

As the next steps of this project, we defined that the prototype needs to be tested again on maze, this time by people suffering from GAD to understand better the user experience about dealing with their specific triggers and solutions.

Also, we wanted to investigate the chance of implementing a fixed section with articles for Self-Awareness to help recognize Anxiety symptoms, as well as cat gifs and a recommendations section, to help users feel less stressed.

We would also like to define the tutorial and its different steps for new users, so they can easily learn how to get the most of this app. Likewise, we would need to test if the organization by tags instead of folders could improve the navigation and filter system of the different content to be added by users.

Moreover, we wanted to explore the possibility of automatise the support, based on the activities of the user on the app, recognizing when is feeling bad, and organizing content tailored to be shown.

Learnings

This was our first two-week project during our Bootcamp at Ironhack, and the amount of data and information produced during this time was positively huge. We are very happy with the product of our work, and we stay motivated to continuously keep learning the most of this field. It was clear from the beginning that the product that we needed to design was going to be very sensitive, considering our users and their needs. And because of that, we choose to define two flows for the same User Persona because both flows develop in different circumstances, where the same person is in different mental states, and where the way it is used during an anxiety attack depends on the implementation made during the first flow.

On the other hand, we also learned the importance of developing a flexible and well though roadmap, essential to define how much time should we use in the different stages of development of the project. It also helps to separate tasks, so everyone knows what task to focus on.

Working with Aline, Iona, and Lamiya was a great experience. We discussed and talked long every decision since the beginning of the project because everyone was giving their best to succeed in helping others. So every decision was made very consciously, having into consideration how the recent pandemic has affected so much the psychological health of many people in so different ways. Thanks to you we developed a great sensitive product, which seeks to help people to reach a better life quality. It was a great pleasure working, learning, and growing with you guys.

Let me know your thoughts and insights on this project in the comment section, and if you want, we can get in contact via LinkedIn to discuss this project or some other topics related to UX/UI design. Cheers!