Menstrual Education App — The Grand Book: UX/UI Case study

ginger.
7 min readFeb 25, 2024

--

Time for our forth project at Ironhack UX/UI Design Bootcamp. The goal was to build an app that could provide a solution for wellness and health. The timeframe was of 10 days. The group was made out of 3 students and we used Figma!

Our team aimed to find an unmet need in the wellness app market. This prompted us to envision a menstrual app that not only fulfilled its primary purpose but also served as an educational tool, helping not just individuals who menstruate but also aiming to bridge the knowledge gap for men.

We embarked on a desk research journey. To our surprise we discovered that not only men, but also those who menstruate did not have a proper understanding of the menstrual cycle. We discovered some staggering data and it became clear that our focus needed a shift towards creating an app to provide valuable insights and assistance on this crucial topic.

Problem statement

People who menstruate (but not only), need a reliable and personalised source/platform of information about menstrual health, because they feel they trust more on personal experiences and very often they feel overwhelm and lazy to use the current apps that not necessary fulfil their needs.

Main Desk Research findings

Our research

We conducted interviews on 7 individuals and had 49 people participating in our survey located in Portugal, France, Uruguay, America and Cuba, ranging from 18 years old to 55 or more.

We gave people freedom to share any additional thoughts or comments about menstruation, education, apps, or related topics.

We concluded that the majority of people know there is a lack of education about the subject and feel the need for themselves or others to have a better understanding. Even tho the majority of our participants were women, men also expressed a desire for a better understanding, because they wish to be able to help and understand better their loved ones.

We also found out individuals often trust on personal experiences and healthcare professionals more than online sources due to the overwhelming volume of information (and misinformation), available online. The problem lies in the difficulty of consistently finding a nonjudgmental and inclusive environment, and accessibility to proper healthcare can be an issue at times.

Benchmark

We started a benchmarking on the most common menstrual tracking apps. These were the Flo app, Eve by Glow, Apple Cycle Tracking, Clue and Life.

They share strengths, such as support from healthcare professionals, prioritising data privacy, maintain a gender-neutral design, and often sync with other health apps, enhancing their overall utility. However, common weaknesses include intrusive marketing for premium versions, limited access to advanced features, and concerns about data privacy. Symptom prediction capabilities are criticised for being basic, and consistent data input is required for accurate predictions.

User persona

Empathy Map

How Might We statement

Ideation and concept — The Grand Book: A Non-Profit Collective Project

The Grand Book stands as a non-profit initiative, dedicated to providing the finest, transparent, and secure information about the menstrual cycle. Funded by a diverse array of supporters including users, institutions, governments, and philanthropic Non-Governmental Organisations, The Grand Book pledges to keep its content free. It’s unique approach involves a collaborative framework where users can expect reliability on personal experiences through a badge system.

The way we could bring a sense of community to the app, was a very debatable topic. We discovered often times individuals rely on forums with comment sections to pass misinformation. We solved it by incorporating a badge system to validate personal experiences and add a layer of trust and credibility, diminishing the risk of f misinformation that is often found in online forums.

The app aims to cater different age groups, genders and educational backgrounds. We designed an AI to help tailor the topics related to what the user wants to learn, so that regardless of his level of knowledge, he has the chance to access the best information regarding his goals when using the app.

Users are guaranteed anonymity, ensuring a safe space for exploration and learning. The Grand Book envisions a world where understanding the menstrual cycle is not only accessible and reliable but also tailored to the diverse needs and preferences of its users.

Mid-Fi

Style guide

The app intentionally avoids reinforcing gender stereotypes in its design. It breaks away from traditional norms and embraces a more neutral aesthetic. We designed it to be inclusive, it’s meant for a diverse audience regardless of gender. Inclusivity was a core principle guiding the development process.

Adding a touch of colour! Choosing the right illustrations was also very important to us. During our testing we realised we had to be very cautious on the messages the illustrations could transmit. Our goal was to convey emotions through the strategic use of shapes and colours. For instance, in the menstrual cycle phases feature, we carefully chose illustrations based on keywords and feelings. This approach contributes to a distinctly contemporary aesthetic.

Main screens

For the onboarding we kept it simple! We explain what The Grand Book stands for, how privacy is being handled and we help you personalise your feed with the help of an AI. On the last screen we give the user freedom to deselect the topics our AI chose for him, in case he’s not interested, and we give the user space to select different topics.

For our homepage we have a place into which the user can find all of the apps features. The second screen is the article homepage. On this page the user will see related topics to the personalisation he has done before. We give user freedom to edit those topics at all times on the plus icon.

As for the article page, we designed as the standard rules for reading apps. We made sure to have a play button for the user to listen, we have the reading time, numbers of reads and in the end of the page the badge system!

A space where people can easily understand how the menstrual cycle works! We used smart animate to create a looping carousel which goes through all of the phases.

On each page the user will find: a brief explanation of what happens to the body during each phase, the average duration of it and in the end they can see what symptoms to expect. The symptoms are buttons to articles about each one of them (you can see them on the video bellow), so that they have the change to easily get their questions answered or to simply learn more. We also give the users the chance to input the date of the last period in order to find out into which phase they currently are, and what to expect next.

This is a place where the user can visually see how the uterus works when going into each phase. We used an illustration for the purpose of creating the prototype, but the goal is to have a 3d anatomic model of the uterus.

Prototype

Insights and next steps

After the Hi-Fi prototype, our focus shifts to testing and iterating the process. The primary learnings revolve around assessing users ease of navigation within the app, understanding their emotions during the interaction, and evaluating their comprehension of the menstrual cycle information and augmented reality features. Key questions include understanding users willingness to install the app and the reasons behind their decision. Additionally, aiming to identify any potential shortcomings in the app, and uncover opportunities for further enhancing the overall user experience in alignment with our goals.

One of the key challenges presented by this bootcamp is the need to effectively collaborate within group settings while navigating a remote work environment. Throughout this journey, I’ve honed my ability to collaborate with individuals from diverse cultures and backgrounds. The takeaway from this experience is the opportunity to connect with remarkable people and acquire essential skills that will with no doubt contribute to my success on the forthcoming path as a UX/UI Designer.

A special thanks to my team mates Fanny Pezet, and Mau Bigliante for their exceptional dedication to this project!

Thank you for reading!

--

--

ginger.

Product designer dedicated to user-centric experiences