Desktop focused, yet fully responsive metric dashboard.
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 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.
Although desktop focused, the dashboard was also designed to be fully responsive.