Natural Cycles

Context

In this project, I was tasked with adding a feature to an existing app. From my research, I developed a share feature for the the Natural Cycles app to help users share their fertility information with their partner.

Role: UI/UX Designer

Tools used: Figma, Figjam

Duration: 16 weeks

User Research and Insights

  • Evaluated four existing menstrual cycle tracking apps to identify strengths, weaknesses, opportunities, and threats (SWOT) that informed the design and development of the share feature for the Natural Cycles app.

    The key finding was that most competitors offered some sort of sharing feature already.

  • Gathered insights from 5 potential users by conducting in person user interviews to understand their needs, preferences, and pain points in tracking their menstrual cycle in regards to family planning.

    The key finding was that users wanted a way to share their menstrual tracking data, primarily with a partner for family planning.

Ideation and Design Process

  1. Affinity mapping

From the user interviews, I took the key points from each interview and organized them into categories to find the main pain points.

2. User Persona

Once I synthesized the main pain points, I created a user persona to help me understand the mindset of designing for an end user.

3. Problem Statement, POV, and HMW

After finding the common pain points among users and creating a user persona, I came up with a problem, POV, and HMW statement to help think about possible solutions.

Problem Statement


Users are often surprised to find they are unable to share their menstrual cycle data within the app, leading to frustration on the platform.

POV


Ashley and her husband just got married and aren’t trying to start a family for a couple years. She uses Natural Cycles to track her ovulation to prevent pregnancy, but she is frustrated that her husband always has to ask about whether or not she’s ovulating. Ashley wishes there was a way to share the information with her husband within the app.

HMW

  • How might we create a personalized system for Ashley to share the data she wants with her husband?

4. Feature Set

To brainstorm features to add to the app to solve this problem for users I created a feature set and categorized them to prioritize the feature that was most important: sharing the fertility and symptoms data with their partner.

5. User Flow

To help figure out which screens I would need to develop, I created a user flow.

Next I developed some low fidelity wireframes to get see how it would all come together.

6. Low/Mid-Fidelity Wireframes

7. Usability Testing

Objective:

Evaluate the usability of the share feature and how accessible it is for users. Observe how easily users navigate the interface and what challenges they may face when trying to complete the task.

Task Flow:

Start sharing information with your partner


Success Metrics:

Task success rate: Were the users able to complete the task without errors or assistance?

Learnability: Is the design intuitive and easy to follow?

Findings:

All participants were able to complete the task, but some went to the hamburger menu to find the share feature instead of scrolling on the home page.

8. Iterations

From the usability testing I was able to see what aspects of my design were intuitive and which could be improved. Below are a few of the revisions I made based on the feedback I gathered during the usability testing.

Changed the “Share Page” button to “Share”

Before

Before

After

Updated the designs to match the branding of Natural Cycles:

  • Updated the colors

  • Changed the buttons

  • Applied the layout seen in other features of the app for familiarity

After

Added “Sharing” button to the account information for multiple ways for users to access the partner sharing feature

Before

After

High Fidelity Wireframes

9. High-Fidelity Wireframes and Final Prototype

Next Steps and Reflection

Next Steps

Reflection

  • Add notifications for any changes in fertility and/or symptoms

  • Add calendar syncing feature

  • Continue user research usability testing to further improve the design and functionality

Designing a feature for an existing app was a pivotal learning experience in understanding the importance of brand consistency. I learned how to effectively mimic the app’s established branding, ensuring that my design seamlessly integrated with the existing user interface. This experience deepened my appreciation for the nuances of brand guidelines and taught me how to balance creativity with adherence to a brand’s visual identity. It was a valuable exercise in maintaining a cohesive user experience while contributing fresh ideas.