Dashboard Design–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 courses, application status, find quick hit and join weekly details. On the homepage of the dashboard, students needed to do a quick overview of all of the information. Then, on the map view page, students needed to do a quick search and found out the meetup place, reviewed questions and asked questions to each other.

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 reorganized all of the required information on the homepage. I made sure all of the contents were able to clearly viewed and clearly understood in first glance. Students were able to find what they want. I create the card at a certain height, so as to save scroll. Students can see everything clearly without scrolling. The most important information shown at the top of the screen. I put the dashboard sidebar on the left side, so it wouldn’t affect the contents view and take space. When I showed the finalized work the project and stakeholders, they all liked my approaches. It was easy to view and clear to be understood. The deliverables went smoothly. When wireframes delivered, I started 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

I designed the user interface in grids. I used the HBX color panel, which is composed of black, white and red. The UX team wanted me to deliver delightful design pages, so as to the visual design would be appealing and would distinguish from others on the market. I chose to use color as a delightful element. I put some feature colors of HBX on the dashboard and designed them with light blue, green and light orange color. The different colors presented for the different course progress. The color approach did bring some visual attraction when it delivered to students.

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