Stanford Blood Center:
Donor App Redesign

// The challenge

Stanford Blood Center is one of the Bay Area's most important regional blood suppliers, providing blood products to Stanford Health Care and Lucile Packard Children's Hospital. During my five years as Marketing & Design Manager, I observed donor drop-off patterns that were clearly a design problem, not a motivation problem.

This case study reimagines the appointment booking flow based on what I witnessed firsthand: the friction points, the anxiety moments, and the missed opportunities to connect donors to the impact of their gift.

// What I observed on the ground

Drop-off happens twice: before the appointment (intent without action) and on the day of (booked but no-show). Five specific friction points drove both:

• Donors didn't understand the differences between whole blood, platelets, and plasma, often chose wrong for their schedule
• First-timers expressed significant anxiety about the process and time commitment before arriving
• The booking flow gave no indication of real-time slot availability, leading to frustrating dead ends
• No connection to impact, nothing in the flow reminded donors that 45 minutes could help up to three patients
• Eligibility countdowns lived only in email, never surfaced proactively where donors actually looked

// The redesigned flow

Four screens, each with a single clear job:

Screen 01, Home greets the donor by name and immediately surfaces eligibility status. A live stats module shows total lifetime donations and estimated lives impacted (a 3x multiplier, each whole blood donation helps up to three patients). Upcoming appointments appear without hunting through confirmation emails.

Screen 02. Choose type is where the old flow failed most. Three options with no explanation is a guessing game. The redesign gives each type a consistent card: name, time commitment, frequency, and who it helps. Informed donors are more confident donors.

Screen 03, Location & date defaults to the nearest center with distance shown clearly, the Menlo Park center at 445 Burgess Drive is the primary location. The calendar only shows dates with available slots for the chosen type. No dead ends.

Screen 04, Confirmed is the emotional peak and the most underdesigned screen in most scheduling apps. The redesign leads with a warm "You're booked!" and a clean summary card, then drives immediately to "Add to calendar", the single most effective no-show reducer.

// Design decisions

// Hypothesized outcomes

This is a portfolio exercise, not a shipped product, outcomes are directional, based on UX research principles and comparable case studies in healthcare scheduling.

Note: No user research was conducted for this exercise, this was a visual and interaction design exploration based on five years working directly with Stanford Blood Center as their Marketing & Design Manager.

A real launch would require A/B testing against the existing flow, session recording to identify remaining friction, and donor interviews to validate that impact messaging resonates differently across first-timers vs. returning donors.

// How this was built

This redesign was designed and prototyped without Figma. Claude served as the AI design partner throughout: translating UX decisions into working HTML/CSS components, iterating on interaction states, and producing a prototype that behaves like a real product rather than a static mockup.

Five years managing design at Stanford Blood Center meant the domain knowledge was already in place. What changed was the toolchain. Working directly in code with an AI design partner compresses the gap between a design decision and a rendered, testable result. There's no handoff layer where intent gets lost.

For healthcare UX, where the stakes of a confusing flow are higher than in most categories, that directness matters. A screen that shows how it actually behaves at a specific moment in a donor's journey is more useful than a mockup showing how it's supposed to look.

// What I'd do next