Case study: The holistic approach of the menstrual cycle

Ironhack’s UX/UI bootcamp

Julie Bertrand
Bootcamp

--

Friday the 26th of February 2021: after almost 1 month of hard work within Ironhack’s UX/UI bootcamp, it is already time to start our fourth project!

Context

During this project, we had to answer a call for projects set up by the Wellness Institute, our client.

Their goal: explore how they can leverage technology to help people live a healthier life. What we observe is that despite the vast availability of personal metrics and health apps, people continue to struggle to improve or maintain their well-being.

The challenge was thus to propose a new mobile app designed to support wellness.

Scope

  • Our solution should be an MVP (minimum viable product), meaning that the app should not try to solve all wellness issues that people have at the same time
  • We could include the features/functionalities we wanted in our app
  • In the long run, the Wellness Institute would like its tools to be available natively on both iOS and Android platforms. However, for this call of project, we decided with which platform to start with.

Team & set up

I had the opportunity to work with Mathilde, another UX/UI designer with whom I already worked during our first project on city mobility. We had 8 days to come up with an MVP.

Our problematic

We had the possibility to choose the topic we wanted to tackle, and decided to focus on the holistic approach of the menstrual cycle.

Our approach

The institute defines wellness as “an active process through which people try to improve or maintain their well-being.”

The omnipresence of the smartphone has spawned a massive market for mobile health and wellness apps. Healthcare-related mobile apps are becoming popular at an astonishing speed, as indicated by the fact that 69% of US smartphone owners track at least one health indicator using them.

BUT. Still, people struggle to improve or maintain their well-being. So why do they struggle?

Nowadays, consumers are embracing wearable technologies and other activity-tracking products more than ever before. However, wellness does not rely only on facts and data: people need to understand and reconnect to their body and mind.

The holistic approach to wellness

This is one of the reasons why we chose a holistic approach to the problem. A holistic approach means thinking about the big picture. A belief is that both the physical and mental aspects of life are closely connected and factor into the overall health and wellness of a person.

Why is it an interesting topic?

First, it concerns half of the world population. Second, it is a relatively little-known subject. Third, there is no digital solution that exists on the market today.

Our UX strategy

We followed the design thinking framework and used various tools and methodologies to gather and download data, define our problem, ideate with new ideas, prototype and test, and in the end come up with the final MVP.

Using the double diamond, we approach the problem by alternating between two different types of thinking: divergent and convergent:

  • Divergent thinking: think big, broadly, explore the issue widely and broadly
  • Convergent thinking: think narrowly, taking focused action

Secondary research

Our secondary research led us to understand that the menstrual cycle is far more complex than we could have imagined.

Importance of understanding how the menstrual cycle work

Our menstrual cycle is composed of four phases: period, follicular, ovulation, and pre-menstrual. Unlike most people think, only 13% of menstrual people have cycles that last 28 days long. The menstrual cycle is regulated by hormones, and as hormones are changing along the cycle, the level of energy also varies. People who menstruate often don’t know how to manage this, and some take a contraceptive pill that is blocking this wave of hormones.

Surfing our cycle

These waves of hormones happen around 500 times in their lives. The best way to live with them is to learn how to surf the wave, and this is where the holistic approach is interesting. The idea behind the wave is to imagine that the menstrual cycle acts like a wave and that we should all learn how to surf. Instead of “dealing with” or “fighting against” their cycle, persons with menstruation should learn how to better live with and according to their menstrual cycle.

Interpret its cycle

While the secondary effects of pills receive more and more attention, natural contraception remains very poor in France (it’s called “symptothermie” and is based on a methodology where we observe our cycles). With the holistic approach, it is essential to observe and analyze its cycle, to be aware of the advantages of each phase.

Survey — Key learnings

To complete our secondary research with quantitative data, we conducted a survey to better understand how people deal with their menstrual cycle nowadays. We got almost 200 respondents, mainly from holistic Facebook groups.

Key results from our survey

36% of the respondents don’t follow their cycle. The main reason is that they don’t see the point of doing so. In that case, the holistic approach is even more important, to raise awareness among people. Among people who follow their cycle, 82% use a mobile app to do so.

Empathize with our users thanks to job-to-be-done interviews

During this project, I had the opportunity to discover “job to be done” interviews. Job to be done is a framework used to find opportunities to create a new product (or improve it). It made me realize that sometimes, we look at our competitors from the industry perspective and tend to forget to look at the customer’s perspective. (I highly recommend those who are interested in knowing more about it to read this free e-book that explains the concept really well (put the link).

JTBD interviews

During job-to-be-done interviews, you have to pay attention when you find that struggling moment where the user says « I couldn’t do that ». This is where it becomes interesting.

Overall, we got really riveting insights and spent almost 1 hour with each user — we could have spent much more time digging into their pain points, but one hour for the interviewer is already enough :) -.

We interviewed four women between 27 and 30, including one that just had a baby.

empathize with our users thanks to job-to-be-done interviews
Quotes from users during job-to-be-done interviews

In the end, we downloaded the data using an empathy map and prioritized it with dot voting.

Define the problem

With all this data in mind, we defined our problem using the “how might we” statement and found the following:

How might we allow women to interpret and understand better their feelings according to their current phase of the cycle?

How might we give information to women in order for them to take control of their menstrual cycle?

How might we make women want to follow their cycle in the long run?

Once our problem defined, it was time to ideate. We generated new ideas thanks to “Crazy 8” and “worst ideas” workshops. From the great number of ideas that emerged, we dot voted to select the best ones.

Feature prioritization for MVP — MoSCoW method

As we planned to create an MVP, we needed to select and prioritize the features we wanted to include. To do so, we used the simple and efficient MOSCOW method by categorizing them in the different sections:

  1. Must have: mandatory features. By removing them, we would miss the whole goal of the product.
  2. Should have: features that are not crucial to fulfilling users’ needs but which could seriously improve user experience.
  3. Could have: features we’re not sure if they are a plus for the user; features that may represent some ideas to enrich the user experience.
  4. Won’t have: features that are entirely out of scope.

To select our features, we used all the data and knowledge we gained from the discovery phase with our three “how might we” in mind.

Features from MOSCOW method

Mid-fi wireframes

From these features, we created a user flow to have the right architecture information. We quickly started to draw lo-fi to have an idea of what our screens should look like, and then created our mid-fi on Figma.

We were able to improve our mid-fi and iterate thanks to usability testing with 3 users.

✅ What the users liked :

  • Homepage well-structured
  • Visualization of the different phases
  • Page with all the tips
  • Clear onboarding information

❌ What we needed to improve :

  • Onboarding stories: possibility to skip and pause
  • Unify stories and shorter ones
  • Buttons on navigation bar unclear
  • Ask for notifications later in the journey

UI process — Design principles

We then started working on UI and thought about the overall visual design.

Our 3 design principles are the following:

  • Human: Flow is all about people
  • Simple: we want to provide the simplest way to achieve women’s goals
  • Powerful: we want to use simplicity to make powerful things

Brand attributes

As we started thinking about our visual identity, we took some time to define our brand attributes. They basically represent the essence of the brand.

The following brand attributes emerged through a brainstorming session:

three brand attributes: sorority, honesty and trust
  • Sorority: we target women who, every month, have the same thing happening to their body
  • Honesty: our goal is to be honest, transparent, and to allow women to be honest with their body too
  • Trust: women need to trust us but above all trust themselves, trust their body

Moodboard

Following the brand attributes, we created a moodboard to give an overall look and feel of our design.

moodboard

Style tile

We completed our UI elements with a style tile, that would help us have a consistent design and create a great design system in the future.

style tile

High-fi prototype

Thanks to a design critique session, we were able to receive quick feedback on part of our wireframes — « the sooner the better » — allowing us to do slight modifications on our screens.

Desirability testing

We also conducted desirability testing to try to understand what feelings and emotions users had in front of our design.

We used a well-known method, reaction cards, to measure people’s attitudes toward our user interface by a controlled vocabulary test. Users basically had to pick the 5 words that best described the design to them.

words that emerged through desirability testing session

Overall, it was reassuring to see that the words that emerged were consistent with our brand personality (one of our values being “sorority”). We thought we could dig into the word “young” that came up quite a lot to understand better why users chose this word, as we target all people who menstruate, of all ages.

Enough waiting, here is our final prototype 😊 :

Final prototype

An app built for and with our users

Nowadays, people want to reconnect with their body and understand how it works to better take care of it and adapt.

We tried to build the best app from users’ insights and needs. As users want to be free to live their life as they want, our goal was to show them how to take advantage of their cycle.

  • Users tend to forget to input their data in an app we added the possibility to set notifications
  • Users need to have information to better understand their cycle → we created stories with easy-to-read information
  • Users want natural solutions and advice to adapt to the different phases of the cycle → our goal is to create a database of tips based on the holistic approach for each phase of the cycle.

This is the end of this 8-day project! I hope you enjoyed reading it and don’t hesitate to add your feedback if you have any!

Thanks and see you soon 👋,

Julie

--

--