profile builder
match/pass (w/ head tilt!)
you matched!
chat after match!

OpenHeart 💖

An accessibility-first dating experience

Alt text

Inspiration

Many dating apps assume that everyone interacts with technology in the same way by reading small text, interpreting visuals quickly, speaking comfortably, or navigating fast animations. For people with disabilities, these assumptions create invisible barriers to connection.

OpenHeart was inspired by the question:

What if dating apps adapted to people instead of forcing people to adapt to apps?

This project aligns directly with the Accessibility & Inclusion pillar by centering disabled users from the very first design decision, not as an afterthought. We wanted to build a space where communication preferences, sensory needs, and assistive technologies are part of the core experience.

What it does

OpenHeart is a full-stack, accessibility-first dating app prototype built using React (frontend) and Python with Flask (backend).

Users begin with a login and are guided through an inclusive onboarding experience where they:

Build a profile with inclusive identity options (gender, pronouns, orientation).
Select a cartoon body and upload or take a photo, which uses the browser's FaceDetector API to automatically crop and place their head.
Choose specific communication preferences (text, voice, audio output).

After onboarding, users enter a swiping experience:

Hands-Free Control: Tilt your head left to pass or right to match using MediaPipe face tracking.
Matches open a chat experience with a chatbot to practice interaction.
The chat supports voice messages with auto-transcription and ElevenLabs text-to-speech for blind and low-vision users.

At all times, users can toggle accessibility modes from a global menu: High Contrast, Colorblind Safe, Dyslexia Friendly (OpenDyslexic font), Reduced Motion, and Large Text.

How we built it

We utilized a modern stack focused on real-time interaction and multimodal feedback:

Frontend: React + Vite, utilizing React Context to handle global accessibility themes.
Computer Vision: We used Google’s MediaPipe Face Landmarker to calculate the head tilt angle based on eye coordinates. The angle is $$\theta$$ determined by:$$\theta = \arctan\left(\frac{y_2 - y_1}{x_2 - x_1}\right)$$
Backend: A Python Flask API manages the chat logic, ElevenLabs TTS integration, and hardware communication.
Hardware: An Arduino integration provides physical, non-visual feedback (LCD icons) for likes and skips.

Challenges we ran into

One of our biggest challenges was balancing feature ambition with usability. It was tempting to add more functionality, but accessibility forced us to prioritize clarity and user control.

Technically, ensuring low latency for the head-tilt detection was difficult; we had to implement a smoothing algorithm to prevent "jittery" swipes. Integrating the Arduino serial communication with a web frontend also required a dedicated Flask bridge to ensure the hardware responded instantly to digital matches.

Accomplishments that we're proud of

We are incredibly proud of creating a fully hands-free swiping interface that works directly in the browser without extra plugins. We also succeeded in creating a "Dyslexia Friendly" mode that goes beyond just a font change, adjusting line-height and background warmth to optimize readability.

What we learned

We learned that accessibility is not a single feature, it’s a system-wide mindset. Small decisions like animation speed, font choice, and audio alternatives can dramatically change how welcoming an app feels. We also learned that designing for the "edge cases" of disability actually creates a more robust and intuitive UI for every single user.

What's next for OpenHeart

OpenHeart isn’t just a dating app, it’s a statement!! Accessibility shouldn’t be optional, hidden in settings, or added later. It should be the foundation.

In the future, we hope to:

Implement Haptic Heartbeats via wearable hardware to signal when a match is typing.
Expand our MediaPipe implementation to include mouth-gesture triggers for users with limited head mobility.
Build out a more robust Community Moderation tool to ensure the space remains safe and inclusive.