DUOLABS
Work

Reusable chart component for internal dashboards

Instead of building charts separately for each screen of an oil refiner's internal dashboard system, we designed and built one chart component that many screens share. Every dashboard screen carries different data, and building charts per screen leaves as many copies of the same chart as there are screens. By separating the data from how it is displayed, the component draws the same way on any screen it is placed on. Inside the larger system build, we proposed the work ourselves and documented the component's structure and how to use it.

Launch
2007
Client
A Korean oil refiner
Type
Data & Visualization
01 / 04

One shared component in place of charts rebuilt for every screen

Each screen of the internal dashboard system shows different data, and building a new chart every time leaves as many copies of the same kind of chart as there are screens. Rather than building for one screen, we aimed for a chart component that any dashboard screen could take and use. With one component there is one place to fix, and the fix reaches every screen that uses the chart.

One shared component in place of charts rebuilt for every screen
02 / 04

A design that takes data and display separately

The reusable chart component takes the data to draw and the way to draw it as separate inputs. Swap only the data and the same component draws another screen's numbers; swap only the display and the same data appears as a different kind of chart. Built for a single screen, the two are bound together and hard to carry to another screen.

A design that takes data and display separately
03 / 04

Charts that stay readable on dense business screens

A business dashboard packs numbers and charts tightly onto one screen. We aligned the component's interface so that dashboard data is presented the same way whatever the chart type. We refined how the charts look by weighing how much information fits on a screen, how easy it is to read, and how quickly the screen responds.

Charts that stay readable on dense business screens
04 / 04

Component standardization started on our own inside a larger build

The chart component was a standardization effort proposed and run in-house, on our own initiative, inside a larger system build. Documenting the component's structure and usage laid groundwork that later screens and projects could pick up. The charting and visualization skills built here carried on into the next job, the oil refiner's web map service.

Component standardization started on our own inside a larger build

Highlights

01

A reusable chart component that separates data from display

02

Charts drawn the same way across many dashboard screens

03

Component structure and usage, proposed and documented on our own initiative

Insights

Read the blog