DUOLABS
Work

Data visualization for a web service

When the Korean arm of a global consumer-goods company fully rebuilt its official web service, we took on the chart screens that present product and promotion data. The rebuild aimed to renew the online channel between consumers and brands and to convey product and brand information clearly. A chart with correct numbers still fails if the change does not catch the eye, so we designed the display and behavior to make changes in the data show up on screen right away. The work covered the visualization screens and chart components reused across the site.

Launch
2010
Client
Korean arm of a global consumer-goods company
Type
Data & Visualization
01 / 04

Web screens that turn product and promotion data into charts

In the rebuild of a global consumer-goods company's official web service, we implemented the screens that show product and promotion data as charts. The company supplies many household and cosmetics brands in Korea, and its official web service is where consumers get product information for those brands. The rebuilt site was meant to convey product and brand information clearly, and the chart screens carried the part of that information told through data. The standard for each chart was that readers see what is larger and what has grown before reading any single number.

Web screens that turn product and promotion data into charts
02 / 04

Chart components built once and reused across screens

We built the charts and visualization views used throughout the web service as reusable components. Feeding the same component different data draws a chart with the same look and behavior on a different screen. As more screens needed charts during the rebuild, none had to be built from scratch.

Chart components built once and reused across screens
03 / 04

Interactions where the screen moves as the data changes

A chart reads as information only when changes in the data show up on screen right away. We designed the interactions and display so that when a value changes, the chart redraws in a way the eye can follow. The standard was that readers notice the change through the movement of bars and lines before comparing any numbers.

Interactions where the screen moves as the data changes
04 / 04

A visualization area set within the rebuilt site's tone

The chart screens had to match the quality and presentation of the rest of the fully rebuilt web service. In step with the rebuild, we refined the screen quality and content presentation of the visualization area so that product and brand information came across clearly. This was a partial role: the visualization area within a rebuild project carried out by a digital agency.

A visualization area set within the rebuilt site's tone

Highlights

01

Web chart screens for product and promotion data

02

Chart and visualization components reused across screens

03

Display and interactions that make data changes visible at once

Insights

Read the blog