19 / 19 · Ahead, on track or behind?

Contador

Contador is an iPhone dashboard concept that puts sales against target, the lead pipeline and market results in a sales manager's pocket. I designed the concept, charts, screens and app icon, and it stayed a work in progress.

Role: Creative lead
Client: Internal sales tool
Industry: Sales & enterprise tools
Year: 2014
Work: UI design, Data visualisation, Mobile app design

Country and office managers in a global sales organisation live by their numbers. They track sales against goal, this year against last, and how leads move through the pipeline.

Those numbers usually sit in desktop reports. Away from a desk, a manager has no quick way to tell whether an office is ahead, on track or behind, or how one market compares with its neighbours.

What is the smallest set of views that tells a sales manager, in a few seconds, where they stand?

Contador answers with a handful of focused screens. A single chart plots net sold against goal and against last year, on bands marked Reached, Better and Behind. A fan chart shows every stage of the lead pipeline. A table compares markets side by side. Shaking the phone opens the filters for product, market and sub-office.

My role

Creative lead. Designed the app concept, the chart language, the screens and the app icon.

What made it hard

Three numbers, one glance
Goal, current sales and last year's result had to read together on a 4-inch screen.
A long pipeline
Ten lead stages with counts from under 30 to over 13,000 needed one view that kept small stages visible.
Many markets
Managers covering a region needed to compare markets without opening each one.
Filters without clutter
Product, market and sub-office filters had to stay out of the way of the data.

Questions we asked

Which comparison matters most to a manager: against goal, or against last year?
Can colour alone signal ahead, on track and behind?
How do you show ten pipeline stages of very different sizes in one view?
Where should filters live when the chart needs the whole screen?

Sales against targets

Each figure is a peak on one chart: net sold, goals set and net sold last year. Horizontal bands mark Reached, Better and Behind, and the current peak turns green when the goal is met or orange when it is behind. Above the chart sit the percentage of goal achieved and the office's regional ranking.

The same chart in its two moods: green when the goal is reached, orange when the office is behind.

The interests pipeline

Every lead stage, from new enquiries to closed sales and former customers, is listed with its count and feeds a colour-coded fan chart. The whole funnel fits on one screen.

Each stage label drops a line into the fan, so small stages stay visible beside large ones.

Multiple markets and filters

A comparison table lists markets with net sales, goal and percentage achieved, coloured by performance. Shaking the phone opens a settings panel to change product, market and sub-office, or to view your profile. Login uses the user's phone number.

The shake-to-open settings panel beside the market table.

In motion

What I took away

One chart, one question. A single chart that answers one question beats a dashboard of small widgets.
Test the playful ideas. Shake-to-filter is easy to miss and easy to trigger by accident.
Say what it is. This stayed a work in progress, and the case study should say so.

Creative lead

Preetham Lawrence

Next up

Digital Experience Kits

Interaction playbooks that show Roche teams how dashboards and instruments should behave.