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.

Visit PatientPartner → Work with us

AT A GLANCE

Component Library

101

React components covering the full platform surface — onboarding, profiles, matching, messaging, admin, notifications

Custom Hooks

Encapsulating auth, matching, chat, notifications, form validation, and analytics event logic

Email Templates

Transactional + marketing templates in React Email, design-system-matched

WHAT WE BUILT

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.

UX/UI Redesign

Every screen reconceived

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 Reveal

7-second mentor match animation

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.

State Architecture

Zustand with devtools

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.

MockActionCable

WebSocket simulation layer

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

BroadcastChannel auth sync

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.

Email System

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.

DESIGN DECISIONS

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.

Component coverage areas

Onboarding flows 18 components

Mentor profiles + match cards 22 components

Messaging UI 15 components

Admin dashboard 24 components

Notifications + system UI 22 components

STACK

Technology.

UI Framework

React + Vite

State Management

Zustand

Styling

Tailwind v4

Animation

Framer Motion

React Email

WebSocket Sim

MockActionCable

Cross-Tab Sync

BroadcastChannel API

Backend Protocol

Rails ActionCable

patientpartner.com ↗

BUILD WITH US

Need a platform rebuild
that people actually trust?

We redesign and rebuild complex web platforms — component systems, state architecture, and interactions that earn user trust.

Start the conversation →