Dot is a mobile application designed for women who want to track their menstrual cycles, giving the option of a digital journal.
This project was done to explore the usage of logging entries with the purpose of personalization.
Role
UX Designer Researcher
Duration
~2 weeks, Sept. 2020 ~2 weeks, Feb. 2021
Tools
Adobe XD, Photoshop
The Problem \
There is a lack of personalized journal experience in menstrual cycle tracking applications.
The Solution \
Dot is a mobile application that allows for a more optimal journaling experience.
The Process \
01. Research \
To create an application concept that is catered towards the menstrual cycle, I read up on the topic and educated myself. Being a woman, reading about periods benefited and intrigued me as I had never researched deeply about it before, and now feel more informed.
Background Information
4 Phases of the Menstrual Cycle
• Menstrual
○ Period, ~3-7 days
• Follicular
○ Starts on period, ends on ovulation, 11-27 days
• Ovulation
○ Occurs in middle of cycle, 1 day
• Luteal
○ Rise in hormones, 11-17 days
• Usually fertile a week after period, ~3-5 days
I then interviewed 3 people who get periods and asked them what their ideal features would be for a period tracker app.
Key Findings
3 Interviews Total
High Priority
• Personalized
• Track symptoms for the day
• Predictions
Medium Priority
• Calendar
Low Priority
• Tips/insights
02. Ideation \
Features \
I chose to focus on a simple design, focusing on 3 pages: calendar, home, and journal.
03. Design \
First Design & Wireframes \
I showed the first design I created in September to the interviewees along with the prototype and asked for feedback on the screens and experience.
Overall, they liked the design. What was suggested as room for improvement was:
1. The home page be more interactive, and a search bar be added
2. The cycle history page have a wider design
3. More symptoms/options be added
Changes & Iterations \
Home
Firstly, I changed the home screen as that is the default screen. I made it more interactive as suggested and decided to remove the 3 buttons, making a concise navigation bar.
Cycle History
The original history page appeared to be cluttered and lacked direction. It also did not have any indication of predictions or phases of the cycle, which is crucial. I added these as well as made the calendars of each month line up with the days of the week. With the new design, it is easier to tell what to expect each month.
Journal
Originally, I had a summary appear after the user created a journal entry, but I removed that screen and combined it with the recent entries screen so it would be neater. The original journal page was limited and could easily be too crowded (as mentioned by an interviewee), so I added more concise options and highlighted the recent entry (as a replacement for a summary). If users wanted to, they could view notes or edit the entry by clicking on the arrow next to the date. For past dates, they can click on them and view them if needed.
Other Changes
When creating a journal entry, there were less options in my original design. I added some more options, such as spotting, sex, and fluids.
For onboarding, I added another question which was about cycle length as that plays a role in determining periods.
Iterations Not Used
Final Screens & Prototype \
Based on their feedback, I revisited it in February, making changes and improvements to the overall design.
04. Reflection \
I started this project in September and originally created a different design, but revisited it in February aiming to improve and finalize it.
In this project, I utilized user feedback and iterated designs more, as that was one of my goals after completing my first project. I felt that this was a different learning experience for me as I focused on a more scientific subject and put more research upon it. To improve upon it, I would add more features, such as tips and insights.
