Case study: Designed an app from scratch to improve women’s work-life balance

Rather than the common sense of apps focusing on time-tables and creating agendas, this app proposes reflection about life in a continuous development cycle.

Details

Brief: (a) Create a set of digital wellness tools for Wellness coaches; (b) Update the brand’s image — create a new visual system that reflects their innovative and refreshed approach to wellness.
Deliverables: conduct research, create wireframes, and produce high-fidelity prototypes (a responsive website and a native iOS App or a native Android App).
Design Sprint: 10 days.
Team: Jonatas Fontes (concept, testing and lo-fi prototype) and me (concept, testing and hi-fi prototype).
Brand: The National Wellness Institute
Tools: Figma, Miro, ZeroHeight, Adobe Colours, Unsplash, Zoom, Google Meets and old and gold pen and paper.

Discovery

We should decided among 13 types of apps within health and wellness to pick and start our research. In order to decide among those themes, we took into account 3 equally important source of information:

1. The National Wellness Institute activities and brand

The National Wellness Institute (NWI) provides professional development and supports individuals in promoting wellness based on the Six Dimensions of Wellness model.

We decided we wanted to pursue the emotional, intellectual and occupational path, instead of the other dimensions.

2. The trends and future of the tech industry

Bill Gates. Source: MIT

To think of trends and innovation we based our thoughts on the iconic Bill Gates. He divides innovation into the ones that contribute for the quantity of life and those ones that contribute for the quality of life. It means, longevity is still a problem to be tackled, but we started to swipe our focus into quality of life and more philosophical questions.

If we could look even further out — let’s say the list 20 years from now — I would hope to see technologies that center almost entirely on well-being. I think the brilliant minds of the future will focus on more metaphysical questions: How do we make people happier? How do we create meaningful connections? How do we help everyone live a fulfilling life? (Bill Gates)

3. The reach of potential target audience

When it comes to the people, we observed the Brazilian Age-Pyramid in order to understand the possible coverage. We saw that the range between 20 and 39 is the larger population in Brazil.

This population is within the working age, after some focused desk research about Millenials and Gen Zers wellbeing concerns, we discovered that Working-Life Balance is one of the biggest worries.

That’s why we decided to understand the working-life balance necessity and the limites between working benefits and disadvantages.

Problem Definition

Through desk research we discovered:

26% of work tasks are done after hours.

40% of respondents extend their daily work until 10pm.
(according to RescueTime)

Besides that,

60% of people interviewed by BBC, said working longer hours is a sign of success.

We discovered many people have inclination to work for long hours.
Thus, to confirm that insight we launched a survey answered by 104 people:

We discovered 56.3% of women weren’t satisfied with their work-life balance, while only 26.7% of men were dissatisfied, mainly because of women’s multiple responsibilities with 2 working journeys (job and house activities).

In order to better understand those number we interviewed 5 people: 3 women and 2 men.

The men’s biggest concerns were colleagues from work bothering them during leisure times.

For women it is the “stop working” incapacity. I mean, they have the feeling of working 24/7. Because, when they stop working for their jobs, they start working for maintaining their lives, for example, doing laundry or cooking. Additionally, sometimes during leisure times, they start to think of solutions for problems at work.

So, they mention two kinds of working moments: “physical time”, when they are at the office or officially working, and “mental time”, when their minds keep thinking of work even though they are spending a “free-time”.

They also say that when it is a work they believe in, they don’t care about working long hours. But, they complain about the lack of leisure and free-time.

“When you don’t have time to do things out of work, you become more and more uninteresting and less creative, with less inspiration. Leisure is necessary for productivity.” (interviewee)

These women goals are:

• Work for pleasure
• Live moments of leisure
• Find work-life balance

They look for ‘working recognitions’ and they don’t want to feel guilty when they have idle time (what happens frequently).

Problem:

Women between 20 and 39-years-old struggle to live moments of leisure. This happens because they prioritize professional life.

Please note we are talking from a privileged point of view about people who has the chance of changing their priorities. But we know millions of women have no possibilities of reflection and denormalization, or to decide what to do with their time schedules.

NWI scheme

These women do “to do lists” to organize themselves and are already in therapy, but they do not always focus on the issue of ‘personal life and work’ reflection in their sessions, so they downloaded the app on the recommendation of the NWI professional (therapist or coach). Consequently they are NWI clients.

Value proposition canvas

Through Value Proposition Canvas we meet how the Institute could help those women to cope with their problem: integrating NWI’s coaches and therapists with their clients (women) in the app, documents the information gathered by the app to be used on the sessions later.

Delivery

Taking into account a research by Harvard:

“achieving better balance between professional and personal priorities boils down to a combination of reflexivity — or questioning assumptions to increase self-awareness — and intentional role redefinition. Importantly, our research suggests that this is not a one-time fix, but rather, a cycle that we must engage in continuously as our circumstances and priorities evolve.” Work-Life Balance Is a Cycle, Not an Achievement, Harvard Business Review (2021)

We noticed we had to stimulate women to reflect about their lives, where they are now and where they want to focus to achieve their ideal selves.

According to our benchmarking, the majority of “wellbeing: work-life balance” focus on creating an agenda, so people can fill up forms and have a planned routine.

benchmarking

After benchmarking we confirmed our competitive advantage: the mental reflection.

The designed app

• Aims to generate reflection and presents an x-ray of the situation.
• Assists in understanding and focusing on the root of the problem.
• Documents information to be discussed in sessions with their coach/therapist.
• Allows women to visualize their evolution.

It is the first step…

Prototypes

mid-fi prototipe

We started by making a Low-Fidelity prototype to test the concept, done with 5 people who approved. Then, we made a Mid-Fidelity prototype to test usability and user flows.

We have previously thought about 2 different features with individual flows. The first one was the work-life balance diagnostic and the second was a feature to prioritize some daily tasks like: spending more time with friends or go to museums.

The first feature was approved and people liked it, the second one was disapproved, people didn’t understand the flow and didn’t thought is was valuable.

Consequently, we focused on the first one and let the second to the next steps of the project.

Other iteration demanded was to change some categories terms. We have used the taxonomy used by the NWI, but people could not comprehend what those mean, so we changed to words used in daily life. For exemple, instead of occupation we used work.

We also put more information about the feature, its goals and integration in the begin screen, such as: the time it takes to complete the flow and how they could use the generated information with the NWI professionals and personal therapists later. In the questions pages we put numbers that indicate progression in the task.

User Interface

We had the task to modernize the brands imagery, so we deeply researched their web site to understand the messages they wanted to spread.

1. Logotype and Logomark

I understood that the hexagon represents the 6 dimensions of wellbeing used by the institute, so I kept the form, transforming it in an elegant and minimal form. The helvetica neue typeform was choosen because of its readability in digital and its modern sans serif appearance.

logo of National Wellness Institute

2. App Icon (Logomark)

With the same minimalist and modern concept in mind, I created an icon to represent the app and users’ evolution with the flow.

icons variations

3. Colours
Brand’s main colours are: blues, green and orange, as can be seen below.

print of the website

I didn’t want to change completely the way the Institute communicates with their stakeholders and clientes, in order to avoid to become unrecognizable. That’s why I looked for different kind of visual communications they made and found a 2021 Calendar with date marks related to health.

In this calendar they use: blue, purple, green, nude and pink, in multiple saturation and brightness.

Bringing the Institute, the wellbeing professionals and the users to mind, I though those colours could be appealing in a good way.

So I studied all those tones and decided for 4 soft colours and 1 primary colour as seen below, besides white.

colour pallet

4. Mood

To enter in the brand concept ethos we would like to transmite, we looked for some inspiration in brands that talk with similar audience, such as: Freeda, Moving Girls and Girlboss.

mood-board

I noticed a pattern of using multiple colours in the background with a blur layer and white or blurry cards to show information. Thinking of those patterns and the concepts I started the high-fidelity prototype.

5. Hi-fi Prototype

I started creating components and variants to make the prototyping faster and to following cohesive patterns. Also the integrations and motions would be easier to implement.

Style Tile

The Style Tile above shows components and their variants in Figma.

To stimulate the reflection pause, our transition from page to page took more time than the average 300ms, where people could see the colours move from one point to the next.

The question page was very clean in order to make people focus on the question. We also tried some A/B tests with more visual elements or progression bars, but they got all the attention, instead of the question itself. To we cleaned to avoid those situations.

The goal isn’t to finish fast, but to stop a moment and focus on these tasks.

This separation is important to the test results displayed at the end screen, where the app shows the personal areas where users are investing more or less energy. This ‘diagnostic’ objective instead of saying what is good or bad, is to provide visualization and enable to discover the best individual path , with assistance of NWI’s professionals.

6. Tests: Desirability & Contrast

Once we had completed the hi-fi prototype we started the desirability test and the contrast tests in order to made is more accessible.

Iterations:

• changed the background in the questions screens.
• moved the center of the gradient in different positions to create more contrast.
• Put blurry layers in some screens to highlight the word and create common areas
• Changed font colours in the question pages to improve contrast.

People described our prototype in the desirability test as:

• Minimalist
• Calm
• Sophisticated

Each group of questions, divided in: work, leisure, emotion has a different background colour, so people could realize the screens and themes were changing.

Resumed flow:

1. Users login,
2. They fill up their main objective,
3. Answers 10 questions about work-life balance
4. Receive the results which are shared with the professionals
5. They do this ‘test’ periodically and check their evolution.

To check the mobile prototype, check the video or navigate below:

video of prototype

You can navigate the prototype below. If you have any trouble during your experience, please let me know in the comments. To check the prototype well, select “fit — scale down to fit” in the options (upper-right corner of your screen).

We also made a prototype for desktop, using the same concepts we used in the app. The pop up menu became a nav bar, and some text were gathered in common places. No information were added or took. Here you can check some pages:

login screen for desktop

profile screen for desktop

First page survey for desktop

question 1 screen for desktop

Learnings

This case was the first one I designed the User Interface from scratch, what made me feel insecure, but I know I have tons of things to keep improving and learning. I’m proud I finished it because these 10 days were a hard (and happy) journey.

I’m always surprised with users’ tests, it is very unexpected. At the same time I always feel glad I did and understood a little bit more about different mind models. Iteration is a continuous mode to me, personally and professionally, it is tiring, but worth it.

Dear reader,

Thanks for reading this full piece. I hope it gave you some inspiration. What about sharing your thoughts in the comments? Constructive critics are always welcome.

See you next week.