Clue Events
We designed an add-on that lets Clue users sync and track their menstrual cycle as events on Google Calendar.
Timeline
Feb-May 2023
Team
Claudia Cui &
Zhitong Liu
My role
User research,
Prototyping,
Strategy,
UI design
Tools
Figma
Dovetail
FigJam
Illustrator
"Claudia and Zhi have put the spotlight on an important use case for period tracking apps and have come up with a user-centric solution that goes in line with our learnings here at Clue. Their design is clean and structured and efficiently solves a big user need we have identified in the past"
-Marcia, Experience Design Director at Clue
Period tracking lacks recognition
Menstrual tracking is often done and contained in one single mobile app. Unlike many health or workout apps, there has been less emphasis to create integrations or add-ons for menstrual trackers. In 2023, menstrual health remains an under-researched topic.
Menstrual cycles as calendars
Periods are essentially bodily events, they run in cycles like a schedule or calendar. In every period app, there is a calendar view of the cycle, which is an integral part of the functionality.
Why Clue x GCal?
Clue stands out as one of the most used tracking apps with more than 10 million downloads on the Play Store. It’s designed to be highly functional, with an emphasis on data privacy. Google Calendar is a popular platform accessible online and known for being add-on friendly.
How might we integrate menstrual health tracking on a time management app?
Existing integrations?
To start, we looked at how other health-related integrations were implemented and what other period apps were doing in terms of add-ons. We also analyzed current add-ons on Google Calendar.
Findings
Only 1 period app has ventured to bring their data on an external calendar.
Most GCal add-ons pertain to video conferencing and the rest, to time and task management.
iOS and Android both debuted period-tracking functions within their respective health apps, however there is no crossover within the main calendar.
Currently there is no GCal add-on that centres around menstrual health.
An evolving goal
At first, our goal was to maintain tracking consistency by expanding the Clue platform. However through qualitative user research such as interviews and digital ethnography, we realized that the bigger picture was more so focused on monitoring changes in your cycle — being aware of how your lifestyle affects menstrual health and vice-versa.
By interviewing both experienced users and new users, we realized that the longer users tracked their period, the more in tune they were with their cycles as it pertains to events in their life.
“I started questioning why I was feeling like that and I thought: maybe I should start checking the app. It has taken a couple months or even years to identify those kind of waves.”
From new to experienced users
From the interviews, we mapped out two main personas that could benefit from the integrated menstrual features on GCal.
Analyzing Clue’s user flow
In order to see what features we want to include for the integration and how to translate period tracking on the calendar, we mapped out a period-tracking flow for the Clue app.
Simplifying the Clue experience
We noticed that Clue offers an overwhelming amount of symptom logging options, with many required steps prior to saving. While that makes sense for users who want to manually control tracking options, we decided to simplify that for the integration.
“Tracking periods feel like a task.”
Ideal integration vs. technical constraints
From our research and user insights, it would have been ideal to have the interactive components built directly on the calendar. However, due to Google’s constraints, we have opted for a different approach.
Optimizing design functionality within Google add-ons
We decided to keep our design on Google’s add-on window, using Google’s UI kit for add-ons in order to assure functionality.
Clue’s functional look and feel closely aligns with that of Google. As such, we opted to use the provided UI elements by altering colors and adding branded illustrations to enhance Clue’s presence.
Understanding tracking needs on GCal
Unlike the Clue app, the main reason for the add-on is not to track periods, but to view daily events parallel to menstrual data. For this reason, we decided to only keep the most integral features of the app.
Log Periods
Track Ovulation
Predict Next Cycle
Final add-on
Clue Events add-on allows users to sync their data, log their current period, or choose a range of days to log. Google Calendar will sync existing cycles from the Clue app and create events and reminders.
Unique experiences
During the testing stage, we realized one thing about menstrual tracking: users had incredibly varied needs depending on their menstrual habits, symptom severity, and lifestyle.
For example, some wanted to see ovulation events but others only needed period reminders. We decided to also add a “settings” page to let users customize their desired notification time and toggle on ovulation.
Despite their differences, we did notice some patterns in user feedback when testing our prototypes.
Menstrual tracking actions and icons
We discovered that some actions such as "track period" were heavily associated with certain UI elements. For example, users did not understand the purpose of "track period" on desktop when it was separated from the + icon.
We also edited the visual hierarchy to emphasize this action, as it is the most important part of any period tracker.
Changing date picker features
People wanted the option to change or track their previous cycles. Since forgetting to log a day or two is a common experience, we added the option to select multiple days at a time on the date picker.
Link to Clue
Many users wished to learn more about their period and expected to find a link to the app page (on desktop) or to the app (on mobile).
Features Overview
Here are some of the main features of the final add-on.
1/6
One-click period logging
With a single click, users are able log their period for the current day.
2/6
Add forgotten periods with date range picker
Forgot to log a few days? Add them all at once by selecting a date range.
3/6
Real-time syncing with Clue
Allows your tracked cycle on Google Calendar to sync with the Clue app.
4/6
See predictions while planning future events
Future predictions will show up automatically on the calendar as tentative events.
5/6
Custom settings for different needs
The settings let you control your reminders and toggle on ovulation events.
6/6
Clue events on mobile
While add-on features only work on desktop, mobile users will be able to see events and navigate to the Clue app.
Looking back
Making compromises
During the testing phase, we noticed that people had to tendency to click on the calendar days directly to add, but for the sake of functionality, we had to keep our controls on the add-on window.
Generalizing menstrual experiences
We understood that people from different backgrounds, of different bodies experience and value their menstrual data differently. Although we can’t cater to everyone’s unique cycle, we would like at add more setting options if the need arises.
