Support Drupal

UCSF Emergency Medicine

Migrating to modern Drupal to better serve patients in northern California.

UCSF Emergency Medicine website on multiple devices

Client Overview

UCSF’s Department of Emergency Medicine provides comprehensive emergency care to diverse populations at five academic hospitals and other UCSF-affiliated sites across northern California. In addition to delivering evidence-based, patient-centered care, their department is shaping the future of emergency medicine through education and research.

UCSF Emergency Medicine Mobile Gallery

The challenge

The Department of Emergency Medicine at UCSF was on Drupal 7 and needed to migrate onto modern Drupal. Since D7 was end-of-life, the site had many growing problems, including unappealing content with no images or videos to accompany the text, as well as poor web accessibility.

As frequently happens with older sites, the navigation and site map had become disorganized and bloated over time, making it increasingly difficult to find information. 

Since a migration was necessary, the department took the opportunity to update the look and feel of the site as well. While the visuals needed to conform with UCSF’s existing brand standards and design signals, they wished for a new design that would stand out from other UCSF departments.

The solution

The overarching goal was to get onto modern Drupal. Since the whole of UCSF is mostly on Drupal — and to keep the migration going smoothly — we kept tooling that was familiar to them and left some of the standard abilities intact. This included their WYSIWYG editor, which was a tool heavily-used by content editors to create columns, style buttons, quotes, and more. We also audited the content and created an entity-reference diagram to guide the migration.

To further aid their content editors and support future sustainability in the site, we provided out-of-the-box components they could use to build pages. This included adding new features to allow for greater flexibility when creating new pages, including card components, accordions, slideshows, image gallery, and tabs.

While still keeping in-line with the existing brand standards, the visual design was reworked to be more unique from other UCSF departments.

Key features

Designing with Components

The figma file for UCSF Department of Emergency Medicine

Many types of components — including accordions, image galleries, slideshows — were designed into the system to offer content editors flexibility in designs.

Profiles Integration

The team page for UCSF's Department of Emergency Medicine

In order to keep the canonical data in one spot, we integrated with UCSF Profiles in order to pull accurate physician information into the Emergency Medicine site.

Reworking the Navigation

The navigation for UCSF Department of Emergency Medicine

The entire site map was overhauled; we created submenus within each section, making it easier to navigate within the section. It was a huge UX win as well as an accessibility win.

The result

UCSF Emergency Medicine’s staff now has a fully editable site with a tailored editor experience. As for visitors, they now enjoy an improved navigation and UX as well as a more modern look and feel. And due to both Kanopi and UCSF’s commitment to web accessibility, the site is also fully accessible.