UI Design for HBX-Harvard business school marketing website

Introduction

This is the UI design that I did for HBX-Harvard Business School Online learning marketing website. In this website, I was responsible for updating old marketing interface to a user experience and good-looking interface at homepage and course catalog page.

Before I got this task, I researched the website style, the color panels, type font, font size and revise availability. I scale the font sizes, including h1-h5, paragraph, and asked for the font type and color from the marketing team, so that all the design will be kept consistency.

The problem of feature courses on the homepage was dark background which is bad to read, the grids on each part were not aligned and redundant, and the call to action button was multi-colors. Based on the problem, I re-designed the feature part with three grids at once, color the call-to-action buttons in unity, and aligned texts and icons into a grid.

There are design works for this website

 

 

 

 

Introduction-Part 2

In the following part design, I was responsible for updating the UI/UX design for course catalog page. Since HBX-Harvard Business school is launching more online business courses, they need more space, and more clear and direct information, such as course duration, price and course type, for leading customers. It has proceeded three weeks, changed four times and updated two versions until the final versions confirmed.

For a clear and direct information review and receive, I chosen created icons for the important information, such as price, course duration and course type. For a better visual view, I design each course in a grid and align each grid. For delivering, I created hover effect and how the interactive effects will go while coding this website.