Dashboard Design for Harvard Business School Online

Introduction

I got to design the dashboard page when I worked at the UX team of Harvard Business School Online. It was a rough project in the initial stage. The UX director wanted me to design the project from scratch to implement.

What did I do?

I was the wireframer, UX and UI designer.  I was responsible for creating a nice-looking wireframe and well-visualized UI for this dashboard. The content team and UX team have come out with the content parts on the dashboard, map page, and the community page.

I based on the discussion I had with the content manager and my UX director, I started my first wireframe recreation. I did a few research online about the dashboard design which made the competitive analysis. I asked the scenario of the dashboard design, design objective, and user requirements.

Step 1 – Create Wireframe

The dashboard was used for business students to check active course, application status, find quick hit and join weekly details, so on the homepage of the dashboard, students needed to do a quick overview of all of the information. On the map view page, it needed students to do a quick search and found out the meetup place, review questions and asked questions.

The phase of the wireframe was to provide a visual understanding of a page early in a project to get stakeholder and project team approval before the creative phase gets underway. Since I have all of the content needed in each of the pages, I took the contents and used them in the wireframe. It brought a better visual understanding.

I lay out all of the required information on the homepage and made sure them can be clearly view in first glance. I saved the scroll. Every important information was shown in the top of the screen. I designed the dashboard sidebar on the left side. The project team and stakeholders liked my approach. They said it was easy to view and clearly to understand, so it went very smoothly. Then I started to do the visual design.

I designed the wireframe in Axure.

Homepage wireframe view in the dashboard

 

Community page wireframe view in the dashboard

Step 2 – UI Design

After approved by the stakeholder and project team, I decided to design a user interface in grids,  use the HBX color panel, the black, white and red, as the theme color. The UX team wanted me to show some delightful design in the dashboard to distinguish it from other dashboards on the market. I chose to take color as a delightful element to make it look different. I put some feature colors of HBX on the dashboard and each of the feature colors, light blue, green and light orange color,  presented for the different course progress. I used color brought some funny visual looking for users. But I didn’t use them in a large amount on the screen, so the whole dashboard still kept the color consistency on the whole.

Homepage of dashboard

Responsive design

 

Map view in the dashboard

Responsive design

 

Community view in the Dashboard

Responsive design

Mobile size design on the homepage of dashboard

Mobile size design on the map view of the dashboard

Mobile size design on the community page in dashboard