Clue: Period & Ovulation Tracker

App Redesign

About the Project
“Clue is a menstrual tracking app, an encyclopedia, a resource for your health, and more.”

Clue is a period and ovulation tracking app that allows women to learn about personal patterns with over 30+ tracking options such as cramps, skin, hair, sleep and more. Besides a tracker, Clue provides an ecosystem of learning through the encyclopedia, blog posts and podcasts.

As a user of Clue, I began the project trying to understand how users would use the app to track symptoms that are not preset i.e. how do they use the Tags function. However, through usability testing and generative interviews, I found that engagement with period apps are limited and I set out to understand how women manage their reproductive cycle. I was also interested in understanding how Clue could encourage women to give as much data as possible, with the goal of empowering them at the end of the day. As a woman who has been to the gynaecologist, I can attest how data is power.

(L-R: (i) Home screen, (ii) Calendar screen (iii) tracking screen

UX
Research

To understand the needs of women, I interviewed eight women of varying lifestyles who are between the ages of 18 and 45, based on the assumption that they are likely users of Clue and are more likely to track their periods. These women consisted of existing users, other app users and non-users at various life stages. I asked them generative questions, discovered their existing systems and conducted a usability test with the Clue App.

Task Scenarios Usability Test 2

(L-R: (i) Task scenarios, (ii) Interview

These tasks were designed to:

  • Understand the expectations users had for a period and ovulation tracker

  • Understand if the business goals and intentions were meeting the needs of the users

  • Understand how engagement with the app can be increased to serve the needs of the users

UX Challenges

From the research and discovery process, I synthesised the information and found that:

100% would try to remember the first day of their period

100% would scroll by default to find more information

100% did not quite understand the colours in the calendar

87.5% could not find backache tags and mentioned a “Notes” section would be helpful

   75% would have liked to see a summary for the day and month

   75% were not able to detect selection on the analysis page

   67% found scrolling more intuitive than swiping

My Observations

​In addition to the above conclusion based on the generative questions and tasks, I also observed that 

In addition to sentiments shared by users, I also found that

  • Users tended to shift from a single hand use to both hands during the use of the app due to the nature of the interface that encourages more swiping than scrolling. This I concluded might result in reduced engagement with the app.

  • Users found some of the functions interesting but did not interact with them. For example, the Tracking Options screen allows users to switch on relevant trackers by using the toggle option. However, users corroborated the above observation, that it was cumbersome to switch on what might appear relevant to them.

  • Users also observed the icons in the app and made passing remarks on its relevance. Upon synthesising this information, I have also observed that these icons only appeared once throughout the app and users were not able to form mental models that might have increased engagement with the app.

(L-R: (i) Users shifting to two hands, (ii) toggle function on tracking options (iii) icons used in apps.

Defining the problem

To define the areas of development, I took into consideration the following:

  • Screens that users would use often

  • Increasing engagement while reducing the time required to log data

  • The ecosystem that Clue is building beyond the app and how the app can be integral to that

 

At the heart of it, I was concerned with this:

How can we engage users without overwhelming them? 

I came out with two personas who are likely users of Clue. With these personas in mind, it  aided me with some of the decision making in the redesign to ensure that I made an inclusive and useful app for women. 

Persona.jpg
Ideation, Redesign and Testing

I found that as much as Clue was trying to create an ecosystem for its users, that did not seem to come through in its current app and I aimed to address that. At the same time, I was surprised by the different experience each user went through during their period. The beautiful UI, though consistent, seemed to exclude women who might not experience the norm.

Ideation: Competitive Analysis

I explored other existing apps such as Flo, Woman Long, Natural Cycle and psLove that exist in the market to understand the mental model users would have as well as other non-apps that users used - the good ole calendar. Through this process, I believe it allowed me to make better redesign decisions that could possibly encourage conversions.

Ideation: Educating Women

In my discovery interviews, I asked users on how they approached any reproductive issues and most would prefer to use a search engine in spite of the material available in-app. This was compounded with the fact that all women admitted to not fully understanding their body. With the wealth of information Clue provided, I sought to find ways to improve the product that further empowers its users with knowledge. 

Redesigning the Homescreen

By understanding that different women have different needs at their various life stages, I proposed to have an extended section below the cycle summary that could provide relevant education for the user and feedback after they have entered their data. With the use of data collected, this extended section would provide relevant information that educates users. After all, our users just like our personas, Janet and Sheera have different needs and providing random facts might be less helpful.

This new section would also provide feedback after users logged their data. I have observed that users were often left hanging after recording and there seemed to not be any continuity after they have logged their data. I was lucky to notice that for one iPhone user, a What's New section would nudge at the bottom of the home screen and that surprised both of us as it did not seem to be a consistent consequence. As such in this redesign, by making this new section the main staple, it could be an area users could return and thus make this screen truly home.

Redesigning the Calendar

From the usability testing, all users provided feedback that they were not able to understand the significance of the coloured blocks used in the calendar, even for regular users of Clue. Often they had to press the specific date to find out what the blocks represented. (i) From the competitive analysis, I found that some apps used icons repetitively and I sought to explore that in this redesign. The big red blocks and blue blocks that were used to signify menstruation and fertility weeks respectively also failed to as signifiers for the users. Thus, I used the icons that are already existing to reflect that.

For predictions, the icons would be made outlines. While days that are recorded would be filled with colour. This I believe would make it actionable for the user. Additionally, as users reflected that often they would only record the first day, the distinction between recorded and predicted data would be important.

> Testing the Calendar

Users explored the calendar and found it to be cleaner and the icons were quick to be understood. Although one of the major concerns they had were its legibility. Especially if enough data is recorded, would it be obvious enough? They reflected further that the calendar might appear cluttered and this would be in the way of their primary concern: knowing when their period will happen.

Redesigning the Tracker Screen

One of the major redesigns in this app was the tracker screen. While the UI was beautiful and functional, I found that it was restrictive and resulted in limited interaction. During this screen, I have observed users having to change how they use their phones and their resistance towards exploring further and adding more trackers that might be relevant to them. 

 

The swiping function though clean and reflects the likes of popular apps such as Tinder and e-commerce, it demanded a lot of effort with minimal yield. As such I have decided to move away from the original design to one that is linear, more vertical, provides the user with information quickly and enables the user to take stock of their health with one hand.

> Testing the Tracker Screen

There was increased interaction with the screen and users were quick to log their data and they logged more data. They further commented that the notes section would help for annotating anomalies.

The linear visual trend also guided the user to check out the tracker options page easily without prompt as compared to the existing screen.

Through this exercise, I saw the possibility of customising the options for the trackers so that it would make the app personal for its user. However, I recognise that on the back end, it was an area that would need to be configured and in a larger scheme and process of things it was worth questioning if it could make the app less efficient.

Redesigning the Tracker Options Screen

To increase engagement while reducing time, I researched on various switches options used in apps and have decided that we would require a solution that is immediate and something that would break the text-heavy look that exists currently which seems to be incongruent with the rest of the UI. Additionally, with the elimination of the swiping function of the trackers, we could use the library of icons to allow users to visualise the trackers they are activating, instead of just words and 20 over toggle switches.

> Testing the Tracker Options Screen

Users interacted more with this screen and there seemed to be increased likelihood for them to turn on the trackers that would be relevant to them. By clicking on the buttons that would be symbols in the hi-fi prototype, users would know that the trackers have been turned on by the colour change.

Clue_App_Redesign_izyan
P2 User.jpg
Clue_trackingscreen_izyan
Clue_trackingoptions_izyan
Final Prototype

With the feedback from the user testing, I mocked up a high-fidelity prototype. While the final prototype was almost extracted from the paper prototype, one of the major changes within the prototype was the calendar. With the limited space within the boxes and the amount of information that could be received, we returned to the initial question - How could we engage users without overwhelming them?

A return to the synthesis of the information from the interviews and user testing was once again this - users simply wanted to know when their next period was. With this, I redesigned the calendar to make it minimal and just showing the main parts of the menstruation cycle - the period and fertility week with the option for users to filter the trackers that they would like to track.  This is corroborated with the fact that users tended to only look for trends when they experience a specific symptom and even with the existing interface, users had to under the specific date to understand what the colour blocks would mean.

View the full demo here.

Final_Clue_Homescreen_edited.jpg
Clue_Calendar.png
Clue_TrackingOptions_Default.png
Clue_Tracker_b4pill.png
Clue_Calendar_SELECTHAPPY.png
Conclusion

I had opted for a paper prototype and I believed that this helped with the speed. Additionally, as the original app is responsive and provided feedback, the ability to prototype it fast enough was not possible. 

 

In this project, the limited time frame compounded with a long public holiday in between meant that I had difficulties getting the same users to test the first prototype. To work around it, I used my first group of users to inform my design decisions and in the second group of users of similar diversity, I was able to have them test out the existing app and the prototype at once. This I realised can be quite effective in gathering additional feedback about the existing app and improving both for the next iteration. 

 

I had also wished I had recorded the time taken for the interaction and to solve similar tasks as a form of data to back up my design decisions. After all, data is power.

There are more ways to go in femtech and more research is required in understanding the female body. But as much as women wanted to know more, they were not willing to dedicate their complete attention. This comes as no surprise in a world that demands your attention. Perhaps the reproductive system can be seen as inventory management for businesses. How can we help women, without pulling them away from the things that demand their attention?