Know her :
Breaking the silence
Many young girls lack access to clear, positive information about menstruation. I developed Know Her, a gamified educational platform that reframes period education as an engaging journey, empowering students, educators, and single parents through accessible and inclusive design.
Who would use this website?
Primary :
Young girls aged 9 and above in schools.
Secondary :
Teachers and visiting health educators who conduct sessions in schools.
Tertiary :
Parents (with special focus on single fathers)
I used this Research Plotter as the starting point for my entire project to understand the historical and cultural landscape of menstruation. By plotting data across four quadrants - Global vs. Local Culture and Past vs. Recent History. I identified critical gaps in education. It shows that while global trends are moving toward normalizing conversations through digital platforms, local contexts often still face challenges like myths, secrecy, and limited school resources. Mapping this out helped me realize that my design needed to bridge the gap between traditional secrecy and modern, accessible knowledge.
To identify industry standards for accessibility and engagement, I audited four direct competitors:
Flo: High-quality content but cluttered and overwhelming; most features are locked behind a paywall.
Clue: Scientifically accurate but feels too adult and clinical; lacks a safe mode for younger users.
The Calender: Simple to use but lacks inclusivity and offers no support for conditions like PCOS/PCOD.
FitBit: Provides good health data but requires expensive hardware, making it inaccessible for many.
Comparative Analysis
Comparative Analysis
Here's is a short visualization of what I discovered through my research into current period-tracking apps.
Clue Period, ovulation tracker
- Written in a more medical manner
- No chat feature
- Highly anticipates a premium upgrade to access it
- Adult content only - teen target not be ready for
- No child safe mode or guardian features
Flo Period & ovulation tracker
- Overwhelming, due to large no
- of features & information
- Limited community feature
- Auto generated chart
- Lengthy process to go in after information
- Bombarded with all sort of other notifications multiple times a day
- Cluttered
- Focused on adult-centric
- Requires frequent manual input
My Calendar
- Consultation added in a premium feature
- UX support for diverse user groups: PCOS, PCOD, young girls
Fitbit Health & Fitness
- Only accessible for Fitbit devices
Easy Period Life Tracker
- Basic tracking
- No parental mode
- No education content
After conducting interviews with students, teachers, and parents, I synthesized the feedback to ensure the design addressed real-world needs. The research revealed that fear and cultural embarrassment are the primary barriers to learning, which led me to prioritize a "safe space" aesthetic over a clinical one. I also integrated voice-over guidance to make the information more accessible and less intimidating for younger users.
I created this journey map to visualize the emotional shift from fear to confidence. By analyzing user data, I identified that the most critical pain point occurs at the start of the first period, where anxiety is highest due to a lack of clear information. I used these insights to design gamified touchpoints that step in during these stressful moments, replacing scary medical jargon with supportive, interactive guidance to ensure a positive first experience.
I used affinity mapping to organize all my research into simple groups. By looking at all my notes and interviews together, I realized that the biggest problems weren't just a lack of facts, but also cultural shame and a lack of age-appropriate tools. This helped me stop feeling overwhelmed by data and clearly see exactly what features I needed to build.
I used "How Might We" questions to turn the problems found in my research into creative design opportunities. This step helped me focus on finding solutions, such as creating a safe space for girls to ask questions and making learning fun through games. It was the bridge that moved my research from identifying issues like cultural shame and confusing language into building a practical, user-friendly website.
I used this Problem Clarity chart to decide which features were most important to build first. By mapping ideas based on their impact on the user and my confidence in them, I could prioritize high value tools like simple visual guides and period tracking. This helped me focus my research on what truly helps girls like easy to understand explanations rather than wasting time on complex features that might be too confusing.
My research completely reframed how I approached this project. I realized that the core problem wasn't just a lack of information, but the deep-seated cultural shame and anxiety girls feel when they first start their periods. By grouping my findings, I identified a critical "knowledge gap" where girls were turning to unreliable sources because they felt too embarrassed to ask adults. These insights led me to shift my strategy: instead of a clinical health tool, I decided to build a safe, gamified space that replaces fear with confidence and uses simple, supportive language to break the cycle of secrecy.
Website focuses on period education with a comfortable, approachable design.
The visual identity uses organic, flowing elements (like the curved lines) to represent natural conversation about periods.
I have planned interactive feature exploration for educational content, QR code scanners for additional information, and a quiz system with multiple choice answers.
The design emphasizes making period education accessible through various formats - books, articles, podcasts while maintaining a bright, inviting, and serious tone that normalizes these important conversations.
Our visual approach centers on “organic flowing conversation” with curved, natural design elements that feel welcoming rather than clinical.
I have incorporated asymmetrical compositions and irregular shapes to convey the variety of period experiences different people have.
The design uses negative space thoughtfully (representing “missed periods”) and was also thinking of including playful elements to make the serious topic more approachable.
This creates a visual identity that’s both informative and comfortable, helping users feel at ease while learning about periods.
Why game?
Learning through games
I chose to add gamification to my website because it transforms learning into an engaging and interactive experience. Instead of feeling overwhelmed by sensitive information, users can explore content in a safe, playful way. Gamified elements motivate users to progress step by step, making it easier to learn at their own pace. This approach not only builds confidence but also helps create a positive and memorable learning journey.
The final design of Know Her is a cohesive, multi-level learning journey designed to guide users through the physical and emotional aspects of menstruation. The website brings together all the researched elements : the intuitive maze, the musical lesson, the simplified cycle phases, and the product-matching game into one seamless flow. By ending with the "Conversations" and "Common Questions" sections, the platform transforms from a simple game into a supportive community tool that encourages girls to "Grow, Guide, and Glow".
Click in the frame once to start interacting, press 'R' to return to the homepage.
The Know Her landing page features a side navigation bar with dedicated buttons for each level. Clicking these buttons leads you to gallery pages, such as Level 01 and 02, where I explain the research, personal inspirations, and design choices behind every game mechanic. To begin, simply click once within a level frame to start interacting, or use the side navigation to explore the deeper story behind how each stage helps you grow, guide, and glow.
Click the Level buttons on the right to reveal the 'Why' behind the design and my research process.
Learnings
Designing for Taboo Topics: I learned how to use gamification and play to turn a sensitive, intimidating subject into an engaging experience that builds user confidence rather than causing embarrassment.
Audio-First Accessibility: By integrating AI voiceovers and audio guides, I realized that accessibility isn't just a checklist it's about providing different ways to consume information so no user is left behind due to literacy or tech-confidence.
Testing Over Assumptions: User testing taught me to be objective. I learned to quickly pivot when I saw users struggling with text-heavy elements, replacing them with more intuitive, interactive cues to keep the flow seamless.
Visual Safety: I learned that color and shape have a huge impact on user trust. Using organic forms and welcoming gradients helped transform a "clinical" topic into a safe, friendly digital environment.
Complex Information Architecture: I learned how to break down a massive subject into manageable, logical stages. By organizing content into a four-level system (from basic puberty to period preparation), I ensured the user journey felt like a steady progression rather than an overwhelming dump of information.
You might also like
Open Day Website Redesign
Improved the visitor journey by reducing information-finding time by 60% through an intuitive map design and a clear visual hierarchy that simplified campus navigation.
Education
WAY FINDING
service design
Marx Memorial Library
A real client project to solve MML’s low visibility by redesigning its branding to engage younger audiences while respecting its history.
REAL client
branding
visual design
