Mapping Changes During The Menstrual Cycle
Keywords: Data visualization, Interaction design
Tools: Adobe Illustrator, Figma
As someone with Polycystic Ovarian Syndrome (PCOS), I’ve always shared an uneasy relationship with my periods. Visualizing the menstrual cycle helped me understand the ways in which my body changes every month, making me more empathetic and mindful of the ways in which it affects my wellbeing and mood.
The height of the blue bars corresponds with the thickness of the uterine lining
The bars in olive green represent estrogen. The bars in purple represent progesterone. These are both primary female hormones. Low levels coincide with crankiness and general irritability. In contrast, high levels translate to an elevated mood.
The bars in pink represent LH levels. The bars in purple represent FSH levels. Both these hormones orchestrate ovulation (release of the mature egg).
The diagrams at the bottom show the physical changes in the female reproductive organs during a typical 28-day cycle.
Adapting The Visualization For Mobile
Originally conceived as a poster, could its utility and outreach be increased somehow? If adapted for mobile screens, the visualization could act as an information tool, say as a part of Apple Health's menstrual tracking feature, or on a medical app, or as a part of a news story.
The most challenging and exciting aspect of adapting the visualization for mobile screens was the constraint of the screen size. The information was divided into macro (an overview) and micro (granular) changes.
Overview of the menstrual cycle, and the changes (uterine lining, follicle number, and hormone levels) that take place
Long pressing on the hormone name shows additional information about it, including what it is and why it is needed
An in-depth look at the different phases (Menstrual phase, Follicular phase, Ovulation phase, and Luteal phase)
One can explore how the hormone levels fluctuate in the body and how they co-relate to one’s physical and emotional state