anh.
An end-to-end mobile design for a period & ovulation tracker. For the modern day woman, taking ownership of their cycle; empowering and educating women through content & connection.
Role
UX/UI Designer
UX Researcher
Team
Solo
Timeline
October 2022
Practices
Visual Design, Interaction Design, Branding
Tools
Figma, Miro, Mockflow, Google Forms
The Background.
Women’s healthcare services and products have been increasing in demand over the past decade. Thanks to the shift towards digital care, ongoing efforts and open dialogue around sexuality, gender equality and mental health, what was once traditionally taboo in an underserved market is now no longer (and rightfully so) met with shame and humiliation. However, we still have ways to go on improving and adding more platforms to support women’s wellness issues from menstruation, fertility, motherhood, and menopause, to sex, relationships, nutrition and finance through a female lens.
For some with limited health insurance coverage and limited people to turn to, we need a product a female can feel safe to use any time and any day to track her menstrual flow, easy-to-read material to educate herself and a community she can reach out to for any support and guidance. Having an easy-to-use, reliable and accessible app she can use at the tip of her fingers would be ideal for the modern day woman.
The Problem.
There is an underwhelming amount of accessible and quality apps for females to track their menstruation, stay educated and connect with other females on their health and shared womanhood experiences. Although there are several great apps on the market, there is still significantly limited options in the industry, especially apps that don’t require users to pay and subscribe in order to access certain features or content.
The Objective.
To build a user-friendly, enjoyable, accessible and reliable mobile app for females to access and use to track their menstruation, stay educated and connect with other females on their health and shared womanhood experiences.
The Solution.
To understand user needs, motivations and a clearly defined problem users are experiencing in order to develop an easy-to-use and enjoyable period tracking mobile app that does more than just track a period cycle.
The Process.
I put into practice Design Thinking as the primary user-centered design methodology and its five modes of thought, to gather insight, solve potential users’ problems and arrive at the overall concept for the product.
-
I do empathy research to better equip myself in understanding the users’ emotional, social and irrational drivers that affect the way the users behave; thus, allowing me to develop insights that seek to address their needs. The gaps between what users do and what they say they do are where we find design opportunities. A common mistake is using one’s own biased assumptions and creating a solution we see fit for ourselves, and not for the user or team.
-
The main goal of this phase is to make sense of the data gathered from the research and clarify the details around what will be created, why, for whom, and how. I begin to form the hypotheses and put together the structural design of content- the information architecture.
-
Here, I begin to brainstorm and conceptualize the product. Incorporating information architecture, interaction design, the usability and accessibility of it, task flows, user flows and mocking up wireframes.
-
In this phase, I create our prototypes- low-mid fidelity wireframes with interface designs and responsive visuals. The focus is on how the product will look, feel and be used. Then, I begin the evaluative process on our prototypes.
-
The last stage of the design process is to polish up the prototype using any feedback and insight given. Typically, the testing is performed by several potential customers. Once learnings are received, I summarize and implement continued iterations.
1. Empathize
To research and learn what our users look for in period trackers, what motivates them and what makes it enjoyable for them.
Identifying current & potential pain points.
Determining features & functionalities most suitable & enjoyable for users.
Examining a user’s thought process.
Conducting primary research through interviews, competitive analysis, persona creation.
1.1 Competitive Analysis
Distinguish similarities, differences, strengths and weaknesses of existing competing period tracking mobile apps.
My Thought Process
I began by searching up fem tech to inform myself more on this market and funnelled my way in to women’s health, specifically, reproductive health and menstruation cycles.
I then looked up popular and most highly rated period tracking apps on Google and in the Apple app store.
I downloaded 5 apps, signed up and analyzed each of them. Here are my notes and what I got overall from each of these apps.
Competitive Analysis Findings
Most apps were simple and clean in terms of ux and ui, with great content.
Certain apps focused on community/social contribution, some focused on self-care, some focused on conceiving and parenthood, some focused on health.
All apps had limited access to content and features unless user pays a subscription fee.
1.2 Questionnaire
Gain insight on individuals’ wants, needs, motivations, beliefs, behaviours, shared experiences, emotions and thought processes.
After analyzing the apps, I made a list of all the common features in the apps to ask consumers about. I then sent out the link to be filled out to as many friends, family members, colleagues at work, and classmates on Designlab’s Discord community, as well.
There were 24 participants who filled out this questionnaire. There was one participant who has never used a period tracking app before.
I see that all participants who have used a period tracking app has seen all the listed features and more, such, as LGBTQ+ content and biology of female anatomy. One person said she doesn’t remember all the features.
Majority of participants, over 80% of the participants, mostly used logging of their personal health and/or cycle-related experiences in their period tracking app, followed by 37.5% of participants using it for fertility content, and 16.7% using their app for women’s health content. Only 1-2 participants really used the other features listed.
For this question, majority of participants are interested in seeing more of the following features or wish these features existed in their current period tracking app, in order of most voted- nutrition content, community forums, logging of personal health and/or cycle-related experiences, and women’s health content.
In order by most wanted, over 91% of women want to track their blood flow and symptoms, followed by moods/energy and sex/sex drive at 87.5%. Birth control/ medication/supplement tracking came next at 83.3%. After that, 75% of participants would also like to track food cravings, water intake, and diet throughout the day. Lastly, 60-70% of participants would also like to track exercises, cervical mucus, and then amount of sleep.
For this question, I wanted to understand how many and why ladies were discontinuing the use of their period tracking app. 58.3% are still using a period tracking app and 41.7% are not.
This shows about 71% of women want women’s health info/support in addition to period tracking in their period tracking app and approximately 29% of women prefer a period tracking app that only tracks their period.
Majority of participants, over 83% want to be able to log their personal health info and/or cycle-related experiences on their ideal period tracking app. Following that, over 62% of participants prefer to see fertility content. In addition, 58% of participants want to see women’s health content. These 3 features seem to be the most popular on a woman’s ideal period tracking app. Nutrition content seemed to be preferred as well, with 41.7% of participants choosing that as one of the features they’d prefer on their ideal period tracking app.
To summarize, main reasonings for stopping use of a period tracking app were regulated period already through birth control, no longer having a period due to menopause, abortion rights and period tracking privacy issues, data history and insights were gone, inaccuracies, and using another app to track another health- related experience/reminder instead.
To summarize, women don’t like the following- paid subscriptions to unlock features, limited features on a free app, pop-up ads, automated pop-up chats, limited tracking options like mood/exercises, limited info on women’s health (PCOS/endometriosis/ ovarian cysts, etc.), losing data/insights, privacy issues/data shared with third parties, inaccuracies with patterns or insights, and/or app is too complicated to use.
Looking at the responses, I would try to add options for users to click and choose on what they’d like to filter/‘turn on’ to track such as water intake, and add a tracking feature of collection methods (tampon, pads, menstrual cup). I would also allow syncing of their app across different devices.
2. Define
How can we ensure users experience an easy, seamless and enjoyable period tracking app that does more than just track their flow?
2.1 Persona Creation
Creating a persona to represent key audience based on questionnaire findings.
Aiding design decisions & increasing empathy.
Getting a better picture of what users expect & how they interact with product.
2.2 User Flow
A map of how users can move through the product to accomplish goals; it outlines all possible scenarios, options, errors, dependencies, and outcomes.
What are the product users’ goals?
Based on existing period tracking apps and my research, I tried to create a simple and straight-forward user flow but one that gave user options yet not overwhelm them; options are listed from most interested at the top based on my primary research.
The main flow is primarily to track a menstrual flow but I wanted to the user to be able to walk through the account creation process as well since they have to go through it to get to the period logging portion.
Legend
3. Ideate
Brainstorming and conceptualizing the site. What are the users’ goals? How will your users interact with the product to solve their problem?
Incorporating research findings, info architecture and usability to define how a product will behave.
Focusing on users’ interactions and reactions with the product.
3.2 Low-Fidelity Wireframes
Building the blueprint and overall structure of the mobile period tracking app, onboarding process, tracking pages, educational pages and community pages with low fidelity wireframes.
Visualizing where and how components and elements should be laid out.
Created anh. for wom[anh]hood.
These were my initial wireframes.
Post iterations below after mentor’s feedback and group critique session.
Took out ‘create username option’ but gave users the option of toggling on either of these - ‘connect anonymously’, ‘connect with your initials’, or ‘do not connect me’.
Shortened onboarding by condensing some questions into one screen, and giving users the option to skip full customizations.
Integrations with Google, Facebook, and Twitter, to speed up the sign-up process and/or not force people to create an account manually.
Added screens to show what happens when user clicks on specific day on the calendar.
Sign Up / Log In. Integrations with Google, Facebook, and Twitter, to speed up the sign-up process and/or not force people to create an account manually.
Onboarding or Health Profile Set up - Mandatory. Shortened onboarding by condensing some questions into one screen, and giving users the option to skip full customizations.
Onboarding or Health Profile Set up - Optional
Settings. Took out ‘create username option’ but gave users the option of toggling on either of these - ‘connect anonymously’, ‘connect with your initials’, or ‘do not connect me’.
Home Page - Logging Symptoms and More
Community Forum
Educational Content
Home Page - Calendar Day Selection / Overview. Added screens to show what happens when user clicks on specific day on the calendar.
4. Prototype
How will this app look, feel and be used?
Creating interface designs and responsive visuals for the prototype.
Crafting UI Kits and style tiles.
4.1 Style Tiles / UI Kit
Showcasing my style tile and UI elements for my period tracking mobile app.
I wanted to use a similar font face as Poppins and came across Sofia Pro and Gilroy. I felt Poppins was a popular font and I didn’t want to use exact font type. The font type and weight, I hoped, would give off a happy yet clean look for users.
I considered a few logo ideas. One option was a uterus but looks like a dragonfly, symbolizing change and transformation. Another was a vagina but looks like a flower or a butterfly, both symbolizing growth. The option I ultimately stuck with was a circle that looks like an incomplete peace symbol but really pulls off as a modern, clean and minimalist image of a woman’s pelvis/groin area. It was the popular choice when I asked for feedback from peers, friends and family.
As for colours, I felt that almost all other apps of this nature uses some variation of muted tones or variations of pinks, I ended up choosing to work with a nude palette, as a representation of all women’s (and humans, in general) skin and body tones. Nudes also gave a comforting, soft and classic feel, as well, and hoped users would feel that way when using the app.
4.2 Responsive UI Design
High-fidelity wireframes before feedback, revisions and prototyping.
Created an abstract partial background of waves in different shades of nudes, as it reminded me of skin tones but I didn’t want it to be the main focus of the screen. Thus, I lightened it a bit to allow a better focus on the content.
I ended up using Poppins more often and for prompts/questions, as it allowed me to customize the weight, unlike Gilroy and/or Sofia Pro.
5. Testing
What are your objectives, assumptions and hypotheses?
Evaluative research.
Usability testing.
Interpreting test results.
Using feedback we get from our users, we then create the next iteration of our work and repeat the design process again.
5.1 Responsive Protoyping
Getting the main flow of a new user’s period tracking process ready for testing.
5.2 Usability Testing
Planning and conducting the usability test
Usability Test Results
100% of participants completed 100% of the tasks successfully.
The average rate participants gave for ease of use and seamlessness of the account creation process was around 4/5, with 5 being incredibly easy and seamless.
The average rate participants gave for ease of use and seamlessness of the period logging process was around 4/5 as well, with 5 being incredibly easy and seamless.
The most common consensus were that the period logging process could use a ‘save’ button in case users don’t know that the app can auto-save, there could be some hints or guidance on how to read the calendar, and the account creation process can be shortened a bit.
Overall, the app was very easy to use and the visuals make it feel welcoming and warm, and the minimalism was well liked. Some users had personal preferences when it came to drop down options or list view options, and home page icon placements.
Using feedback I got from our users, I then created the next iteration of my work and repeat the design process again.
5.3 Post Prototype Iterations & Final High-Fidelity Frames
Instead of a calendar date picker wheel, I opted for a drop-down selection for consistency across the app.
Iterated to a drop-down date picker.
Combined these two questions into one screen.
Some users were confused about the plus sign symbols here when selecting, as they thought it would expand for more info. I ended up taking out this screen to shorten onboarding and set-up process.
Instead of a drop-down picker for this question, I made a list for users to choose from in case more than one option applies to them. Instead of the plus symbols, I left it blank and used a check mark as feedback for users upon clicking.
Home screen pre-iteration.
Home screen post-iteration. Changed Log Period button to the same colour as period dates on calendar. Changed overview highlight colours for cycle, fertility, and ovulation to correspond with their symbols on calendar.
Some users didn't approve of the automatic saving and preferred a Save button. I then added a Save button.
Final Prototype.
Prototype:
Click below to view prototype.
Conclusion
What I learned:
This is an app that I felt increasingly passionate about the more time I spent on it; I felt proud of the visual design of soft nudes to represent women of all skin tones, with the idea of wanting to empower and include all women to connect and be educated on all women topics, specifically around women’s health.
From this project opportunity, I learned that fem tech is an industry I would highly consider working in.
What I would do differently:
As part of my primary research process, I would like to spend more time in exploring and understanding my users’ “why” in their intentions and usages for a period tracking app and/or women’s health logs, as opposed to assuming most are either trying to conceive or preventing pregnancy. This may allow me to uncover more opportunities or features to create within the app or spend more time on specific features.
The next steps:
Conduct another round of usability testing.
Add more to the Educate page when user clicks on Educate sections and content.
Create and expand on Community page content and sections.
Add a Settings, Portfolio and Analysis page(s).
Explore desktop and tablet versions of the app.