Case studies — WEB PLATFORM · UI/UX REDESIGN
101 components. 28 hooks. A platform patients trust.
Full UX/UI redesign and frontend rebuild for a peer mentor matching platform. React, Zustand, and a 7-second reveal.
AT A GLANCE
React components covering the full platform surface, onboarding, profiles, matching, messaging, admin, notifications
Encapsulating auth, matching, chat, notifications, form validation, and analytics event logic
Transactional + marketing templates in React Email, design-system-matched
The rebuild.
PatientPartner connects patients with peer mentors who've navigated the same medical conditions. The redesign needed to honor that emotional weight, every interaction had to feel trustworthy, warm, and human.
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, admin workflows), and rebuilt every screen with a design system centered on emotional safety and medical clarity.
The most emotionally significant moment in the product is when a patient is matched with a mentor. We designed a 7-second cinematic reveal sequence: the mentor profile fades in with a progressive reveal, shared condition context builds on screen beat by beat, creating emotional connection before the first message is ever sent. Built with Framer Motion.
Predictable state slices for auth, mentor matching, chat threads, and user preferences, all with Zustand devtools middleware for debugging. 28 custom hooks encapsulate all logic: auth state, real-time chat, match status, notification counts, form validation with field-level error handling, and analytics event firing.
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.
Auth state and notification counts stay in sync across multiple open browser tabs using the native BroadcastChannel API. Log out in one tab, every other tab reflects it immediately. A new message in a background tab increments the badge counter everywhere.
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.
Why the reveal matters.
PatientPartner's 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. The 7-second reveal reframes the moment. The animation isn't 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've been matched with, they already feel the connection. → Beat 1 (0–1s): Condition match revealed → Beat 2 (1–3s): Procedure / treatment context fades in → Beat 3 (3–5s): Shared recovery timeline appears → Beat 4 (5–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, same spacing scale, same interaction primitives. Nothing was one-off.
Onboarding flows — 18 components Mentor profiles + match cards — 22 components Messaging UI — 15 components Admin dashboard — 24 components Notifications + system UI — 22 components
Technology.
On the bench.
- React + Vite
- Zustand
- Tailwind v4
- Framer Motion
- React Email
- MockActionCable
- BroadcastChannel API
- Rails ActionCable