Intending to highlight academic programs, research, and resources — as well as showcase their world-class education options — we implemented a flexible approach for the institute’s content creators and sought to give them the tools they need to highlight Duke’s interdisciplinary approach to global health challenges. This began by paper prototyping navigation possibilities and prioritizing key areas of focus with their stakeholders. The resulting site structure was both functional and smart — utilizing an optional sidebar menu with jump links for content-dense sections as a complement to the main navigation.

Research shows that the most successful sites are those that make it easy for users to find what they’re looking for. The new design of Duke Global Health Institute's (DGHI) site allows visitors to find what they want more quickly. The new visual design also establishes a cohesive digital identity within the DGHI brand while highlighting their world-class research and resources.

Our component library approach made for a CMS integration with both StorybookJS for modular components as well as a Vue.js app to consume and display data from Drupal views.  

We crafted numerous ways to highlight and refresh content including featuring an interactive world map, submenus for navigating content-rich sections, and a powerful tool for finding upcoming events. Custom access controls were implemented to allow DGHI faculty members to log in with their Duke NetID and edit their profiles and projects.

As part of the project, we migrated a large majority of DGHI’s content from their old site to Drupal 8, including developing custom solutions along the way like image cropping. This allowed content editors to use newly designed components as intended to highlight their long-standing work by elevating their existing rich imagery.