Prototyping Leave app — UX Case Study

10 min readJan 18, 2019

Last November I quit my job as a Marketing Director in a tech company. I had been feeling stressed for like a year. Let’s not say that this is why I came up with the idea of leave, but it definitely was a motivator. Because I’m not the only one in the room that’s stressed! In fact, in this report you’ll find out that almost everybody feels stressed, and I’ll walk you through the steps I followed to narrow down a solution for this problem.

So let’s go! Here’s what you’ll find in this post (I recommend you to read the whole thing, but if you’d prefer to navigate directly to a specific section, here’s the table of contents):

0. Setting the grounds
1. Research & investigation: how do people deal with stress?
2. Defining the problem
3. Ideating a solution: Introducing Leave app: leave stress behind
4. Prototyping & testing
5. Key learnings

0. Setting the grounds

Scope of the project

This was an assignment we had in class, in the Ironhack UX/UI bootcamp: the goal was to design an app to support wellness of some kind and improve people’s day-to-day lives in just 5 days. We were asked to choose a wellness topic and, individually, had to work all the way from the research & investigation to the final mid-fidelity prototype tested deliverable that you’ll find in the end of this post.

Quick overview

I decided to focus on occupational wellness, working specifically in the work-related stress and people’s inability to disconnect from work when they get home. So I’m going to explain the design thinking process I followed to create Leave, the app that helps you leave stress behind and focus on what matters.

1. Research & investigation: how do people deal with stress?

#1. Planning and conducting the interviews

I started the investigation by identifying a potential target to focus on, based on an assumption that everyone with a high role in a company or with high responsibilities would probably be stressed. This potential target were managers, “highly committed to work” type of people, overachievers… So, keeping this in mind, I started planning the upcoming interviews using the Lean Survey Canvas, a great framework that helps you focus on the insight you need or validating your hypotheses.

1. Empty lean survey canvas. 2. Almost completed lean survey canvas. But both of them lack the survey questions part ;)

I conducted 4 interviews with this type of person (they were an industrial designer, a product owner, a new entrepreneur and a former product manager). My main goal with this first interviews was to help me narrow down the research into creating a powerful survey that unfolded even more insight, and ultimately into finding a solution to help them disconnect from work. Here’s a wrap up of the most interesting things I found out:

Almost everyone has a technique to de-stress and even to prevent stress from happening
To try to destress and stop thinking about what worries them, they try to send the mind away
They tend to follow up with work at home, and even keep working late
They even experience physical symptoms when stressed
Meditation and mindfulness seem to be a valid solution

#2. Planning, creating and sending the surveys

From the discoveries in the interviews, I took the Lean Canvas I had started before and I modified and completed some information, though it felt pretty alright. Then I started working on writing the survey questions, which I think we should dedicate extra time to, because what questions you ask and how is basically going to give you the core information to understand your user’s pain points and potential design opportunities to address them. After that, I created the survey in Typeform (want to take a look at it?) and started to think about the strategy behind it.

Target audience & outreach

As you already know, my main goal was to reach people of high roles, high responsibilities or highly invested in the work they do. I have much of them in my own circle, but my circle has even more connections as such.

I focused mostly on LinkedIn: posting in my feed, sending some messages in related groups. My goal was to reach the second level network, and I think it’s a good tactic, because you probably wouldn’t reach them on your own.
I also used two Slack communities I’m part of: a growth hacking course I took, full of managers and business owners, and a community of women in mobile.
I also sent one-to-one messages to specific people through different channels.

#3. Survey results

(Based on those until 16th January, 2019)

Click on the images if you want to see the results bigger

You can check all the responses in this link, but the most important results that came out of the surveys were the following:

6,8 average stress in general so, yep, people are stressed like, really stressed
64% active techniques to de-stress, 30% wait until they feel better
They prefer to de-stress at home to have quality time with their families, but also at work

As a learning and (I can see it now), it probably would have been really nice to do an Affinity Diagram* to organize all the information I got, but I didn’t do it because I thought I had all the information I needed clearly organized already.

*Basically, an Affinity Diagram is a brainstorming technique you can use to organize a whole bunch of ideas into naturally related ones, by placing post-its on a wall, for example

2. Defining the problem

People with responsibilities at work are stressed most of the time, and they find it difficult to disconnect from their job and want to do something about it, preferably at home. In an ever-connected world, it’s almost impossible to set apart from job-related issues, and this is probably the reality you (yes, you!) live in as well.

#1. User persona

From my research, I developed a primary persona, Matt, the eager manager, who embodied all the managers I talked with; and Lisa, the all-powerful mom, a secondary persona. My solution is going to focus on solving Matt’s problems, but keeping in mind Lisa’s too.

#2. User needs

So these are the user needs that I thought I could address for my users, either at once or not:

I need to disconnect right now from my work-related thoughts, because right now I want to focus on something else — immediate, short-term
Ex: I just got home and I want to stop thinking about what happened today at work
I need to achieve a healthier routine to prevent from stressing and to keep my mind relieved — mid or long-term
Ex: I want to be mindful about what stresses me up and be ready for it not affecting me that much as a routine

At first, I wanted to tackle both problems, but as I talked to people I saw that they could actually be two different solutions (one short-term oriented and the other, long-term oriented). It wasn’t that clear to me at first, but now I think that the time frame is important, because the mindset is not the same: for the first user need, I need a shock plan for NOW; for the second, I need to do daily work to achieve something. Soooo, I chose to focus on the first one for this project: the urgent, pressing need to stop thinking about work right now.

#3. Problem statement

It’s pretty simple and you may have guessed it already, but here it is:

Highly committed people need a way to disconnect from work because they can’t stop thinking about their job when they get home.

And my design goal:

Provide a solution that helps people escape the work-related thoughts “immediately” when they leave the office and get home.

3. Ideating a solution: Introducing Leave app: leave stress behind

#1. The story behind the naming

Throughout the interviews and surveys, mindfulness and meditation came along usually as ways do de-stress and even prevent stress and one of them actually talked about the “leaves on a stream” technique. I’m not an expert, but if you’re doing it, you’ll be sitting by a river stream, watching leaves (your thoughts) go by. Also, it made perfect sense, as the word “leaf” is pronounced very similarly to “leave”. So this is where I took the idea from: a solution that helps you send away your thoughts as if they were leaves.

#2. Ideating the features

I started brainstorming by writing some of my ideas down with zero filters, based on stuff I read online about stress and meditation, on stuff that people told me in the interviews and surveys and on my own ideas. Then I started filtering them down, until I came up with this possible features:

Setting up an atmosphere: based on your mood, you can create an ambient through sounds to listen to for a while or as a nice background
Escaping somewhere (which I first called “fake-traveling”): based on your preferences, we’ll send you right away to a safe place of your choosing to take a break and imagine you’re there
Exercising a bit: though it’s not an exercising app, most people told me they workout to feel better, so it made sense to add this as an available option
Playing silly, mechanic games: many people play games to de-stress, so it was crystal clear the app needed some games

4. Prototyping & testing

#1. Paper prototyping

After sketching some ideas on paper, I started actually thinking about the flows and prototyping them. I had a pretty clear idea of how simple I wanted the flow to be, so Matt, the user, would just find a quick way to de-stress when he got home. Let’s see the four flows more closely.

1.Setting up an atmosphere: you just need to select the sounds that will make you feel better and adjust the levels to create the atmosphere that works for you. You can even leave some of them out of the equation and save your mixes.

Testing

On the first screen, having a more clear title and a subtitle should help understand the options: some testers didn’t understand what “atmosphere” meant on its own, so I added the little titles in the 4 techniques
Atmosphere was first intended to automatic play the sounds, but people didn’t understand that, they asked how much time that would last, so maybe explaining that in the design would work

2. Escaping somewhere: you can customize your preferences and select between levels of contraries (sun vs cold, beach vs mountains) and kind of get a result with those mixed choices. You can also choose different formats: image to stare at, video to watch for a bit, or a sound that represents that specific place; and the time you want to play it for. After that, you’ll get to experience what it would look like to be in that place.

Testing:

First, after “fake-travel”, the copy said “travel”, and some testers understood that they would actually be able to plan some trips, so I changed it to “fake-travel”, but it has kind of a negative perspective, so I’m now saying simply “escape”.
Navigation felt a little weird, because the icon to go back is up left, and the button to go next is down right. Styles and UX didn’t match, so I solved it in the final prototype.

3. Doing a little training: based on research findings, exercise seem to be one of the most preferred activities to disconnect. I didn’t want to make although it’s not an exercising app, most people told me they workout to feel better, so it made sense to add this as an available option. But the exercise type should be to de-stress and disconnect, not to get fitter.

Testing:

Testers understood this section pretty well, so I didn’t find any troubles.

4. Playing some simple games: it would work just like the exercise features, but with some relax-focused games. Actually, one of the games would be related to the catching leaves technique.