Dashboard Design

My Dashboard Design process for a revolutionary Enterprise level company from start to finish.

Brainstorming

Running an introductory brainstorming with the employees. The aim of the workshop was to discover what features staff looking for in new Dashboard Design.

dashboard-brain-storming

Surveys

Polldaddy was used to gather the views of a large sector of our customers.

dashboard-survey

Personas

To recognize and understand the key stakeholders points of view personas were created by synthesizing the research data. These captured the behaviour, beliefs and philosophy of users, and most importantly captured their motivations and intentions. This helped to create empathy in the design process.

dashboard-persona

Task Models

Task models based on the personas. This helped to identify critical task that the users need to easily carry out to make the website successful. The models focussed on what the user needs and expects to do in order to complete their goals. The result was a list of critical information and functionality that the users need that we could check our designs against.

dashboard-task-model

Card Sorting

I used this method to get the design and functionality change requests in order from different groups.

card-sorting

Sketches

This part of process was about free styling and holding nothing back. Sketches were complimented with notes, arrows and pointers that helped make the ideas easier to understand.

dashboard-sketch

Flow Chart

I used flow chart to get page order right on the website. Used OmniGraffle to create flow chart.

dashboard-flow-chart

Wireframes

Converted many sketch results to digital wireframes to present them to stakeholders.

dashboard-wireframe

Mockups

Next step was to create pixel perfect mockups. I am not going to share mockups here and pass right into live prototype screenshots since they look identical and they better be.

Live prototype

Finally converted everything to live working prototype which includes HTML5, CSS, JavaScript, Images, Fonts files. Everything is working with static dummy data, and now is the time for backend developers to connect this prototype to databases. Clean and very well documented code for developers.

dashboard-1

dashboard-2

dashboard-3

dashboard-dashboard-4

dashboard-charts

dashboard-calendar

dashboard-buttons

dashboard-404

dashboard-form-elements

dashboard-invoice

dashboard-lock-screen

dashboard-login

dashboard-navigation

dashboard-notifications

dashboard-sliders

dashboard-support-tickets

dashboard-tables

dashboard-tabs

dashboard-typography

dashboard-validations