Sector(s)
Team Members
Project Team
- Jordan Caldwell: Lead UX Engineer — theming, page building, and content architecture
- Philip Frilling: Lead Back-end Engineer — Content architecture and migration, custom code
- Brian Hogue: UX Engineer — theming and page building
- J. Hogue: Director of Design & UX — UX, design, and accessibility consulting
- Jordan Perkins: Digital Project Manager
Based at the University of Washington School of Medicine, the Institute for Health Metrics and Evaluation (IHME) develops and shares evidence that sheds light on the status of health worldwide. IHME’s website, healthdata.org, is packed with reports, tools, and news relied on by clinicians, researchers, and policymakers. With the approaching sunset of Drupal 7, IHME seized the opportunity to move the website to latest version of Drupal, reimagine its complex content architecture, and create a flexible design system to power this go-to population health resource.
Migrating a massive site is challenging enough, but implementing a new site design simultaneously made the process even more complex. IHME wanted a partner with the digital expertise to translate its internal design team’s page designs into a flexible, functional set of components — and then bring it all to life in the latest Drupal environment. Key goals included:
- Successfully moving the site from Drupal 7 to the latest release of Drupal
- Auditing and updating IHME’s extensive set of features to meet its authoring needs while staying within budget
- Translating the designs and style guide produced by the IHME team into accessible digital pages
- Enhancing site security by overhauling security endpoints, including an integration with SSO provider OneLogin
The new healthdata.org site required a delicate balance of form and function. Oomph consulted closely with IHME on the front-end page designs, then produced a full component-based design system in Drupal that would allow the site’s content to shine now and in the future — all while achieving conformance with WCAG 2.1 standards.
Equipping IHME To Lead the Public Health Conversation
Collaborating on a Comprehensive Content Model
IHME needed the site to support a wide variety of content and give its team complete control over landing page layouts, but the organization had limited resources to achieve its ambitious goals. Oomph and IHME went through several rounds of content modeling and architecture diagramming to right-size the number and type of components. We converted their full-page designs into annotated flex content diagrams so IHME could see how the proposed flex-content architecture would function down to the field level. We also worked with the IHME team to build a comprehensive list of existing features — including out-of-the-box, plugins, and custom — and determine which ones to drop, replace, or upgrade. We then rewrote any custom features that made the grade for the Drupal migration.
Building Custom Teaser Modules
The IHME team’s design relied heavily on node teaser views to highlight articles, events, and other content resources. Depending on the teaser’s placement, each teaser needed to display different data — some displayed author names, for example, while others displayed only a journal title. Oomph built a module encompassing all of the different teaser rules IHME needed depending on the component the teaser was being displayed in. The teaser module we built even became the inspiration for the Shared Fields Display Settings module Oomph is developing for Drupal.
Creating a Fresh, Functional Design System
With IHME’s new content model in place, we used Layout Paragraphs in Drupal to build a full design system and component library for healthdata.org. Layout Paragraphs acts like a visual page builder, enabling the IHME team to construct feature rich pages using a drag and drop editor. We gave IHME added flexibility through customizable templates that make use of its extensive component library, as well as a customized slider layout that provides the team with even more display options.
You all are a fantastic team — professional yet personal; dedicated but not stressed; efficient, well-planned, and organized. Thank you so much and we look forward to more projects together in the future!
CHRIS ODELL Senior Product Manager: Digital Experience, University of Washington
IHME had much success managing their content in Drupal 7 and wanted to maintain the authoring experience with a transition to Drupal 10. The platform continued to meet their security and flexibility needs, while the addition of flexible design components for certain pages gave the team a modern set of design tools for complex landing pages.
Technical Specifications
Drupal version:
