Harvard Business School

The Challenge

HBS expertise and programming is vast and diverse. Faculty translate insights and deliver ideas that drive worldwide engagement. But this wealth of content and communities were limited by their technology. The sprawling, decentralized universe of digital properties, with varying levels of consistency, quality, and purpose, was “spackled together,” as one stakeholder put it.

This was frustrating for everybody creating and using the HBS sites—marketing strategists, editors, and users. The sites were hard to update and hard to navigate. The muddy messaging and inconsistent design were also damaging perception of the HBS brand. The sites reflected internal structures over user needs, which made content strategy and functionality for different audiences difficult to execute.

We imagined a foundational design system that would express the quality and ethos of the school’s brand and support site-specific design, development, and strategy.

The Vision

What would a useful, maintainable system for dozens of internal and public-facing HBS sites look like, and how would it function? To find out, we engaged with hundreds of stakeholders and users through interviews, workshops, and surveys. We distilled our research into a strategy that would provide design system coverage across the HBS digital ecosystem as well as drive brand, editor, and user experience improvements.

Building for adoption

We grounded our approach in utility, while allowing for the unexpected. With a thoughtful set of highly user-friendly tools, HBS users can stay consistent while doing more with less, faster than ever before. Ease of use encourages compliance and creativity, and there are immediate payoffs to using the new tools at hand—there’s the opportunity for a drastically increased speed to market, and the system’s flexibility can be leveraged for easy testing and data benefits.

The right tools don’t matter if content creators don’t know about them. We developed comprehensive and clear usage guidelines, strategies for sharing updates, and supporting features like interactive code reference for developers and intuitive, specialized tooling for marketers and content creators. Accounting for the long-term, we helped HBS design a sustainable plan for an internal team, operating with the mindset that HBS digital is not a one-off project. It’s a live product in need of longterm caretaking, innovation, and support.

Launch an unmistakable digital brand

Bold visuals and strong priorities add up to a world-class website that’s both useful and striking.

Aligned with the broader Harvard brand, but reimagined specifically for the screen, the HBS design system allows for moments of drama and focus. Finding the right balance between flexibility and consistency allows HBS to reduce maintenance overhead, scale the brand, and adapt for different audiences while maintaining continuity. Consistency is ensured and creativity is unlocked across a diverse digital ecosystem and a spectrum of different contexts, from purely transactional pages to inspiring editorial moments.

There’s a new sense of discovery and potential for users. Big ideas are framed with a modern design language that resonates with the HBS reputation for innovation. By visually pegging content to larger concepts, HBS can encourage users to make connections and engage further. As teachers and thought leaders, sharing concepts is what HBS does naturally, and highlighting ideas showcases the pedagogy, people, impact, and resources that distinguish HBS as the best.

Unify the ecosystem

A massive digital universe demands both limitations and options. We developed a reduced amount of smart template variations that maintain common structures and have a large library of adaptable universal components. Pages are informed by available content and jobs to be done, and the design follows suit.

The user experience feels premium, with frictionless processes for tasks supported by intuitive wayfinding, clear entry points, smart search, and speed. Consistent patterns let users feel oriented and confident enough to go off the beaten path and explore.

Drive impact with elevated editorial

The world trusts HBS as a primary source for research and business insights. We worked to elevate the editorial presentation and strategy to match the quality of the content, with the aim of furthering the reach of HBS. This helps democratize access to their intellectual capital—a core part of their mission—while building brand affinity.

Key themes were identified and prioritized. Impact of each editorial piece of content is amplified by cross promotion capabilities and art direction for bespoke illustration and imagery.

What Comes Next

The foundational design system provides coverage for most common needs across the HBS digital ecosystem while elevating the HBS brand, inspiring content creators, and enabling technology to scale. It now acts as a foundation for dozens of internal and public-facing sites, but we knew we’d uncover additional needs as specific sites were developed.

We’re currently working on extending the design system across various sub-properties, elevating, analyzing, and solving unique priorities and problems in context of the larger system. Focus areas include sales funnels and conversions for distinct user bases and tech strategy for disparate web properties in need of reconnection. As new components and functionality are built to address these needs, they’re added to the core design system—expanding the possibilities for every site in the HBS digital universe. We’ll be sharing updates as we go.