Complex Dashboard Design

June 03, 2020

Introduction

A couple years ago, I was involved in building an analytics dashboard for Kalibri Labs. It was my first experience with React. This post is meant to touch on a couple interesting things about that work.

Spacing

Arranging visual elements using multiples of 8 allowed me to design and develop new charts and controls efficiently. I used Sketch and created semi-transparent colored boxes to signify spacing elements.

data-selection-property-search-grid-alldata-selection-property-searchdashboard-revenue-capture-snapshot-griddashboard-revenue-capture-snapshot

Text as Data

Internationalization was a requirement from the very beginning. After all, internalization is much easier when considered first thing rather than implemented later on. Internationalization was done by centralizing all text data in one location. This way, when languages change, the data at the top of the React tree propagates all the way down.

The video below shows the live interface and at around 1:20 shows how changing languages propagates throughout the interface.

Lightweight Design System

Today I'd use something like Storybook to implement a formal design system, but given the team size at the time it didn't make sense to go all out for concerns around maintenance, time, etc. Instead I utilized Confluence to generate design system documentation that could be leveraged across a variety of domains. We used the color and typography values defined in Confluence to produce documents and presentations across the company.

Screen Shot 2016-06-28 at 9.12.09 AM

Screen Shot 2016-06-28 at 9.12.20 AM

Screen Shot 2016-06-28 at 9.39.03 AM