UCSF Health Website Redesign
I led UX strategy and design across a full redesign of the UCSF Health website, working across information architecture, research, wireframing, content strategy, and design system requirements.
Overview
UCSF Health wanted to redesign its main website while migrating to Sitecore XM Cloud. The site needed to support patients and caregivers looking for everything from providers and locations to services, conditions, and appointments.
A major part of the work was restructuring how this content was organized and connected, rather than simply redesigning the existing pages.
Main Role: User Experience Designer, UX Researcher
Additional Role: Business Analyst, Content Strategist
Time Frame: 16 months
Tools: Figma, Miro, Confluence, Jira
Main Role: User Experience Designer, UX Researcher
Additional Role: Business Analyst, Content Strategist
Time Frame: 16 months
Tools: Figma, Miro, Confluence, Jira
Understanding the problem
The biggest challenge was figuring out how to organize a very large healthcare site around what people actually come to do.
Patients, caregivers, prospective patients, and other audiences had different needs, but the existing sitemap and content structure didn't always make those paths clear.
I worked through discovery sessions with the team to identify business objectives, content priorities, technical dependencies, and the areas that needed the most attention.
The biggest challenge was figuring out how to organize a very large healthcare site around what people actually come to do.
Patients, caregivers, prospective patients, and other audiences had different needs, but the existing sitemap and content structure didn't always make those paths clear.
I worked through discovery sessions with the team to identify business objectives, content priorities, technical dependencies, and the areas that needed the most attention.
Defining the structure
Before getting deep into page and component design, I worked with the team to define the structure behind the site.
This included:
Reworking the information architecture, taxonomy, and sitemap
Using tree testing to validate navigation and findability
Reviewing healthcare and non-healthcare sites for navigation patterns
Defining content and page types
Establishing the four UCSF Experience Principles: Connected, Dynamic, Inclusive, and Personable
The goal was to make the structure work across a much larger content ecosystem without making the navigation harder to use.
Before getting deep into page and component design, I worked with the team to define the structure behind the site.
This included:
Reworking the information architecture, taxonomy, and sitemap
Using tree testing to validate navigation and findability
Reviewing healthcare and non-healthcare sites for navigation patterns
Defining content and page types
Establishing the four UCSF Experience Principles: Connected, Dynamic, Inclusive, and Personable
The goal was to make the structure work across a much larger content ecosystem without making the navigation harder to use.
Taxonomy brainstorm
Content modeling
Competitive Analysis
Visual sitemap
Wireframing a solution
With the new structure taking shape, I worked through potential solutions for the major problem areas:
Establishing clearer navigation and section structures across the site
Defining reusable page types instead of designing each page independently
Connecting related providers, locations, services, conditions, and research
Prioritizing the information users needed most on each page
Creating clearer pathways into care and appointment-related tasks
Wireframes helped us work through page structure before getting distracted by visual design. I iterated on layouts with the team and used journey mapping to understand how different pages connected to the larger experience.
With the new structure taking shape, I worked through potential solutions for the major problem areas:
Establishing clearer navigation and section structures across the site
Defining reusable page types instead of designing each page independently
Connecting related providers, locations, services, conditions, and research
Prioritizing the information users needed most on each page
Creating clearer pathways into care and appointment-related tasks
Wireframes helped us work through page structure before getting distracted by visual design. I iterated on layouts with the team and used journey mapping to understand how different pages connected to the larger experience.
Home page wireframe
Home page design (after testing)
Location listing wireframe
Location listing design
Service detail wireframe
Service detail design
From wireframes to designs
I created wireframes and annotations covering layout, content requirements, responsive behavior, accessibility, and functionality. These were used by the design and development teams to move the work into high-fidelity designs and production.
Throughout the build, I reviewed UX and development work to make sure the implemented components stayed aligned with the designs and requirements.
I created wireframes and annotations covering layout, content requirements, responsive behavior, accessibility, and functionality. These were used by the design and development teams to move the work into high-fidelity designs and production.
Throughout the build, I reviewed UX and development work to make sure the implemented components stayed aligned with the designs and requirements.
Testing the experience
We tested the homepage experience and main navigation label names with 10 patients and caregivers using an interactive Figma prototype across desktop and mobile.
Some of the findings were straightforward:
“Find Care” and “Find a Doctor” may confuse some users.
“I need care now / soon / support” wasn't prominent enough since users on the homepage are typically trying wayfind through the site.
Users were unsure who the intended audience was for “Refer a Patient” label
Some participants expected search to behave more like an AI-powered search experience.
These findings informed changes to the experience and helped identify opportunities for future phases (like AI-powered search experiences).
We tested the homepage experience and main navigation label names with 10 patients and caregivers using an interactive Figma prototype across desktop and mobile.
Some of the findings were straightforward:
“Find Care” and “Find a Doctor” may confuse some users.
“I need care now / soon / support” wasn't prominent enough since users on the homepage are typically trying wayfind through the site.
Users were unsure who the intended audience was for “Refer a Patient” label
Some participants expected search to behave more like an AI-powered search experience.
These findings informed changes to the experience and helped identify opportunities for future phases (like AI-powered search experiences).
Outcomes and takeaways
The redesign established a new information architecture, content model, and component system for the UCSF Health website, alongside the move to Sitecore XM Cloud.
The project reinforced the value of working through content and structure before visual design—especially on a site with this many audiences and content types.
The research also showed how small decisions around labels, navigation, and content placement can have a big impact on whether people find what they need.
The redesign established a new information architecture, content model, and component system for the UCSF Health website, alongside the move to Sitecore XM Cloud.
The project reinforced the value of working through content and structure before visual design—especially on a site with this many audiences and content types.
The research also showed how small decisions around labels, navigation, and content placement can have a big impact on whether people find what they need.
