Heather the Health Bot

Inspiration

We were inspired by the growing need for accessible mental health support, especially in environments where traditional therapy might be unavailable or unaffordable. The calming presence of a digital companion that can listen without judgment could bridge the gap between self-care and professional help. The serene blue face of Heather was designed to evoke tranquility and trust, creating a safe space for users to express their thoughts and feelings.

What it does

Heather is an interactive mental health assistant that uses voice recognition to engage in natural conversations with users. Unlike traditional chatbots that require typing, Heather creates a more human-like experience through:

Voice-based interaction with speech recognition and synthesis
A calming 3D animated face that responds to conversation
Personalized mental health check-ins and support
Resource recommendations based on user needs

The ethereal blue interface with subtle star-like elements creates a peaceful environment that helps users feel at ease during conversations about sensitive topics.

How we built it

We developed Heather using a combination of:

React.js for the frontend interface
Three.js for the 3D face model and animations
Web Speech API for voice recognition and text-to-speech
Google's Generative AI for natural language processing
CSS animations for the smooth transitions and ambient effects
HTML5 for the core structure

The face was carefully designed to be calming yet engaging, with subtle animations that respond to speech patterns and emotional cues in the conversation.

Challenges we ran into

Synchronizing the facial animations with speech output
Ensuring reliable voice recognition across different browsers and environments
Creating appropriate responses for sensitive mental health topics while maintaining ethical boundaries
Optimizing 3D rendering for smooth performance on various devices
Balancing aesthetic appeal with accessibility requirements
Resolving dependency conflicts between React and Three.js libraries

Accomplishments that we're proud of

Creating a seamless voice-based interaction that feels natural and responsive
Developing a calming visual aesthetic that users find soothing and trustworthy
Building a system that can recognize emotional cues in speech and respond appropriately
Successfully integrating 3D animation with voice technology in a web application
Designing an experience that users can access without typing, making mental health support more accessible
Completing a functional prototype within the constraints of a hackathon timeframe

What we learned

The importance of subtle design elements in creating a sense of trust and calm
Technical integration challenges between modern web technologies and 3D rendering
The complexity of handling voice data and ensuring privacy
How to create appropriate responses for mental health conversations
The value of interdisciplinary collaboration between design, psychology, and development
The significance of accessibility in mental health technology

What's next for Heather the Health Bot

Expanding the range of mental health resources and techniques
Implementing more sophisticated emotion recognition
Creating a mobile application for on-the-go support
Adding customization options for the interface and voice
Developing offline functionality for areas with limited connectivity
Collaborating with mental health professionals to enhance the quality of support
Building a community feature where users can share experiences (with privacy controls)
Conducting user studies to measure effectiveness and refine the experience

Heather represents just the beginning of what's possible when we combine empathetic design with advanced technology to support mental wellbeing.