"How might we create a safe, nonjudgmental, and accessible platform that empowers teens to navigate reproductive health information with confidence and privacy?"
Based on our research, we focused on adolescents with menstrual cycles because their reproductive health experience is deeply impacted by limited sex education, stigma, and misinformation. By providing them with an accessible and privacy-focused tool, we help them make informed health decisions.
2.1 Surveys
Information Goals
Key Takeaways
2.2 Interview
Information Goals
Knowledge Gap
Teens with higher reproductive health literacy make more informed choices, while those with limited knowledge face challenges in navigating related decisions.
Family Influence
Household dynamics, especially in conservative or religious settings, play a major role in shaping stigma and attitudes toward reproductive health.Early Exposure & Stigma
Teens introduced to sex education at an early age experience less shame and stigma in discussing and accessing reproductive health resources.Online Information
Most teens rely on social media and online platforms for reproductive health knowledge, influencing their understanding and decision-making.Peer Support Over Family
Teens lacking family support often turn to friends or peers for reproductive health guidance and emotional support.Limited Resources
Many teens are eager to learn about reproductive health but lack access to reliable and supportive educational resources.
2.3 Competitive Analysis
Key Takeaways
2.4 Hierarchal Task Analysis
HTA1: Logging regular period cycle
Our competitive analysis revealed that many apps regarding sexual health and wellness include features like period tracking. Additionally, both of our teen interviewees used period tracking apps. For this HTA, we broke down the process of logging a period cycle in the app Flo.
Contextual Factors Impacting the Task
Physical & Cognitive Load – Users must recognize physical symptoms, but stress or distractions may lead to forgetfulness.
Cultural & Social Norms – Embarrassment or stigma around menstruation may prevent teens from openly logging their periods.
Time Sensitivity – Busy schedules make real-time logging difficult, reducing the accuracy of entries.
HTA2:Identify the pregnancy at home
Our user interviews revealed that there can be a large gap in knowledge for adolescents knowing what to do if they have a “pregnancy scare”. This led us to want to better understand and breakdown the process of identifying and confirming pregnancy through an at-home test.
Contextual Factors Impacting the Task
Access to Resources – Teens without transportation or financial means may struggle to obtain a test.
Knowledge & Literacy – Many users lack a clear understanding of how pregnancy tests work or when they are most accurate.
Social Environment – Parental or peer support can either enable or hinder access to pregnancy-related care.
Emotional State – Anxiety or fear may affect decision-making, making clear guidance essential.
3.0 Design Requirements
These 9 design requirements came as a result of our research as well as as a result of our user-based research. At a high level, the design created for this problem must
The design should provide non-judgmental access to services and present information in a way that doesn’t stigmatize the topic area.
Privacy and confidentiality should be prioritized.
The design should address users in a variety of stages of life– such as pregnancy, period tracking, sexual health, … etc.
Design should feel intuitive and understandable. Based on survey and interviews.
Inclusivity for those who have a robust sexual education background and those who don’t know very much.
Social and cultural sensitivity is important because different cultures view reproductive health differently.
Consider the role of parents, school educators, and partners.
LGBTQ+ youth, youth of color, and youth from low-income families face additional barriers to accessing care. Also, not everyone with a menstrual cycle identifies as a woman, so gender neutral branding/ language is important.
The design should include a variety of topics, addressing what teens prioritize and want to know more about.
3.1 Ideation
We explored 10 potential solutions, leveraging: Brainstorming & Brainwriting,Storyboarding & Sketching, SCAMPER Method
Chrome plugin for reproductive health
Based on positive feedback, we decided to move forward with the Chrome Plugin and developed a storyboard to refine the user experience.
If a teen Googles “Am I pregnant?”, the plugin provides: Free clinic locations & Reliable health information& Warnings for misinformation
Bink is a Chrome extension designed to provide teens with accurate, judgment-free reproductive health information in real-time. Whether users are searching for guidance on reproductive health, navigating misinformation, or looking for trusted resources, Bink offers a supportive, customizable, and approachable experience.
Design Process
Low-Fidelity Sketches
We began by sketching out initial wireframes, focusing on structuring key features such as onboarding, search reaction, site reaction, bookmarking, and privacy settings. Our goal was to create a layout that felt intuitive, non-judgmental, and easily accessible.
Mid-Fidelity Refinement & User Testing
We transitioned to mid-fidelity wireframes and conducted four user interviews to collect feedback. Users emphasized the importance of clear privacy options, accessible information, and a welcoming, stigma-free experience. Based on feedback, we refined our designs to ensure an inclusive and adaptable experience.
To maintain consistency, reliability, and approachability, we established a comprehensive design system:
Our Bink Bunny is a cute companion for teens when they’re navigating heavy topics. We wanted to include a character to help our users feel less anxiety during their journey and to let them know that they aren’t alone. Bink bunny adds a sense of non-judgmental approachability to our interfaces.
We chose Avenir LT Pro as our font choice because it’s versatile and legible typeface that has a wide variety of font choices from light to heavy. It’s also a very friendly, round, and soft font that feels playful and not intimidating. We wanted our typography to have these qualities to contribute to our design requirement of being non-judgmental, making our product feel approachable.
We chose these colors because we wanted to choose a gender neutral color scheme to be inclusive to all adolescents. The yellow and orange are punchy and bright to bring a delightful and friendly tone thats inviting, but to also use for our calls to action and to indicate important information. This helps us address our inclusivity design requirement. The pink and green are accent colors we user in specific components to add pops of color into our design. Our color scheme is modern and attention grabbing without being too in your face.
Our spacing operates on multiples of 4, ensuring consistency not only at the page level but within the component level as well. Small elements use spacing rules from 2px-12px, medium elements are between 12px-40px, and large elements are between 40px-80px. By creating these spacing rules, our product looks cohesive, making our site more trustworthy and consistent.
For iconography we’re using material design icons so our icons consistent with google chrome. Our product is a chrome plugin so by keeping designs consistent we can ensure a more seamless experience
We created a component system because using a consistent design system with consistent elements can make a user feel like the product is more reliable and trustworthy. By using mainly rounded square components, the design represents structure and reliability without being too harsh
Onboarding Experience
Personalize user experience while ensuring comfort and privacy. Including a Landing Page introduces Bink and provides a list of reliable resources, Privacy & Notifications customization allows users to choose,Search History Preferences let users manage sensitive data ,User Profiling to tailor information
Search Reaction
Provide immediate, supportive information when a user searches a reproductive health topic.
Bink automatically opens when users search topics like “Am I pregnant?”
The extension displays key facts, non-judgmental framing, and relevant statistics.
Users can explore local resources, including clinic details and support services.
Ensures gender-neutral, stigma-free language to create a welcoming environment.
Providing emotional and mental support
E-commerce Integration: When users visit a site to purchase reproductive health products (e.g., pregnancy tests), Bink curates recommended products, explains usage, and facilitates easy checkout.
Site Reaction
Combat misinformation and provide trustworthy alternatives.
Chrome Tab Notification alerts users if they are visiting an inaccurate site.
The extension analyzes the webpage and highlights misleading information.
Provides explanations for inaccuracies and suggests reliable alternatives.
Bookmarking & Privacy Management
Offer a secure, non-judgmental space for saving and organizing information.
Bookmarking System allows users to save articles, resources, and clinic details privately.
Users can create folders and label bookmarks (e.g., “Sexual Health,” “Relationships”).
Search History Tab:
View and manage past searches
Apply filters and search bar for easy navigation
Privacy options: hide, delete, or clear all history
Settings & Privacy Guide:
Customize text size and contrast for accessibility
Walkthrough guide for privacy best practices
Evaluation Goals
Question Focus
Findings
Most valuable feature?
Users valued search reaction and local resource recommendations
Missing information?
More direct action steps for users facing decisions (e.g., clinic booking, next steps)
Learnability of onboarding?
Users wanted clearer explanations for privacy settings and notification choices
Ease of bookmarking/history?
Users appreciated organization but wanted improved flexibility in labeling and filtering
Tone & cultural sensitivity?
Language was praised for being respectful and inclusive
Overall impression?
Users found Bink valuable but suggested refinements for transparency, customization, and clarity
Reflection on Process & Learnings
Design System Consistency – We learned the importance of flexible components to maintain UI cohesion.
Creative Ideation – Moving beyond apps/websites led to a more impactful Chrome plugin solution.
Team Collaboration – Open discussions enabled better problem-solving and design iterations.
Research Limitations – Due to participant restrictions, future iterations would benefit from expert input (e.g., teen health professionals).
Bink successfully met its goals of creating a nonjudgmental, inclusive, and educational platform. With refinements in usability, customization, and transparency, it has the potential to further empower teens navigating reproductive health topics. :)