Duke Global Health Institute

Redesigning Duke Global Health

Duke Global Health Institute homepage

The Challenge

Improve the Duke Global Health Institute's main site to be a more functional virtual community for their faculty, staff, students and prospective students while improving the editorial experience for their content creators.

Our Approach

Beginning with a design audit in the discovery phase we created wireframe prototypes to help work through content priority and utilized a component library approach to the build with StorybookJS.

The Result

The new site experience showcases the core strengths of the institute while highlighting world-class research to bolster identity while providing a user friendly platform for content editors.

Early prototyping

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.

People conducting a card sort exercise

User-centered design

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.

Duke Global Health tablet screen
Duke Global Health brand colors
Duke Global Health mobile screens

Contemporary front-end frameworks

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.

Custom content migration

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.

Duke Global Health homepage displayed on different screen sizes

Your website is your greatest asset

Research shows that the most successful sites are those that make it easy for visitors to find what they’re looking for.