Metrics Dashboard

Desktop focused, yet fully responsive metric dashboard.

Overview

This desktop focused dashboard displays all vital metrics for a mobile app. Important metrics displayed are - device used, number of transactions, number of downloads, and number of clicks. Secondary metrics showed acquisition, engagement, and revenue.

In addition, social sentiment and social interactions are shown in real-time, along with trends, server uptime and number of support tickets.


The Process

The process for this project involved 4 stages - dashboard research, low fidelity wireframes, visual designs, and design hand-offs.

 

1. Dashboard Research

Various dashboard designs were researched on Dribbble, Pinterest, and Google. Specifically, dashboards with charts and graphs combined with dark and light themes were explored.

2. Low Fidelity Wireframes

This entire project is essentially a one page design consisting of widgets. The focus of the wireframes is to ensure that the widgets could adapt for desktop, tablet, and mobile. The wireframes were presented to the stakeholders, then revised based on feedback.

3. Visual Designs

Various designs were explored in terms of colour combination and dark vs light themes. The visual designs were presented to the stakeholders at various stages, then revised based on feedback. Ultimately, a pastel colour palette was preferred in combination with a light theme.

4. Design Hand-Offs

After the visual designs were signed off on, the final designs were handed off to the front-end developers. All artwork was designed using Sketch. Using the Sketch Measure plugin, developers were able to easily implement to spec. All icons were provided in SVG format.


Challenges and Solutions

Dashboards provide the opportunity to leverage visuals in the form of charts and graphs to represent data. The main objective is to allow users to digest the relevant metrics with minimal cognitive load.

The main challenge was designing the bar charts (for unique devices and total send transactions) to adapt and accommodate any time range. The solution can be viewed below.

 

Charts for Mobile

Not too much modification was needed to adopt the desktop design for tablet, other than re-arranging the bottom widgets. Mobile, however, was challenging as the charts extended far beyond the horizontal plane. A scrollbar needed to be added to indicate that the charts could be swiped left or right to show more data. A hand swiping animation appears for first time users to help them understand this interaction.

 

Fluid by Design

One click time ranges are preset to one day, one week, one month or one year. Custom date ranges can also be selected.

This chart is a one day chart, with each bar representing 30 minute intervals for a total of 24 hours.

 

This chart is a one week chart, with each bar representing 1 day for a total of 7 days.

 

This chart is a one month chart, with each bar representing 1 day for a total of ~ 30 days.

 

Fully Responsive

Although desktop focused, the dashboard was also designed to be fully responsive.