Background

Small Acts for Sustainability (SAS) is a non-profit social impact organization dedicated to empowering and educating women and youth to enhance their social and economic well-being.

They asked our team at SB Creative Lab to create an educational period mobile app to make period education and tracking more accessible for underserved menstruators.

‍

The Problem: Existing period-tracking apps have insufficient educational material for our target audience, Siddi women and youth "who are the least visible among the 1.3 billion Indians found in India, leaving them to be socially, politically and economically marginalized" (SAS).

Timeline

We used design thinking to guide our design process, from empathizing with users through research to performing user testing to iterate our prototype.

Research

While our problem was already defined, we still had much to learn about our users in terms of pain points, wants, needs, and the context in which they would use the mobile app. We were given limited prior user research, so we conducted a user survey, user interviews, and a competitive analysis to better understand our users. We consolidated our findings in a user research brief and used our analysis to inform overall mobile app usability and features.

Main findings

Participants expect a clean user interface that is easy to use

Features that are important to participants include: accurate predictions, calendar view, accurate fertility window

Participants also expressed that they would find tips on medicine use, symptoms, and overall menstrual health to be helpful

User Flow

Before diving into ideation, we laid out our overall app flow to understand the steps users would take to accomplish tasks. This allowed us to think through any potential obstacles or confusion points to ensure an intuitive journey for users.

See full user flow here.

Wireframes

Equipped with new insight about our users, we sketched our ideas for layout and structure. We then developed a low-fidelity prototype to obtain some early feedback.

User Testing Round 1

Here were some of the initial suggestions we received:

Add a notes option for symptoms not captured in buttons
Weekly view of analysis in addition to overall summary and monthly view
Save/bookmark option for education articles

We kept these in mind as we moved into high-fidelity designs.

Design System & Brand Style Guide

At this point, we finalized our design system to streamline our design process and keep our designs consistent across screens. The style guide informed the logo, icons, and illustrations. We utilized components as our designs evolved from lo-fi to hi-fi and between iterations.

Hi-Fi Prototype

Finally, we designed our high-fidelity prototype and conducted our second round of user testing.

User Testing Round 2

Here is some of the feedback we received:

Inputting blood flow with a multi-tap button is confusing
Symptom options don't cover all of the symptoms expected to be in a period-tracking app
Icons and date input format do not align with target audience expectations (e.g., pizza is a western food, date format should be DD/MM/YYYY instead of MM/DD/YYYY, cramps icon is unclear, etc.)

Here were some of the changes we made:

Change blood flow input from a multi-tap button to horizontal-scrolling options
Add additional symptoms to comprehensively address user needs
Adjust colors for better contrast
Modify icons and date input format for clarity and to align with target user expectations

Iteration 1

Iteration 2

Reflection

At the end of the project, I reflected upon what went well and what could be improved in future projects.