University of California Health Milk Bank
Responsive website redesign focused on improved information architecture, usability, and findability.
Overview
UC Health Milk Bank is a nonprofit, HMBANA (Human Milk Banking Association of North America) accredited Milk Bank that provides safe, pasteurized donor breast milk to fragile infants in hospitals and homes. The Milk Bank leads multiple initiatives to promote equitable access to donor milk. The current digital experience lacks a streamlined platform that clearly communicates how visitors can engage with the milk bank.
My Role
Product Manager
Lead UI Designer
UX Researcher
Methods
Competitive and Comparative Analysis
Heuristic Evaluation
Content Analysis & Audit
User interviews
Affinity mapping
Persona creation
User journey map
Sketching
Design Studio
MoSCow + Feature Prioritization
Usability Testing
Prototype Testing
Accessibility Audits
SEO Evaluation
The Focus
Information Architecture
Usability
Findability
SEO
Tools
Figma
FigJam
Figma Slides
Notion
Google Workspace
Zoom
Timeline
3 Week Sprint
Team
5 UX Designers
Constraints
-
3 week project timeline
-
No current website analytics or SEO
-
No current marketing campaigns
-
HIPAA requirements (The Health Insurance Portability and Accountability Act)
-
Smaller milk bank not as well widely recognized as competitors
Initial Problem Space
UC Health Milk Bank serves a critical public health function by collecting, processing, and distributing donor human milk to medically fragile infants. However, the current website experience lacks a coherent information architecture system. Critical issues exist with the site’s findability and navigation that prevent potential donors and recipient families from accessing information and resources they need.
Target audience groups arrive at the site with varying emotional states, literacy levels, and goals, yet the site currently does not clearly tailor content or pathways to distinct needs.
Hypothesis
If the existing UC Health Milk Bank site restructures current information architecture to improve searchability, navigation, education, and overall user experience, then it will increase donor engagement, leading to growth in milk and/or monetary donations.
Research methods
COMPETITIVE ANALYSIS: SWOT
We performed SWOT analyses for UCH Milk Bank, Mother’s Milk Bank of California, Mother’s Milk Bank of Austin, and American Red Cross to help us better understand the competitive landscape and how UCH Milk Bank currently fits in.
HEURISTIC EVALUATION AND CONTENT AUDIT
We evaluated the current UC Health Milk Bank website among usability principles to identify issues and areas of improvement. The site scored the highest in credibility and lowest in delight, accessibility, and learnability which we aimed to improve upon in our redesign.
Key Interview Insights
We conducted 14 user interviews ranging from 30-60 minutes video calls. The Milk Bank provided our team with a list of names of past and current milk donors. Our goals were to gain a deeper understanding of needs, behaviors, and pain points of these audience groups. A few noteworthy insights that we discovered:
"I think the website needs to be streamlined."
"I feel encouraged learning about the nutritional value of my milk and knowing that it will help someone else."
"I was nervous about the process being unsanitary until I learned more about the donor milk testing and pasteurization to ensure it is safe and usable."
"I feared certain health conditions/habits I had would prevent me from being allowed to donate but was relieved when I found out I was still eligible."
"I want to know what the donation process is like before I submit the form."
"I feared certain aspects of the donation process would be too tedious/hard to follow according to protocols but it was much easier than I thought."
"I wish there was more direct communication that didn’t need to go through MyChart because it can feel slightly overwhelming."
Key Takeaways from User Interviews
-
Concerns about milk safety and their eligibility.
-
Heavy reliance on communication with the staff for eligibility and donation process questions instead of the website.
-
Many users did not refer to the website frequently during their donation process.
-
Strong desire to help fragile infants in need.
-
Strong desire to encourage other mothers to donate and spread awareness about the milk bank.
-
Felt the process was easy but would have liked a clearer way to learn more about it in the beginning.
Assumptions Validated by Insights
ASSUMPTION
Users arrive with limited prior knowledge of how milk banks work and desire clear, step-by-step explanations about the donation process
INSIGHT
"I feared certain aspects of the donation process would be too tedious/hard to follow according to protocols but it was much easier than I thought."
Trust, safety, and legitimacy are primary decision drivers, especially for donors and recipient families
“The affiliation with the UC Health university system was the reassurance I needed.”
Donors seek reassurance about screening, testing, handling, and ethical use of their milk before committing
"I was nervous about the process being unsanitary until I learned more about the donor milk testing and pasteurization to ensure it is safe and usable."
Donors have questions and concerns around eligibility and whether or not they qualify health-wise
"I feared certain health conditions/habits I had would prevent me from being allowed to donate but was relieved when I found out I was still eligible."
Revised Problem Space
The UC Health Milk Bank’s current website navigation lacks a streamlined way for potential and current donors to access information and resources pertaining to the milk donation process. This leads to frustration and confusion about what to expect.
Parents lack awareness and education about how to donate, therefore the milk bank has been unable able to reach the families that need it most.
When visitors do get to the website they are unable to easily find what they are looking for.
Who Are We Designing For?
​​
-
Primary Audience: Potential milk donors
-
Recent or soon to be mothers who can donate milk
-
Typically women between 20s-30s who have recently given birth
-
Hypothesis: women who are in a higher socio-economic bracket
-
-
Secondary Audience: Recipient families
-
Parents of premature or medically fragile infants looking to purchase/receive more info and reassurance that this is the right site to trust
-
-
Tertiary Audience: Healthcare professionals (NICU staff, clinicians, lactation consultants)
User Personas
We created 2 different user archetypes to uncover specific goals, needs, and frustrations of the primary audience groups: the prospective donor and the repeat donor.
PROSPECTIVE DONOR
ANGELA
GOALS
AGE
30
OCCUPATION
Marketing Manager
LOCATION
San Diego, CA
LIFESTYLE
On maternity leave, periodic contract work
NEEDS
FRUSTRATIONS
-
Wants to donate safely and responsibly to a hospital affiliated milk bank​
-
Wants reassurance that her donation is making a real impact​
-
Wants to be able to seamlessly balance donation with caring for her own baby
-
Needs a simple step by step explanation of the process from interest to first drop off​
-
Needs easy access to contact support if she has questions about medications, supplements, or health history​
-
Needs clear storage and hygiene guidelines so she feels confident her milk will be accepted
-
Drop off or shipping logistics that require too much effort to understand​
-
Uncertain about eligibility criteria as she has had some personal health concerns so wants to make sure there is thorough screening to account for this
REPEAT DONOR
HANA
GOALS
AGE
35
OCCUPATION
Interior Designer
LOCATION
San Diego, CA
LIFESTYLE
Stay-at-home mom currently on maternity leave
NEEDS
FRUSTRATIONS
-
Complete repeat donations as efficiently as possible​​
-
Feel acknowledged for being a returning donor​
-
Encourage other eligible mothers to learn about and consider donation
-
Needs visibility into her current eligibility status and what is required next​
-
Needs fast access to drop off times, locations, and any scheduling steps​
-
Needs streamlined communication that considers her prior experience
-
Drop off details that are not immediately visible​
-
Uncertainty around whether policies or guidelines have changed since her last donation​​
-
Lack of easy to share resources she can send to interested friends
Information Architecture
EXISTING SITE INFORMATION ARCHITECTURE
The existing site information architecture is split into two separate websites: the Milk Bank site branch of University of California Health and the Milk Bank Home. The Milk Bank Home can only be accessed when users click on the 'Purchase Milk' CTA button. The two separate sites caused confusion among the users that we interviewed.
EXISTING SITE
EXISTING SITE MAP
PROPOSED SITE MAP
Our goal was to create one unified site for donors and recipients. We created this site map with a goal of making the content easier to find and understand among prospective donors, current donors, recipient families, and healthcare professionals.
User Flow
We created user flows with a goal of diving deeper into the hearts and minds of potential and current donors as they navigate two tasks:​
1
​Find and fill out the new milk donor interest form.​​
2
Schedule a milk donation drop-off.​
These two tasks were later part of the usability testing that we conducted.
Key Features
Blood Testing and Milk Drop-Off Locator Map allows users to: ​​
-
Search for locations and services offered based on user's location
-
Book drop-off appointments through MyChart Log In
-
View address, directions, and hours
-
Filter by services offered and distance
MyChart Log In Integrated Link allows users to: ​​
-
Book appointment dates and times
-
View past and upcoming appointments
-
View record of past donations and milk nutritional analysis results
Ai Chat Bot allows users to: ​​
-
Chat with an AI assistant to answer basic questions
-
Contact a live staff member by e-mail or phone
Usability Testing
We conducted usability tests on both the existing site and our hi-fidelity designs:​
TASK 1
Find the Milk Donor Interest Form.
TASK 2
Find the 5 steps to milk donation.
TASK 3
Find the milk drop-off locations.
TASK 4
Find the new outpatient family form.
TASK 5
Find the merchandise section.​​
Users had difficulty finding the milk drop-off locations initially, so we added a path to it within the primary navigation, under 'Donate.' We also removed the horizontal bars next to each nav menu item.
We added 'Services Offered' to correspond with each drop-off location, so users can view what services are offered at each site and filter by services offered.
We moved the 'Donate Milk' and 'Donate Funds/Support Us' CTA buttons above the primary navigation instead of below so that the dropdown navigation menus don't interfere with the buttons.
Outcomes: Metrics
We defined 100% success as direct paths under 10 seconds with no more than 2 misclicks. When we tested the existing website, all users failed to find the link for milk drop-off locations. The overall navigation average was over 1 minute each with a success rate under 50%. Based on our proposed new design, we improved over 75% in all task categories.
TASK 1
ROUND 1
34 secs avg
ROUND 2
15 secs avg
-19
sec decrease
TASK 2
ROUND 1
28 secs avg
ROUND 2
6 secs avg
-22
sec decrease
TASK 3
ROUND 1
2+ min avg
ROUND 2
17 secs avg
-103
sec decrease
TASK 4
ROUND 1
1 min avg
ROUND 2
11 secs avg
-49
sec decrease
TASK 5
ROUND 1
23 secs avg
ROUND 2
9 secs avg
-14
sec decrease
Branding & Style Guide
Next Steps
-
Further user research on other user groups
-
Create account and calendar feature separate from MyChart Account
-
Collaborate with multi-channel marketing campaigns to boost awareness
-
Integrate SEO analytics for tracking purposes
-
Explore potential partnerships such as the San Diego Blood bank and Night & Day Lactation Counselors