Do Breathe - Client Project

Full case study…

Discover

Usability testing

Our First task involved getting to grips with the product itself. We conducted a series of internal usability tests on the beta application in order to gain a greater understanding of how the experience looked and felt. We then opened the testing up to a handful of nominated users, and by doing so we uncovered a number of pain points/ areas that needed working on. 

It was really interesting to see that users were generally aligned in the feedback they provided, below are three examples of important findings that we gathered in this stage of the process;

Usability test on existing app

Competitor analysis

We kicked off our 2 week sprint by conducting an analysis of the competition, in order to identify any trends or expectations within the mindfulness and wellbeing sector. 

We reviewed 8 competitors in total, 6 of which had been pre defined by the client as businesses that we should be looking at. We used a method called ‘feature comparison’ to help us decide what competitors were doing well, and what they weren’t doing so well. 

We quickly realised that there were a number of features missing from Do Breathe that were present across these products. Chief amongst these were;

A clear and informative onboarding
Intuitive navigation
A relevant progress dashboard to keep users informed and engaged

Screener surveys / User interviews

Now that we had a better understanding of the market, we wanted to speak to potential users to find out what their expectations would be from an application of this nature. In order to ensure that we would be interviewing the right people we drafted a screener survey. 

We collected 61 survey responses in total, and quickly recognised that there were some trends emerging;

Trends from survey responses

• 65% wanted clear and informative instructions on how and why they should use the app

• 60% said they would need clear and engaging content to keep them coming back

• 55% said they would need an engaging way to track their progress

We wanted to dig a little deeper. Out of the 61 surveys we conducted follow up interviews with 11 respondents. (It’s worth noting that we would have interviewed more if it weren’t for the time constraints)

The results of these conversations were really insightful. We got loads of rich feedback, too much to analyse at face value. To help make everything more digestible, we used a technique called ‘Affinity mapping’. As the three of us were working remotely we set up a collaborative space in ‘Miro’ to enable us to complete this task, and others like it, as a team.

Below are the initial interview insights, as well as the overarching themes that emerged from our affinity mapping session;

Interview Insights (Categorised by person)

Affinity mapping results

To sum this up into 5 key takeaways, Interviewees;

1. Prefer onboarding to be quick, but informative

2. Expect a visual progress tracker/dashboard

3. Like to be able to see the value/benefit of using an app

4. Want the ability to share content/progress with a friend

5. Are willing to pay for an app they believe in

With all these insights in our pocket, we were in a position to begin defining our user, their pain points, and how we can best impact their experiences.

Define

Persona

We began the define phase by creating a persona, a mock distillation of our discovery findings. This was a valuable tool when it came to presenting back to the client as it gave them a person and a story to empathise with.

Persona

Experience Map

With the user defined, we created a simple experience map to help us analyse a potential customer journey and identify the pain points;

Experience map

Problem statement / HMWs

James’ problem statement: 

James needs a way to remain calm and quickly find focus in stressful situations, so that he can build on his physical and mental resilience

We’ve identified the problem but what were we going to do about it? We needed to start thinking about how we could provide a solution for James, and what we might do to keep him interested and engaged.

We came up with these three ‘How Might We’ statements to help get us thinking;

How might we provide an engaging and informative onboarding experience for James?
How might we communicate to James the benefits of breathing in sync with his heart? 
How might we provide a visually stimulating way to help James track his progress?

Develop

Design Studio

Having summarised the problem we entered the development phase of the design process. The first step for us was to take our ‘How Might We’ statements forward into a design studio where we, alongside the client, began to think about how we could illustratively answer these 3 questions.

We sketched out some solutions individually, and then regrouped to share and dot vote on our collective ideas. We repeated this process two more times meaning we effectively carried out one ideation session per statement. Below is a screenshot from our Miro board to show how this process worked;

Design Studio

The client was keen to get involved and it was really encouraging to see that we were all aligned when it came to showing off our ideas. We left the session in great spirits and with a whole load of features to play around with.

Feature Prioritisation

The biggest challenge for us now was the time constraint. We had so many features to choose from and only a week left to get our designs together. We needed to prioritize what we wanted to work on as we knew we wouldn’t have enough time to include everything this time around.

We created a value/effort matrix to help decide the features to work on;

Feature prioritisation

We then used the ‘MoSCoW’ method to determine which of these would be most significant and impactful to the user. We grouped the nominated features into three high level categories, three areas that most needed our attention;

App Map (Navigation)

We took a look at the existing app map, and made one alteration. We wanted to give users more freedom to discover what the app has to offer. We eliminated the original landing page as users agreed it didn’t add any value to their experience. In its place we added a home page;

We agreed that adding an intuitive navigation bar at the foot of each page would be really effective, as it’s something people have become familiar with over their use of other products.

User Flow

Next we took a look at the existing user flow for a first time user, and added a few extra steps;

New User Flow

• We added some detailed onboarding screens to inform the user of the power of ‘Do Breathe’, and give them a reason to sign up

• We added a welcome screen

• We added an achievements page and a progress page to provide users with valuable information about their progress and to keep them engaged with the app

Deliver

We started by designing screens on paper, and then moved up to digital. We designed in low, medium and high fidelity, and completed a series of user tests on prototypes at each level.

• We tested at Low-fi so we could understand if the layout was intuitive for users

• We tested at Mid-fi to see if the visual content made sense to our users

• We tested at Hi-fi because the client was interested to see how their colour palette would apply to our designs

Iterations;

Low-fi —> Mid-fi —> Hi-fi

Onboarding

Sign Up

Welcome Overlay

Achievements Page

Progress Page

Link to original prototype:

https://www.figma.com/proto/9nvqhDDdRSNDk56YmskZoP/Do-Breathe-Low-Fi-Copy?node-id=347%3A135&viewport=-583%2C6372%2C0.7585101127624512&scaling=scale-down

(Automatic walkthrough)