Background

Through their revolutionary armband monitor and accompanying smartphone app, a science-backed femtech company helps women track their fertility and get to know their body cycles better. The fertility tracker detects Basal Body Temperature (BBT) during sleep, so that women can easily sync it with the app whenever they wake up in the morning. As BBT rises after ovulation, such tracking can significantly help detect the fertile windows for increased chances of pregnancy. While the product is currently on the market, there are several ways in which the usability and visual design of the app can be further optimized. That’s where this design challenge comes into play: To redesign the home screen of the mobile app.

My Role: Mobile Product Designer (UX/UI)

Process

Define

Project Goals

Get familiar with the existing fertility tracking app, keeping users in mind
Redesign existing concepts to be even more useful, usable, and approachable for an overall improved user experience
Keep the home screen simple, yet informative for easy use
Maintain the current app’s branding & styling

Assumptions & Constraints

Design is for a premium user with a 28-day menstrual cycle, who syncs her armband’s BBT sensor to the app every morning
For this task, keeping the “cycle” visual makes most sense for fertility tracking
Not all real-life scenarios and functionalities are detailed

Ideate

Brainstorm (Features/Flows)

Pictured below is the existing app’s home screen, where I’ve identified areas of improvement - both from a UX and visual design perspective. Not only can certain elements and features be better optimized, but certain design decisions can positively impact the user flow. For example, in the current app, clicking on “Add Symptoms” or “Edit Symptoms” takes the user to an entirely separate screen. It would be more intuitive to view logged symptoms right here in the home screen, within the specific date listed.

Inspiration (Competitive Analysis)

To better understand the fertility cycle phases, and to collect design inspiration from other tracking apps, I conducted some rapid competitive analysis. Certain design patterns emerged as being common and intuitive, such as the circular visual to represent the menstrual cycle (which is also in the existing app’s design). I wanted to keep this basic design concept, but redesign it to be much more usable and informative. My idea to indicate separate days (e.g. 28) on the visual was also reflected through the research - so, I knew in my upcoming sketches I would play with the look and feel of that, among many other ideas.

Design

Sketches

From both my design brainstorm on the existing app itself, and from the additional research I collected to get further inspired, I started sketching out my design ideas. They include structural, functional, and design changes to the app greeting, menstrual cycle tracker, “Sync” button, fertility details, date/cycle day # and temperature listings, logged symptoms, and more.

High-Fidelity Ideas

To more easily visualize my ideas and bring them to life, I began creating mockups of the high-fidelity designs. The following visual ideas were explored through different variations:

Greeting / Title - I brainstormed various ways to display the date, day # of the current menstrual cycle, and/or “Good Morning, [User’s Name]” (to further personalize the app). These key details, in certain visual hierarchy, make sense at the top of the homescreen.
“Sync Tracker” Button - Inspired by Shazam’s UI, I played with having the button in the center of the design for easy access and accessibility. However, after further consideration it made sense to keep the button below the menstrual cycle visual, thereby being closer to the Basal Body Temperature listings (since, that is what’s being synced when you click on the button).
Cycle Design - I explored how to represent the stages of menstruation and ovulation (through colors, icons, and/or words), as well as the idea to indicate each individual day of the cycle (e.g. 28 separate dots or circles). Also, unlike in the existing app, I wanted my design to somehow visually indicate progress through the menstrual cycle (e.g. “hollow” days haven’t occurred yet).
Fertility Insights - When the button was inside the cycle diagram, I designed the details to be listed below. When the button was above or below the cycle diagram, I chose to keep the details inside the cycle. This is similar to the existing app’s design, but I wanted to add additional details for users to gain meaningful insights. This helps to maximize the app’s potential as both a tracker and educational tool, while remaining quite simple.

Final Mockups

Below shows the final designs for the home screen - which can also be found in this Figma file.

Design decisions of the Cycle section:

The H1 text greets the user, with the key details of date and cycle day # below it.
Each day of the 28-day menstrual cycle is represented by a circle. The solid ones have occurred already, while the hollow ones have yet to occur. This visual cue helps to show progress.
Pink represents the menstrual period days, light green represents the fertile window, and the dark green circle with an icon indicates the day of ovulation.
“Today” is marked, and users can click on any day within the cycle to see details of that day. Important fertility details are represented in the center of the cycle visual, along with the Follicular Phase and Luteal Phase. While not in the existing app, these details enhance the user’s awareness of her cycle and what it means for her fertility.
The CTA is enlarged and located above the fold, for easy access. It sits right above the Basal Body Temperature listings in the below section of the home screen.

Design decisions of the Listings section:

Users can toggle between “List View” and “Chart View”, where days would be shown like a timeline. I built out only the List View design for this project.
Instead of showing all 28 days at once, I felt it made sense to group the days by their phase in the cycle: Early Follicular, Late Follicular, Ovulation Day, Mid-Luteal, and Late-Luteal. Then, I designed each section with accordion UI. “Today” is clearly marked as a light green tag.
I decided to make “Symptoms” also a dropdown, so users can conveniently view their logged symptoms from this screen. The basic functionality is demonstrated in this simple prototype. Clicking on “Edit Symptoms” will take them to the Symptoms Details page of the app.

Conclusion

While keeping the existing styling and branding of the app, I enhanced the visual design, added meaningful features, and improved the overall look and feel of the Fertility Tracking app. Below shows the “Before” and “After” screens.

Background

My Role: Mobile Product Designer (UX/UI)

Process

Project Goals

Get familiar with the existing fertility tracking app, keeping users in mind

Redesign existing concepts to be even more useful, usable, and approachable for an overall improved user experience

Keep the home screen simple, yet informative for easy use

Maintain the current app’s branding & styling

Assumptions & Constraints

Design is for a premium user with a 28-day menstrual cycle, who syncs her armband’s BBT sensor to the app every morning

For this task, keeping the “cycle” visual makes most sense for fertility tracking

Not all real-life scenarios and functionalities are detailed

Brainstorm (Features/Flows)

Inspiration (Competitive Analysis)

Sketches

High-Fidelity Ideas

To more easily visualize my ideas and bring them to life, I began creating mockups of the high-fidelity designs. The following visual ideas were explored through different variations:

Greeting / Title - I brainstormed various ways to display the date, day # of the current menstrual cycle, and/or “Good Morning, [User’s Name]” (to further personalize the app). These key details, in certain visual hierarchy, make sense at the top of the homescreen.

Final Mockups

Below shows the final designs for the home screen - which can also be found in this Figma file.

Design decisions of the Cycle section:

The H1 text greets the user, with the key details of date and cycle day # below it.

Each day of the 28-day menstrual cycle is represented by a circle. The solid ones have occurred already, while the hollow ones have yet to occur. This visual cue helps to show progress.

Pink represents the menstrual period days, light green represents the fertile window, and the dark green circle with an icon indicates the day of ovulation.

The CTA is enlarged and located above the fold, for easy access. It sits right above the Basal Body Temperature listings in the below section of the home screen.

Design decisions of the Listings section:

Users can toggle between “List View” and “Chart View”, where days would be shown like a timeline. I built out only the List View design for this project.

Instead of showing all 28 days at once, I felt it made sense to group the days by their phase in the cycle: Early Follicular, Late Follicular, Ovulation Day, Mid-Luteal, and Late-Luteal. Then, I designed each section with accordion UI. “Today” is clearly marked as a light green tag.

I decided to make “Symptoms” also a dropdown, so users can conveniently view their logged symptoms from this screen. The basic functionality is demonstrated in this simple prototype. Clicking on “Edit Symptoms” will take them to the Symptoms Details page of the app.

Conclusion

While keeping the existing styling and branding of the app, I enhanced the visual design, added meaningful features, and improved the overall look and feel of the Fertility Tracking app. Below shows the “Before” and “After” screens.

— View More Projects —