Harvard Business School Online Website- UI Design


This is the User interface design that I created for the marketing website when I worked at Harvard Business School Online. The marketing manager asked me to reskin its marketing website, improving the look and feel of it. They intended to attract more customers and registration for the online courses at Harvard Business School, at the same time, improving the brand identity of HBX.

What did I do?

I was the UI designer responsible for executing all visual designs improving the look and feel of the marketing website, ensuring all interactions are intuitive and easy for customers and final hand-off to engineering for updating all the visuals. I collaborated with the marketing manager and engineering to define and implement innovative solutions for the marketing site direction, visuals, and experience. My design objective was to strengthen its brand identity and course registration. Thus, I revised the information layout of the available online business course on the website and brought the most convenient direction for the customers to easily scan the online courses, understand HBX and find the teaching objective and etc.

Before I started the design, I did a competitive analysis by researched many other marketing websites of Ivy League universities.  I carefully researched the current color panels, type font, font size at the marketing site of HBX. The purpose of it was to maintain its clearly CSS structure while ensuring the design change would be easily accepted by the engineering team. I scale the font sizes from H1-H5 of its website, and retained its basic style standards, like web font and color theme, for the consistency consideration at Havard business school.

Problem Analysis

The problem in the old website was the featured course information was not clearly layout, and the color of its background was dark which was hard for customers to read. Also, the course card and screen grids on each part were not aligned. The call to action button was not consistent. The color was multi-colors, which was hard for users to remember and take actions.

When I found the problems, I spoken through the problems with my UX directors, asked for advice. We both agreed on the problems found. I made a plan to make adjustments to the user interface design. Then, I started the design.

UI Design in Homepage

When the design plan made, I started my steps for creating the visual design. I made two visual versions for my UX director and marketing manager to comparison and make a decision.

I built the UI design in Sketch. The 2 version shows below:

Responsive Design


Design Overview

UI Design in Course Catalog Page

In the following design, I was responsible for updating the UI for the course catalog page. Since Harvard Business School Online has developed many new online business courses, it needed space and a clear layout on the page to show more information, such as course duration, price and course type.


The challenge of updating the UI was the limited time. I only had 2 weeks to make the change, had the discussion, and design the page and finally delivered it.

What did I do?

For delivered clear and direct information for customers quickly learn about the corse information, I chose to create some visual icons for important information, such as price, course duration and course type. For a better visual view, I design the information of each course in a grid and align it clearly. For interaction, I created a hover effect and how the interactive effects go while users interact with the site.

UI Comparison


UI Design

Mockup showcase