Deprecated: Function create_function() is deprecated in /var/www/happycog/wp-content/themes/happycog/functions.php on line 50
Harvard Business School | Happy Cog - Web Design & Development

A design system worthy of the school it serves

Harvard Business School

A design system worthy of the school it serves Harvard Business School



Harvard Business School home page design

Harvard Business School

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.


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

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

Landing pages for each degree type emphasize stories of HBS students and graduates.

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

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

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

More work