Harvard Business School

  • Design System
  • Product Strategy
  • UI/UX Design
  • Front-End Development
  • Storybook

Connecting a global community with a scalable design system

At Upstatement, I led and collaborated on one of a few different engagements with Harvard Business School. The goal was to build a foundational design system that could express the refreshed brand, scale across teams, and stay true to the identity of the school.

I focused on the Alumni experience. HBS has a massive, active alumni network, and the tools they rely on needed to be strong and easy to use. I helped design and implement a smart, intuitive search experience using Storybook, along with a set of modular components for everything from utility to engagement.

Iframe is loading
Image of Browser

Iteratiing on a Modular Design System

The first phase of the Harvard Business School design system was already in place when I joined the project. But there was still plenty to build on, especially when it came to creating a more intuitive and usable experience for Harvard’s active alumni community.

Working within an existing design system came with its own set of challenges and opportunities. Because the system was flexible, we had to decide when to use existing components and when it made more sense to create new ones. That exploration uncovered some interesting design questions.

We ended up expanding the system by fleshing out key page types, pressure-testing the current components, and identifying where new ones were needed.

A screenshot of the HBS design system page template wireframes.
A screenshot of the HBS page hero designs.
Page template wireframes and page hero designs.

Making The System Work

We created a system that felt polished but flexible. It had to be expressive and easy to implement, so we thought through layout rules, spacing, typography, and reusable elements that could hold up across different types of content.

To keep things consistent, I helped document everything in Storybook, including filters, content blocks, cards, profile elements, and search results. The goal was to make it easy for internal teams to build and evolve with confidence.

Iframe is loading
Image of Browser

Improving The Alumni Experience

One of my key contributions was designing a better search and discovery experience for the alumni directory. We made it fast, keyboard-accessible, and simple to filter by name, class year, industry, or location. The interface had to support quick lookups but also feel useful for deeper discovery.

I also worked on flexible editorial layouts for events, stories, and alumni features. These were built with CMS editors in mind, using patterns that could adapt to different types of content.

I also designed a personalized alumni dashboard that serves as a central hub for events, news, and community activity. It gives users a quick snapshot of what’s relevant to them—from upcoming reunions to new connections in their industry—all styled to feel cohesive with the rest of the system.

Alongside the dashboard, I worked on templates for a digital alumni magazine, focusing on flexibility and readability. Editors needed to mix story formats, add rich media, and publish often—so the layouts were built to handle a range of content types without breaking. These patterns live in the design system and make it easy to scale future issues.

A screenshot of the HBS alumni dashboard.
A screenshot of the HBS alumni directory search.
HBS Alumni Dashboard and Directory Search.
Image of an icon

“When we do it right we’re enabling leaders in the world to become change agents—taking resources from HBS and applying them to their work.”

Stakeholder Interview

A screenshot of the HBS alumni magazine.
A screenshot of the HBS alumni homepage.

HBS launched in 2024 and was made by me and the talented team at Upstatement

Want to learn more about my process? Get in touch.