Harvard Business School

A flexible design system with the tools to maintain it

Harvard Business School

HBS About - Facts & Figures

Harvard Business School (HBS) has one of the world’s most prestigious and exclusive MBA programs—only 12% of applicants were admitted in 2016. Notable alumni include Michael Bloomberg, Meg Whitman, Sheryl Sandberg, Henry Paulson, and Sal Khan.

Happy Cog worked closely with HBS to bring their new visual identity to the web. Our work spanned parallel redesign efforts that focused on the About and MBA sections of the site each with their own stakeholder groups. Balancing their needs in tandem was a unique challenge, but provided tangible benefits. We were able to test layouts and interface patterns across a broad spectrum of scenarios. This process provided insight into how to future-proof the design system.

A design system based upon a unifying pattern language can only be successful if the instructions on how to deploy it are clear. We created a comprehensive style guide constructed for both designers and non-designers, focused on reinforcing design intent over documenting aesthetic decisions. A good manual must educate, not dictate.

We designed our work to be responsive, but opted to lead with a fixed-width implementation to allow the HBS team to become acquainted with the system. Through a follow-on effort, the system was made fully responsive, including fluid layouts, new navigation patterns, and an updated style guide.

What we did

  • Research
  • Design & Branding
  • Development
  • Front-end Development
  • Stakeholder interviews

Industry

  • Higher Education
HBS_Mobile

Small screen navigation styles were derived from their large screen counterparts.

HBS-comp-about

About page gives potential students a clear idea of what they could accomplish with a degree at Harvard Business School.

HBS-comp-newsroom

The newsroom includes multi-faceted search to browse through news stories from the college and alumni.

HBS-comp-promo

Promotional pages can be used for campaigns or information that requires extra marketing.

HBS-comp-styleguide

We assembled a digital style guide—a playbook for the HBS team to follow when extending the design system in the future.