HealthiHer

HealthiHer
System Design

🩺 Inspiration

Women are still consistently dismissed in healthcare settings, and the numbers are honestly alarming:

84% of women feel dismissed by their doctors (Source)
90% of women have experienced gender bias in healthcare (Source)
Women experience a 20%+ longer diagnostic delay even when presenting similar symptoms (Source)

Those stats reflect a reality many people already feel: you can walk into an appointment prepared, explain what’s wrong clearly, and still leave confused, unheard, or unsure about what the plan even was.

We built HealthiHer because a doctor visit should not feel like a high-stakes memory test. People deserve a system that helps them prepare, remember, and advocate with confidence.

🌸 What it does

HealthiHer is a responsive web app that supports the full medical appointment lifecycle: before, during, and after the visit.

Before the appointment

Users write out symptoms and goals
HealthiHer generates personalized suggested questions to ask the doctor
Questions are organized to help users advocate for clarity, testing, medication details, and follow-ups

During the appointment

Users enter a focused “appointment mode”
The UI stays minimal and calm (not a distracting chatbot)
Users can record the visit so nothing gets lost

After the appointment HealthiHer turns the visit into structured, useful outputs:

Bullet-point visit summary
Follow-up & Next Steps checklist
Medical jargon explained in plain language
Suggested follow-up questions for the next visit
An experimental bias detection score that flags language patterns linked to dismissiveness or stigma

🩷 How we built it

HealthiHer was designed to feel like a private health journal, not a chatbot.

Tech Stack

React 19 + TypeScript + Vite for frontend
Tailwind CSS for styling and consistent UI components
Framer Motion for smooth page transitions
OpenAI Whisper for speech-to-text transcription
OpenAI GPT-4.1-mini for summaries, next steps, follow-up questions, and jargon simplification
localStorage persistence for saved visits and journal history
Vite Dev Server

Here is the full architecture flow we implemented: HealthiHer System Design

🌷 Challenges we ran into

Getting reliable audio recording in the browser: We had permission issues, inconsistent microphone behavior across devices, and making sure the UI still worked after the mic started recording.
Turning raw AI text into clean UI: We didn’t want paragraphs of output or a “chat transcript” vibe, so we had to structure responses into actual app sections like:
- summary bullets
- next steps checklist
- follow-up questions
- terms explained
Keeping the app fast while calling AI services: Whisper + GPT calls can be slow, so we had to design the experience so it still feels smooth when processing happens (clear loading states, stable UI, no freezing)

🩻 Accomplishments that we're proud of

We built a complete “before → during → after” workflow that actually feels like a product, not just one AI demo screen
We implemented an experimental bias score feature based on research: We used patterns inspired by CARE-SD to flag stigmatizing/doubt marker language in a way that is explainable and respectful.

💗 What we learned

Vite + Tailwind made building fast!
Great health UX is about reducing cognitive load for your user.
AI is only intuitive when it returns structured results (not long paragraphs).

👩‍⚕️ What's next for HealthiHer

Hospital integration: Allow users to securely access past medical records, reducing repetitive explanations and improving continuity of care.
Interactive symptom mapping : Add a body diagram feature where users can tap areas and describe pain type, severity, and patterns.
Smarter personalization: Support age-based and condition-based question suggestions (ex: chronic illness, reproductive health, pain management).
AR/VR support: Subtle UI overlays for clarity, definitions, and prompts in AR glasses during appointments. Together, these next steps extend HealthiHer’s mission to support informed, confident advocacy in healthcare spaces.