Harvard University
How we created a design-forward WordPress website that highlights Harvard University’s vibrancy and breadth of expertise
The challenge
Harvard’s previous flagship website was hard to navigate, especially for prospective students who aren’t familiar with the university’s 13 schools. The site also lacked the technological and design elements necessary for captivating storytelling.
The Solution
Craft a web experience that demystifies the university’s structure, helps diverse audiences locate relevant information, and showcases engaging editorial content.
Balancing historical significance with 21st century business goals
The visual design process for Harvard.edu involved close collaboration between Modern Tribe and the Harvard Public Affairs & Communications team. The goal was to create a visual design that feels innovative and agile, to support ever-changing content and narrative storytelling, yet preserves the university’s enduring legacy. Harvard is older than America itself, and we looked for opportunities to highlight its historical significance.
Through continuous iteration, we landed on a design that relies on bold typography and imagery to ensure that every page layout feels as impactful as its content. From there, we created a system of typefaces, color, and UI elements, and extended them to every block, page, and feature we developed.
Guiding visitors to their desired information destinations
Harvard.edu is the digital gateway to the university, serving current students, faculty members, and staff, not to mention prospective students and others seeking information about its museums, research, and history.
Most visitors are looking for information that’s housed on other Harvard sites, and the main navigation needed to efficiently funnel them to those destinations. Since Harvard.edu essentially acts as a tour guide, its main nav required more space than usual to provide context. Our solution is a multi-tiered flyout experience that lets visitors drill down without being overwhelmed with options.
Creating a model of accessibility
Accessibility was a key consideration at every stage of this project, from initial design and development through frontend implementation. Harvard set out to build a model of accessible and user-centric design and we collaborated with their dedicated accessibility team early on.
The main site navigation is a complex full-screen display consisting of several menus. A custom landmark in the search and menu toggle section helps screen reader users easily locate and navigate them.
When keyboard and screen reader users open or close the main menu and submenus, JavaScript shifts the focus programmatically to the most appropriate element.
Focus-visible pseudo-class creates a visual experience that suits both keyboard and mouse users, providing a highly visible focus style for the former and more subtle focus or hover states for the latter. In areas that have multiple links to the same URL, such as cards, JavaScript prevents duplicate links.
Showing students their options
If you’re like most of the general public, and us prior to this project, you don’t know that Harvard University is an umbrella for 12 degree-granting schools and the Radcliff Institute for Advanced Study. In other words, students earn degrees from Harvard’s schools, not the university. This structure often leads to confusion among prospective students—which we saw as an opportunity for innovation.
After careful consideration, we went with a program browser that allows visitors to search and filter more than 200 programs by area of study, degree type, school, keyword and more. To create the most robust results possible, Harvard used analytics to identify common search words and applied them to related programs.
Bringing fresh content In Focus
HPAC, Harvard’s central communications office, wanted to highlight their editorial content about events and timely issues on the Harvard.edu homepage—a break from traditional higher ed site design. Needless to say, we were game.
The clear solution was a modular design system that could be reconfigured quickly and painlessly by staff who may not have extensive design or development expertise. We created custom Gutenberg blocks for text, pull quotes, video, and audio as well as image containers for portraits from the Harvard community. This set of tools, which we named In Focus, makes it easy for site admins to do topical page “takeovers” that educate and inspire.
Forging a fruitful friendship
Working sessions with HPAC throughout the goal-setting and concepting processes kept our teams in sync, and paved the way for a strong partnership that we’re really proud of.
A collaborative approach to design, development, and content strategy ensured that Harvard’s priorities were at the heart of every decision we made. And candid conversations gave us the unfiltered feedback we needed to refine our work.