101 Components. 28 Hooks.A Platform Patients Trust.
A full UX and UI redesign and frontend rebuild for a peer mentor matching platform, on React, Zustand and a seven-second match reveal. Every screen redrawn.
The Actual Interface.
A Match Was Surfaced Like A Task In A To-Do App.
PatientPartner connects patients with peer mentors who have navigated the same medical conditions. The redesign needed to honour that emotional weight: every interaction had to feel trustworthy, warm and human.
The core value proposition is peer human connection, someone who has been exactly where you are. The old product surfaced a match with a list card, the same UI pattern as a task management app.
Every Screen Reconceived, From One System.
UX and UI redesign. A complete platform redesign from scratch: new information architecture, interaction patterns and component library. We audited the existing product, mapped all user flows, patient onboarding, mentor matching, messaging and admin workflows, and rebuilt every screen with a design system centred on emotional safety and medical clarity.
The seven-second reveal. The most emotionally significant moment in the product is when a patient is matched with a mentor. We designed a cinematic reveal sequence: the mentor profile fades in with a progressive reveal and shared condition context builds on screen beat by beat, creating emotional connection before the first message is ever sent. Built with Framer Motion.
State architecture. Predictable Zustand state slices for auth, mentor matching, chat threads and user preferences, all with devtools middleware for debugging. 28 custom hooks encapsulate the logic: auth state, real-time chat, match status, notification counts, form validation with field-level error handling, and analytics event firing.
MockActionCable. PatientPartner's backend uses Rails ActionCable for real-time chat. We built MockActionCable, a custom WebSocket simulation layer that mirrors the ActionCable API contract exactly, letting the frontend team demo real-time chat features in Storybook and review environments without a live backend running.
Cross-tab sync. Auth state and notification counts stay in sync across multiple open browser tabs using the native BroadcastChannel API. Log out in one tab and every other tab reflects it immediately. A new message in a background tab increments the badge counter everywhere.
20 React Email templates. Every transactional and marketing email rebuilt in React Email, matching the new design system precisely. Match confirmation, mentor introduction, message notification, onboarding sequences and re-engagement campaigns, all tested against major email clients via Litmus.
The Reveal Earns The Connection Before The First Message.
The seven-second reveal reframes the moment. The animation is not decorative: each beat reveals a new piece of shared context, same condition, same procedure, same stage of recovery, before showing the mentor's face and name. By the time the patient sees who they have been matched with, they already feel the connection.
- Beat 1, 0 to 1s: condition match revealed
- Beat 2, 1 to 3s: procedure and treatment context fades in
- Beat 3, 3 to 5s: shared recovery timeline appears
- Beat 4, 5 to 7s: mentor portrait and name reveal
Component discipline. 101 components sounds like a lot. It was a deliberate constraint: every surface of the product is built from the same design tokens, the same spacing scale and the same interaction primitives. Nothing was one-off. Onboarding flows account for 18 components, mentor profiles and match cards 22, messaging UI 15, the admin dashboard 24, and notifications plus system UI 22.
- React + Vite
- Zustand
- Tailwind v4
- Framer Motion
- React Email
- MockActionCable
- BroadcastChannel API
- Rails ActionCable
Let’s Build What’s Next.
Bring the business problem. We’ll talk through what would make a difference and where to start.