What is Cherry?

We created Cherry, a menstrual and feminine health monitoring app, as part of our front-end programming class, with a unique focus on education—an often underrepresented aspect in the femtech space.

While the project primarily centered on technical implementation, we aimed to extend its impact by empowering users not only to track their menstrual cycles but also to gain valuable insights on how to adjust their lifestyle and better understand their bodies throughout the different phases of their cycle.

Initial Brainstorming

Given the limited time available for user research, we made a conscious decision to refine and narrow our project scope in order to deliver the best possible outcome within the constraints we faced. Since this was our first experience working with AngularJS, we aimed to keep the project both focused and manageable, ensuring that we could realistically complete it within the quarter.

Main Points:

Focus Areas: Developed a tracker and informational pages emphasizing education.

Additional Features Considered: Explored adding app sync options and a AI feature but scaled back for feasibility.

Design Considerations: Acknowledged that menstrual cycles vary due to factors like PCOS or birth control, but would require health history.

Target Audience: Tailored for users with more regular cycles while being mindful of diverse scenarios during the design process.

Scenario Mapping From Personas

During our scenario mapping exercise, we utilized our user persona, Sarah, to facilitate a 15-minute brainstorming session within the group. This session allowed us to quickly generate ideas, raise questions, and provide feedback on the project at an early stage. It was during this discussion that we made the decision to refine our focus and create our problem statement!

Problem Statement:

“How can we create a menstrual health app that combines cycle tracking with educational resources so that users can better understand their bodies and make informed lifestyle adjustments throughout their cycles?”

User Flows

Our task flow here illustrates the skeleton of our design and how we wanted to visualize about this product. We wanted to make sure the user had the right choices to choose from, and make sure this flow was manageable for us to program.

Our page flow reflects a thoughtful design focused on enhancing user experience. Some of the key features include:

  1. An intuitive tracker for easy progress monitoring.

  2. A streamlined date selector for quick input.

  3. A prominently placed educational section to ensure users can easily access valuable information.

Wireframing

Our wireframe prioritized a seamless and functional user experience:

Profile Management Page: Allows users to easily update and customize their personal information, providing a personalized app experience.

Home Page: Features a visual cycle tracker as the central hub, offering real-time monitoring of the user’s menstrual cycle.

Symptom Tracker: Lets users log and track symptoms with interactive forms, helping them identify patterns and better understand their health.

Advice Page: Offers personalized lifestyle tips tailored to the user's current cycle phase, providing relevant guidance based on their data.

We prioritized smooth functionality and seamless integration across all key screens, ensuring an intuitive flow that makes navigation user-friendly.

High Fidelity Prototype

This initial prototype of Cherry laid the groundwork for the full development of the application. In our final iteration, we refined the flow of the information page to improve user interaction while maintaining the core layout and structure that defined the overall design. These adjustments allowed us to enhance usability without compromising the integrity of the original concept.

Working Prototype

Github

To access our GitHub repository for this project, please click "Take me to Cherry" below and follow the provided instructions to run the application!

Developer Insights

  • What I Learned from Coding

    This experience taught me a great deal about the intricacies of coding an interface from scratch. I learned:

    • Version control through GitHub: Learning to resolve merge conflicts, and the importance of clear commit messages.

    • AngularJS fundamentals: how to build reusable components and manage data binding.

    • The importance of clear communication between design and development to avoid misinterpretations during the coding process.

    • That working in a team requires patience, flexibility, and the ability to adapt quickly to new challenges and tools.

  • What I’d Do Differently

    Looking back, there are several things I would do differently to streamline the process:

    • More upfront technical planning: We jumped into coding too quickly without a clear understanding of how AngularJS worked. I would allocate more time to research and planning before starting development.

    • Assign specialized roles: Our team lacked defined roles, which led to confusion about responsibilities. In future projects, I would assign specific roles (e.g., frontend developer, code reviewer) to ensure clearer accountability.

    • Code reviews and testing: We didn’t prioritize code reviews early on, which led to issues later. Implementing a structured review process would have caught bugs and inconsistencies sooner.

  • Developer Challenges

    Since we were all beginners, the feedback we gave each other revolved around learning to collaborate through GitHub and coding the interface. Early on, we realized that coding consistency was crucial. For instance, when styling elements, minor differences in our code led to unpredictable interface behavior.

  • Technical Handoff Process

    We used Figma for our technical handoff, ensuring all designs were documented and ready for development. However, the real challenge was translating those designs into code, as none of us had substantial coding experience. While the Figma designs were clear, bringing them to life with AngularJS required additional research and trial and error, especially as we were all still learning. This process highlighted the importance of bridging the gap between design and development and pushed us to collaborate even more closely.

  • Challenges and Solutions

    A major challenge was learning how to use GitHub to share and merge code. Our lack of experience led to frequent conflicts, and merging code took longer than expected. To solve this, we agreed to regularly commit smaller changes to avoid large, conflicting updates. Additionally, coding with AngularJS presented a steep learning curve, especially when working with components and directives. However, with the guidance of our research professor, who had expertise in the subject matter and some technical knowledge, we were able to work through the initial obstacles and improve our coding skills.

Opportunities for Improvement

  • In hindsight, implementing a questionnaire for users to complete before logging into Cherry would have been an effective way to gather valuable insights about their specific needs. This approach, which we did not consider until later in the process, would have helped us better understand key factors that affect menstruation, such as PCOS or the use of birth control. While we designed Cherry with these considerations in mind, a more detailed method for users to share their health information would have provided clearer data for more personalized features. Additionally, as a team of beginners working with AngularJS, building the app from scratch was not always a smooth experience. The learning curve added to the challenge, and time constraints during the quarter limited our ability to incorporate this feature. Moving forward, we plan to prioritize these enhancements to ensure a more tailored experience for our users.

  • Having a notification system into Cherry could have enhanced the user experience by keeping users informed and engaged. Features like reminders for upcoming periods, medication tracking, or health tips can provide added value and ensured users stayed connected with the app. Unfortunately, due to time constraints, we were unable to implement this functionality. Given the importance of staying on top of menstrual health, especially with factors like irregular cycles or contraceptive use, a notification feature would help users stay more organized and proactive.

  • By allowing users to easily share their experiences, report issues, or suggest features, we could have gained valuable insights to improve the app. A feedback center would provide a direct communication channel, ensuring we stay aligned with users' evolving needs, particularly in a sensitive area like menstrual health where individual experiences vary widely. This feature would help us address overlooked factors such as symptoms, medication, or cycle irregularities that may not be fully captured in the initial design.

Thank you for checking out Cherry!