UI Design for a business course at Harvard Business School


This user interface design was for an online business course at HBX-Harvard Business School. This interface is part of the dashboard screens. It is used to answer the questions or see the discussion in a business online course.  The goal of this design is to clearly and simply show registered students, for them to efficiently answers and respond to questions. Also, the page should let the user clearly see each others’ comments and profiles.

The screen size of the interfaces was required to be shown as 700px, and the main color should be HBX’s red color.

What did I do?

I was the user interface designer, responsible to define and implement innovative solutions for visuals and experience and conceptualize original ideas that bring simplicity and user-friendliness to complex design roadblocks.

When I got the requirements, I decided to design the user community page with a clear layout and easy for students to view and comment on others. I cleared style and used less red color and more white color as the background. I used the HBX’s red color as the active state color and kept the black color as a feature color showing in the comment view area.

When students come to this page, they can view all the classmates clear at a glance. Students can see the names of classmates, photos, the number of comments and the number of favors. I designed the

When I handed over the user interface design to the team, they like what I did, and the visual approaches that smartly used the HBX’s color while clearly conducted the user experience and functions. Then I showed this to the content team and made a slight change in copy and wordings, and then final hand-off to engineering.

The following is the final design after the three-round revision. It delivered the design goal and the project objective.



This is a gif and an interactive effect that I created to show how the “like” interactive effect works when people click.

Leave a Reply

Your email address will not be published. Required fields are marked *