UCSF ObGyn
A rebuild on modern Drupal created an engaging, and beautiful website.
Client Overview
UCSF Department of Obstetrics, Gynecology & Reproductive Sciences (UCSF ObGyn) strives to advance research, education, and advocacy to improve reproductive health for everyone. As a national leader, they advance groundbreaking research, provide compassionate care, and prepare the next generation of medical professionals.
Services provided
UCSF ObGyn mobile gallery
The challenge
The UCSF ObGyn website presented several key challenges at the outset of the project, starting with its basic foundation. The internal ObGyn team was working within an aging Drupal 7 platform that had reached end-of-life, creating significant limitations in flexibility, content creation, and lacking the ability to build new pages or highlight impact areas. The staff were effectively stuck, unable to create the components they needed to tell their stories or support their mission.
In addition, visitors — including patients, future residents, and healthcare providers — found a site that appeared dated and lacked content that held their interest. ObGyn was missing a lot of opportunities to connect with users due to a poor search, a disorganized site map, and no real story to tell.
Our primary goal was to transform the site into an engaging, beautiful, and mission-driven digital experience on modern Drupal that would help propel UCSF ObGyn’s commitment to improving the lives and health of all women through excellence, innovation, and leadership in patient care.
The process
Discovery Work
Extensive research and discovery work — which included surveys, heat mapping, a full content audit, interest-holder meetings, and a deep dive into the site’s analytics — defined the path forward as we addressed all the goals of the project.
A component-based design system
An extensive design process resulted in a system that enables UCSF to create dynamic pages while still following UCSF brand guidelines.
The solution
We began with extensive discovery work to pinpoint the key pain points. Our research helped us assess how well the existing website was meeting user needs and identify opportunities to refine both design and functionality.
Our activities included:
- A review of analytics and data
- Click-map and heat-mapping analysis
- On-site surveys
- Key decision-maker workshops
- A content audit
Once we understood how UCSF ObGyn’s audiences were navigating the site, we moved into an in-depth design phase. We optimized the homepage for impactful visual storytelling, using reassuring language to support patients and compelling messaging to help potential residents see UCSF ObGyn as the right fit.
The new design establishes a clear narrative flow. Headings, subheadings, lists, bold text, and call-to-action buttons help users move intuitively down each page. The visual system was modernized with bold, audience-focused imagery, motion design, and user-controlled interactions, all while aligning closely with UCSF’s broader brand standards.
We also restructured the site’s information architecture to better serve user needs and departmental goals. This included defining a clear site structure, outlining key pages and functionality, and mapping how content relates across the system. Content was cleaned up and rewritten to fit the new component framework. Additionally, much of the valuable information had been buried in PDFs, so we improved readability and accessibility by bringing that content onto the site and eliminating dense, difficult-to-read text blocks.
Search was significantly improved by optimizing titles and page descriptions and introducing filterable topics, allowing users to find the information they need with greater ease and efficiency.
Key features
Mega Menu
We developed an optimized sitemap and streamlined multi-level navigation to help audiences easily find what they need across pages and content types. The result is a set of mega menus that present the full breadth of their work in a clear, organized way.
Showcasing new initiatives
The designs accounted for UCSF Obgyn’s various initiatives, such as areas of impact and areas of care, allowing these pages to highlight publications, research, and more.
Integration with UCSF Profiles
UCSF Profiles is a separate website where faculty and staff profiles are hosted. Pulling from the canonical database allows UCSF Obgyn to showcase staff and faulty information without having to manage that content directly.
The result
The new design gives site visitors all the information — and reassurance — they need to make solid decisions about their interactions with UCSF ObGyn. Users can search easily and get the information quickly due to the improved performance on both desktop and mobile. Updated storytelling and audience-focused imagery better convey the information while aligning closely with UCSF’s broader brand standards.
But it’s not just visitors that are delighted. Back-end editors now have a flexible, component-based system that empowers UCSF to build dynamic pages that showcase both current and future work.
