I’ve got this task when I worked at HBX-Harvard Business School at the UX team. This project was assigned to me when it is still from scratch. It was roughly wireframed by the director of the user experience. I was responsible for creating a nice-looking wireframe and well-designed UI for this dashboard. The content team and UX team has come out the content parts displaying on the dashboard, map, and the community page. After researching team needs and UX requirements, I started to design the UI and Wireframe.
After researching and thinking, on the dashboard page, I decided to design the page with grids and group the contents into a clear structure hierarchy. I used the HBX color panel and kept the black, white and red as the theme color. The UX team wanted to show some interesting design in the dashboard to separate from other dashboards which were designed before. I took color to display the difference. I put some feature colors on the dashboard for the different course progress which is to differentiate courses and give some funny visual looking for users. I used the light blue, green and light orange color in a small part and the whole dashboard still keeps the color consistency on the whole.
This is the responsive design of the mobile view for students/users view on the phone.
This is part of Wireframe display. I’ve used Axure to update it.