HitaBloom

An AI-powered health world where multilingual video characters guide patients through doctor-approved care, cultural wellness knowledge, and interactive health quests.

Comment

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for HitaBloom

🌸 HitaBloom — Gamified Healthcare Through Cultural Empathy

💡 Inspiration

Health information can feel confusing and intimidating, especially for children, young people, and families who speak different languages. Dense medical terminology can make it difficult to understand health concepts, follow care instructions, or build healthy daily habits.

I wondered: What if learning about our bodies felt like exploring a magical garden instead of reading a medical textbook?

That question inspired HitaBloom, an interactive healthcare education platform that combines animated body-system characters, multilingual audio, culturally inspired wellness learning, and supportive gamification.

The goal is to make health education more approachable, engaging, and inclusive while keeping professional clinicians at the center of personalized care.

🌿 What It Does

HitaBloom combines a patient experience with a doctor portal.

  • Interactive Body Guides: Meet Luma, Bri, Cora, Bony, and Milo, who introduce concepts related to the lungs, brain, heart, bones, and muscles through character-based learning.
  • Multilingual Learning: Explore health education in English, Hindi, Telugu, Greek, and Yoruba using localized content and audio.
  • Cultural Garden: Discover wellness traditions from different cultures through dedicated cultural guides.
  • Doctor-Guided Care Plans: Dr. Maya can update care instructions and assign quests for patients to follow in the application.
  • Gamified Healthy Habits: Earn experience points, maintain progress, and use Recovery Tokens designed to encourage self-compassion rather than guilt when routines are interrupted.
  • Interactive Patient Experience: Explore body-system areas, engage with characters, and track progress through an illustrated wellness world.

HitaBloom is designed for health education and engagement. It does not replace professional medical advice, diagnosis, or treatment.

🛠️ How I Built It

I built HitaBloom as a React and TypeScript web application using Vite. The interface combines a colorful illustrated world, interactive character experiences, patient and doctor views, and locally stored application state.

Technology stack:

  • React and TypeScript
  • Vite
  • Tailwind CSS and custom styling
  • Wouter for routing
  • Radix UI and Lucide icons
  • React Context for application state
  • Browser localStorage for demo persistence
  • HTML5 video and audio for character experiences
  • Pre-rendered multilingual audio with browser speech synthesis as a fallback

The application uses a built-in deterministic clinical education engine rather than depending on a live external AI API. This keeps the demo self-contained and avoids requiring API keys or a cloud database.

Patient progress and care-plan changes are stored locally in the browser. This supports an easy-to-run demonstration, although it does not provide shared, server-side synchronization between different devices.

🧗 Challenges I Ran Into

1. Keeping character conversations separate

Each character needed its own conversation experience. I worked on separating character and account state so that interactions with one body guide would not unintentionally appear in another character's conversation.

2. Supporting multiple languages

English-only keyword matching was not enough for a multilingual health education experience. I expanded the built-in topic matching to recognize relevant keywords across the supported languages and improved the localized responses.

3. Coordinating character audio and video

Localized audio could conflict with the audio embedded in character videos. I worked on coordinating playback so the application could use the appropriate language track without overlapping speech.

4. Connecting doctor updates to the patient experience

Care-plan changes needed to appear in the patient's view instead of remaining static. I implemented dynamic rendering so that updated instructions and assigned quests can be reflected in the demonstration workflow.

🏆 Accomplishments I'm Proud Of

  • Built a complete patient-and-doctor demonstration experience without requiring external API credentials or a cloud database.
  • Integrated character videos and multilingual audio across five languages.
  • Combined health education, cultural exploration, and supportive gamification in one application.
  • Created a doctor-guided quest workflow and browser-based progress persistence.
  • Focused on making health education approachable without presenting the application as a replacement for clinicians.

📚 What I Learned

Human oversight matters in healthcare. A useful health education application should communicate clearly about its limits and leave diagnosis and treatment decisions to qualified professionals.

Accessibility involves more than translation. Language support, visual presentation, familiar examples, and easy-to-understand explanations all affect how people engage with health information.

Gamification should support rather than shame users. Recovery Tokens reflect the idea that a missed day should not make someone feel that their entire journey has failed.

Reliable fallback behavior matters. Static audio assets, browser speech synthesis, and video fallbacks can make an interactive experience more resilient when a particular media feature does not work as expected.

🚀 What's Next for HitaBloom

  • Add secure, server-side storage for real multi-user synchronization.
  • Work with qualified healthcare professionals to review educational content and safety boundaries.
  • Explore interoperability with healthcare systems using appropriate standards such as FHIR.
  • Expand the cultural wellness library with carefully reviewed sources.
  • Develop richer interactive body explorations and accessibility features.

Built With

  • cultural-wellness
  • english
  • gamification
  • greek
  • healthcare-education
  • hindi
  • html5-video
  • human-in-the-loop-design
  • localstorage
  • lucide
  • multilingual-audio
  • pediatric-wellness
  • radix-ui
  • react
  • react-context
  • responsive-design
  • tailwind-css
  • telugu
  • typescript
  • vite
  • web-speech-api
  • wouter
Share this project:

Updates

Submission history