Pratt Institute, School of Information
Prof. Allen Yee
Spring 2019
Prof. Allen Yee
Spring 2019
The truth is, period trackers aren't just for women.
We were all sitting around my kitchen table drinking wine, as one does on a Sunday morning in my home, when my friend announced:
"UGH! I'm tired of all the flowers and cutesy shit. I want a shark."
You see, my friend had just opened their period tracker and was greeted by a wall of flowers. My friend, a non-binary assigned female at birth (AFAB), was done dealing with all the flowers, babies, and the color pink every month since period trackers became a thing.
Period trackers predict hormone cycles and provide accurate historical data for doctor visits.
"My Calendar - Period Tracker" by SimpleInnovation, the tracker my non-binary friend uses due to the convenience of its features.
Period trackers provide some important functionalities:
- Predict the start date of the user's next period or fertility window.
- Warn the user ahead of time so that they can purchase products and alter plans.
- Track useful information that can be brought to a doctor.
Many women use these apps to assist with family planning, but it turns out that a population of users do not identify as women and are attempting to achieve different goals.
AFAB individuals can experience gender dysphoria, often triggered or exacerbated by their cycle.
"It feels like I'm wearing a goo-suit I can't take off."
Gender dysphoria can be experienced without identifiable cause, but it is often triggered by a range of social situations, clothing (getting dressed in the morning or while shopping), and in this case menstrual cycles. Gender dysphoria often sparks feelings of shame and extreme physical discomfort, so many AFAB individuals rely on these apps to physically and mentally prepare for upcoming changes in their body.
Unfortunately, sometimes the app itself triggers gender dysphoria.
"I feel like these apps are just catered toward 'hey, how about you go ahead and hate yourself for the next five days.' But I use it anyway because I need the warning for next time."
After my friend's first outburst, I started asking around. Time and time again, I heard stories of how the visual design of period trackers sparked disgust in my non-binary friends, and sometimes even made them feel dysphoric.
When I realized this might be a problem worth solving, I ran a competitive analysis to wrap my head around the apps already out there. I downloaded 10 highly-rated period tracking apps, all of which were rated 5 stars with over 1,000 reviews on the Apple Store.
Each app was analyzed for:
- Apparent audience
- Tone (three or four words that describe the feeling of the app)
- Primary and secondary colors
- Primary Visuals
- Onboarding experience (required information)
- Login methods (if any)
- Cycle phases tracked and views of cycles
- Additional features and upgrades
This competitive analysis includes 7 top-rated apps from the Apple Store and 3 apps specifically advertised as gender-inclusive.
This competitive analysis lead to the following findings.
Finding #1: These apps are almost exclusively designed with gender norms in mind.
7 apps into my analysis, the results across the apps were so similar that I hit pause.
A search for "Period Tracker" in Google Play store returns a wall of pink, flowers, women's bodies, and pregnancy themes. The Apple Store returns similar results.
Of the 7 apps, the target audience age varied ("teens," "20s," "30s and older.") However, all 7 apps expressed a traditionally feminine design:
- 7 of 7 use the word "woman" or "female" in the UI
- 6 of 7 use pink as a primary or secondary color
- 5 of 7 use flowers in the visual language
- 4 of 7 use female bodies in the visual language
Finding #2: These apps are primarily used to sell products and services related to pregnancy.
It seems that the economic model for these apps is to provide some tracking and predictive capabilities for free and then charge for analytics to assist with pregnancy. Alternatively, the apps include advertisements for doctors or services like IVF or egg freezing.
Advertisements from Glow's Fertility Program can't be avoided, even when the user specifies in the app that they're uninterested in these services.
After seeing this, I decided to do some online research for period-tracking apps that specifically advertise gender-inclusive design.
Finding #3: Clinical alternatives exist. But without sharks.
While these apps are difficult to find without specifically looking for them, I did find 3 apps with a gender-inclusive design. These were included in my competitive analysis.
Apple Health
Spot On
Clue
Apple's Health app, Spot On by Planned Parenthood, and Clue.
Apple's Health app includes a "Reproductive Health" section that includes "Cervical Mucus Quality" and "Menstruation" categories (ew.) On the other hand, Planned Parenthood offers a period tracker, Spot On, which is designed to be gender-inclusive and also tracks birth control information. Clue is another gender-inclusive app, complimented by a seriously cool and informative website.
Excited by these finds, I brought these apps to my user group for feedback.
"Sure, it's okay. But it's not me."
"Not me?" I wondered. Tell me more.
It turns out, for my user group, period-tracker apps are an extension of their gender expression.
I brought these gender-inclusive period trackers to 5 non-binary individuals and asked for their thoughts. I learned that the information they choose to share with these apps is very personal, on the level of a private journal. Identity is also a highly held value for this user group, with clothing and hobbies as top mentions for gender expression.
The three apps I presented were described as "boring" and "uncomfortably clinical." These gender-inclusive apps were probably designed this way in order to prevent triggers for gender dysphoria, but it seems that the design sacrificed a sense of personality in the process.
I suspected that the dissatisfaction with gender-inclusive apps currently on the market comes from this user group's desire to craft and maintain their gender expression, and these apps, which contain highly privileged personal data, don't provide a satisfying level of control over the expression of their information. But what to do about it?
Is there a balance between gender-inclusivity and gender expression?
"Look at men's products. It assumes men don't like to be colorful."
Apps like Clue may work well for many individuals who suffer with gender-dysphoria during their period, but for a slice of non-binary folks looking to cope through more personal expression, I felt that a creative medium could be found.
I conducted a participatory design session with 5 AFAB individuals who use these apps.
I wanted to run a participatory design workshop in this case because I was working with a marginalized group of users who likely had strong opinions on how to solve a familiar problem.
Professional backgrounds attending the workshop included artists, designers, and engineers, all of whom identified as some form of AFAB and were excited to create a new app to fit their needs. It's notable that no one in attendance self-identified as trans* and so the results of this project are heavily skewed toward non-binary users.
The workshop was run with dry erase boards, thought being that a more temporary form for potentially sensitive information might encourage more sharing.
To keep the conversation structured and expressive, I formatted questions as drawing prompts. Each participant was given a 9" x 12" dry erase board and a marker of their choice. For each prompt, I set a 60 second timer for drawing. Afterward, participants took turns talking about what they drew.
I allowed open conversation throughout the workshop so long as we remained on topic and only one conversation was had at a time. The workshop came to 3 hours in length. (And it was really fun!)
ICEBREAKER / BUILD PROFILES
Let’s have some fun...
1) Let’s talk about gender. What does the spectrum look like?
2) If you were a non-human entity that matched your gender expression, what would you be?
ISSUES
Let’s get real...
3) Let’s talk about period-tracking apps. What app do you use? What does it look like? How does it make you feel?
4) Split your board into thirds. Draw a story about a moment before, during, and after your most recent period.
5) Have you ever experienced gender dysphoria? If so, draw a picture of the most recent experience.
6) Let’s talk about making life easier. What makes you smile or brings you relief when any of this gets your down or you’re not feeling well?
DESIGN TOPICS
Perfect world, where anything is possible...
7) What does the app icon look like? Where do you keep the app icon on your phone? What is the label for the app?
8) When you open the tracking app, what does the home screen look like?
9) What visual theme does the app have? Draw a mood board that features different components of the design.
10) What is the best feature in the app? Draw a few screens or segments of the interface to show how it works.
WRAP UP
11) What else do I need to know about this app to make it work for you?
12) General discussion!
The workshop was split into two main segments, one to discuss issues so that I could get more familiar with their needs, and one to discuss design ideas for the app itself. Out of this workshop, I learned some interesting things.
Finding #1: For this user group, gender isn't definable.
One response to the question "What does the gender spectrum look like?"
"We cannot comprehend it. Gender is the fifth dimension."
While gender norms were clearly recognizable to this group, the reality of gender was complex, defined by the individual, and sometimes flexible within the same individual. This meant that my app would require a wide range of options for expression and be easy to change based on the user's desire.
Finding #2: These users crave empathy for their experience, but also want to maintain privacy.
One story about seclusion as a repetitive, inevitable experience.
Throughout the workshop, stories were told about how gender dysphoria and other bad experiences resulted in a sense of isolation from others. Later, when participants were asked to draw the icon for their ideal app, they responded with characters.
When asked to draw the app icon, participants responded with characters.
“I had this idea that I could look at the app, and nobody knows what it means except for me and this little guy.”
Participants were looking for both companionship and privacy from their ideal app. While some existing apps offer online communities, for my app, I felt that some kind of character and storytelling could be used to meet the need for empathy while maintaining the user's privacy.
Finding #3: Utilitarian function, obscured design, and creative expression, all to combat anxiety.
Participants insisted on a calendar design for the home screen.
Despite the quirky characters that appeared on the app's icon, the overwhelming response for the home screen was a calendar.
"I hate opening my app and it's like PERIOD. 5 DAYS. It makes me look over my shoulder every time."
"There are so many apps out there with calendars. Nobody needs to know what this means but me."
"When my period is coming up, I start getting paranoid. I just need to check the app sometimes, but I can't do it in public."
When it came down to it, the essential function of period-tracking apps for this user group was to ease anxiety by providing a warning, but current apps on the market, even ones with a gender-inclusive design, had home screens that advertised its function and resulted in social anxiety.
Participants opted for a obscured, purely functional design on the home screen, but at the same time they expressed a need for creativity throughout the app.
On the left, a mood board showing the analytics screen with artistic layers of information. On the right, the ability to switch themes identified as the best function in the app.
While clear design ("this is a period-tracking app, and you have 3 days left before your period starts.") might be best practice in general, for this user group, advertisement of functionality causes anxiety. Participants wanted to control the appearance of their information and turn it into something they enjoyed looking at.
As a result of these findings, I decided that using metaphors in the app and providing some onboarding to set up the metaphor might be a reasonable solution. They should also be able to modify the metaphors and appearance of the app to fit their mood.
Research and requirements in hand, I began iterating ideas on paper.
The first thing I do is just get thoughts down on paper in any order.
I felt that theme customization could be the primary selling-point of the app. The user would start with a base set of themes, and more could be added with in-app purchases.
I used a site map to get a handle on how to organize a few key features for my audience:
- initial setup for the app
- a discrete but informative home screen
- theme customization
- notification settings
- basic analysis of data
From there, I was able to iterate ideas for key screens: the calendar home page, daily details, and theme customization.
In my site map, I included analytics because it was a somewhat standard feature of period-tracking apps and it had been mentioned once during the design session. But as I was trying to work through the analytics screen (what exactly was being analyzed, and for what purpose?) I realized that the needs of this user group could be met without a separate screen. Indeed, when I tested the prototype without analytics, it wasn't missed.
Side Note: It is possible that the analytics screens in period-tracking apps are most helpful to provide information during doctor's visits. While day-to-day interaction with the primary user was covered in this project, perhaps including a doctor's perspective in the development of this app would bring back a need for analytics.
These screens were used to talk through the project with my professor at an early check-in.
Onboarding for this app already looked overwhelming, so I trimmed it down on paper and tested the length in a low fidelity prototype.
I split the onboarding into three conceptual phases: cycle, privacy, and theme selection. After drawing out the flow, the onboarding appeared too long. To cut down the size, I removed theme selection and decided to rely on a "Shark Week" default theme to get the user started, and I moved the passcode phase into the settings menu.
Once the idea was approved on paper, it was time to build the low fidelity prototype.
I wanted to learn:
- How does the onboarding process feel?
- Do users understand how to input notes?
- Does updating the calendar create a moment of payoff?
- Do users understand how to change their theme?
The very first version of Shark Week included only enough screens to test my questions.
This prototype from start to finish went through 6 iterations of testing with non-binary users. Here's what I learned from the process.
Correct verbiage during onboarding was critical to building trust.
Overall, the onboarding experience didn't feel too long, and the information it asked for felt relevant and reasonable for the app. But I had to work to refine key moments in the process.
The welcome screen.
The welcome screen needed to explain why this app was different from all the others without getting wordy. Initial critique was that the app was too similar to the gentle tone of existing apps. The bold theme of the final product inspired raised eyebrows, grins, and the words "hell yeah" from my users. The phrase "Let's Start" also inspired the feeling that the user wasn't in this alone.
I knew from my research that setting up a metaphor during onboarding would be important to the functionality of the app, but my first prototype missed that mark entirely. Presumably, Shark Week would be downloaded by a user after hearing about it from a friend or searching for period-tracking apps in their app store. They already know what this app is, so onboarding can leap right into the humor of its brand and rely on subheadings to clarify if necessary.
Removing the word "period" from the large heading made users feel more comfortable. They knew right away that this app wouldn't advertise their personal information to passersby.
These two questions were necessary to set up the app's predictive function, but they were also the most personal and hardest to correctly ask. A few key changes made all the difference:
1) By continuing the metaphor through these questions, it made the experience more comfortable for users.
2) Offering the national average on these screens was intended to help the user select default information in the event they couldn't provide real answers. However, the initial reaction was, "I'm different. Is something wrong with me?" When the UI explicitly stated what the information was intended for, the reaction went away and users continued without comment.
3) The length of time from the start of one period to the next was the least thought-about piece of information that the app required for setup. It was a strange question to ask, so it took several iterations to reach "How often is Shark Week?" which users finally understood.
Given the level of control my users required, I felt that it was important to ask which information they would like to track (and thus display in the UI) as well as explicitly ask permission for notifications during onboarding.
At first, I was concerned that these two extra steps might make onboarding feel too long, but this turned out to be the highlight of the onboarding experience. The questions were respectful and felt empowering.
Later, I looked for opportunities to plus this experience, so I added a preview of what the notifications would look like. After doing this, almost every user opted to have notifications turned on.
Design concept: a calendar app that conforms to your schedule.
Instead of updating calendar art according to the month, why not update according to the user's cycle?
Calendar art by Beckah Murray, created for this project.
Seeing the calendar artwork update when the user inputs their information inspires a bout of laughter. This is the payoff I was looking for, but the behavior for how to produce this payoff wasn't obvious at first.
The first prototype failed to produce the laugh I was looking for.
Even though the calendar art changed, the users sometimes didn't even notice it. To get the payoff, I returned to my animation roots. In feature animation, you learn that audiences love to watch the moment a character's expression changes. So I changed to prototype to display calendar art on the "today" screen, and people started to laugh. The payoff was in watching the character react to the user's information.
Shark Week tells a story that users uncover over time.
All is well.
PMS
Period
Fertility Window
As the user's cycle progresses, the app updates the artwork. As artwork is discovered throughout the month and the user learns what it means, they can peek at the artwork on their home screen and know where they are in their cycle without ever having to deal with blatant displays of personal information.
Shark Week doesn't gender colors.
The first high-fidelity prototypes used bold colors and avoided the pink and purple hues used in other apps. However, my users keyed into the obvious effort to avoid "female" colors.
"Not-feminine doesn't mean more masculine."
"Pink doesn't bother me. What bothers me is when people gender colors, which are inherently genderless."
After this feedback, I tested versions of the prototype that included a range of bold and soft variations, which were much better received. While "Screw Pink" was an eye-catching and positive message during onboarding, in practice users wanted to be able to choose pink if they so desired.
Each theme in Shark Week is inspired by a user quote.
Obviously, the "Shark Week" theme is inspired by my friend's initial outburst. Here's where the other themes came from.
“Periods are metal. I feel like a viking warrior running into combat, screaming and covered in blood.”
"Dungeon Crawler" started out as "Viking Warrior," but initial sketches for this quote were too intense for the tone I was trying to strike. I softened the idea to a DND-inspired theme, featuring a genderless dwarven warrior.
“I do everything I can to stay really chill the whole time. I need to remember to breathe and relax. It’ll pass.”
For each theme, I endeavored to pick colors that highlighted different aspects of the artwork. In this example, there's blue from the water, orange from the fish, green from the lilypads, and purple from the flowers.
“Humans have a thing where they define everything around them, and I don’t know what to do with that. So I just want to get into a spaceship and fly away.”
I wanted to include a theme that took more risks with appearance. Many of the drawings from the participatory design session had quirky personality, so I wanted to capture that here.
All-in-all, my users loved the end product.
It was a fantastic feeling to see people light up as they uncovered all the quirks of the app made for them. This project was presented to my class at the end of the semester. (Slides provided through the image blow.)
I loved working on this project for the opportunity to highlight the voices of users that aren't often heard. It was incredibly fun to work on and the results received a round of applause at the final presentation. Thanks to my professor, guest judges at the final critique, classmates, and of course all my wonderful users!