In light of the imminent release of a new Apple computing device, which the pundits believe to be a tablet, there's been a lot of discussion about what its primary uses will be. E-book reader? Music Player? Movie player? Bathroom surfboard?

Those are all great, but the thing I'd just love to see on this device would be a live, interactive enterprise dashboard. I'm sure, however, that they'll demo a dashboard. It'll probably be a consumer dashboard made up of weather and stock widgets, but wow, can you imagine the potential?

Speaking of whizzy dashboard gadgets, Sony recently announced the Dash, an implementation of the nerdy Chumby. It's being marketed as a clock-radio like dashboard, but I think it would be great to repurpose as a desktop conduit to an enterprise dashboard.

There is really something to be said about a live dashboard that doesn't live on your primary computer's screen. A dashboard that has its own discrete screen gets more attention, and has more potential value to those who use dashboards.

Food for thought.

The Challenge

The Pointy Haired Dilbert Excel Tips Blog is hosting a dashboard challenge, so I figured I'd enter for kicks and giggles. Since taste varies, especially on the Internets, I didn't enter this dashboard so much for the prize than to give you a picture of how you should approach dashboard design.

The Objective

The objective, as stated on the site:

Help a senior manager understand how the sales people have done in the 24 months.

The three elements highlighted in bold are key to identifying the audience, benchmark and timeline.

Audience: Senior Manager

While "senior" is ambiguous, a good rule of thumb is that Senior Managers don't want to get caught up in too many details. First and foremost, they need the big picture to spot potential trouble spots.

Benchmark Dimension: Sales People

While other insights might be useful, the objective of the visualization is to evaluate the sales people. As such, region, product, and customer type analyses should be subordinate to the salesperson dimension.

Timeline: 24 Months

Ok, this is a little unusual. In my experience, especially with sales, it's normally a "what have you done for me lately" scenario. A severely underperforming salesperson in the current year doesn't get any good will for performance 24 months ago. For a dashboard specifically focused on the performance of salespeople, I would normally use a 12 month frame (whereas for overall sales performance, irrespective of dimension, I would use a 24 month frame).

Limitations of the Data and How They Affected the Design

Sales $ Only

That's a huge limitation. Without inventing more data, this prevents any realistic analysis of a lot of things. The good thing that came out of this data limitation was that it makes the analysis of the sub dimensions less valuable, especially in the area of product and customer type. The fact that all the salespeople sell into all regions, products and customer types reduces the likelihood of any meaningful insights into the data.

Sales vs Forecast Performance

This is a big issue. I LOVE bullet charts, but effective use of bullet charts does mean that you have to follow Stephen Few's specification, which would have consumed a little more real estate as well. I could have derived the comparison value from a derived value like average, median or 2008, but the difficult part would have been assessing the bad, good, great ranges, especially with the default set of data. There was not a whole lot of variation across the original sales data. Everyone would have fallen under "good".

Units, Pricing and Profitability

No price data is provided, so you have no idea of whether any products are profitable. Is the pricing variable, or fixed? Were there volume discounts applied to the sales data? This is pretty important data for overall sales performance. Fortunately, we're only looking at saleperson performance over the past 24 months, and with only one fact (sales dollars), revenue is KING.

Other Sales Costs

We don't know anything about salesperson salaries, sales cycle length, travel costs, long distance costs, etc. that eat into the overall margin. This makes any inferences related to region, product and customer type a little pointless without connecting them to the salesperson dimension.

Derivable Data

Used

• Totals - Gives big picture view
• Median - This is a better performance metric than the mean, since the mean is easily skewed by a small cluster of over or under achievers
• Mean - A suboptimal baseline, but better than nothing

Not used

• Previous Year Performance (only for 2009) - not useful for 2008, since there's no 2007 data
• Min - Did not consider this too meaningful
• Max - Did not consider this too meaningful

Design Goals

Design follows Data

I love those dashboard mockups that are entered in those Bona Vista

Microcharts contests. The differentiating thing about those dashboards vs. the one in this challenge is that they're made up of a wealth of data that just isn't available here. I would have loved to create some whiz-bang sparklines, win/loss charts, bullet charts and pies (yes, I am a pie hater, but none of the dimensions have more than 4 values, which makes them appropriate for consideration here), but I felt that they created too much complexity for the data set.

Less is more

There have been some studies in terms of audience retention. Basically the top left corner gets the most retention, whereas the bottom right corner gets the least. Also, anything below the "fold" (scrolling threshold) may as well be considered to be lost data.

Keeping in mind that this dashboard is designed for "senior managers", I decided that there could be no scrolling. As much of the dashboard as possible had to be visible on a XGA (1024x768) screen to reduce data loss.

Big Picture vs. Detail

Senior Managers usually want the big picture of performance before drilling down to the nuts and bolts. As such, you can't ignore things like annual totals and overall sales trend lines. Make it easy to drill down as required.

Treat this like a real gig

Don't insult the intelligence of the target audience. That means analyze the existing data set, and visualize that. Don't invent forecast metrics, or identify profitability points that don't exist. I've been in sales demos where we've made assumptions by pretending that the sample data was our prospect's sales data, and gotten "we don't run our business that way" comments. That just makes you look like you didn't research their business and made uniformed analyses. Stick to the facts available.

Has to stand up to the current set plus other sets of data

Tailoring a report to a single set of data can lead you into the trap of having to regularly rewrite the dashboard. Making sure that the design stands up to changes in the data means that you have to make some educated guesses in how future analyses will work. For example, in a rapidly growing company, you don't want to use pie charts for salesperson contribution, since pie charts are only effective for dimensions containing less than 5 elements. Using your noodle for a few minutes will help you future-proof your design.

Inspirations

I did look at some suggested links provided by PHD:

• NY Times visualization of Jobless rate by Age, Race, Education Level and Sex
• Jon Pletier’s tutorial of highlighting one chart series using list boxes
• Budget vs. Actual charts – 14 charting ideas for showing sales performance

I liked the NYT and Pletier visualization ideas. The one thing that I didn't like the pre-plotting of lines in the NYT example. When you have data for dimensions that are going to be very close to one another, it makes it hard to process visually. Just being able to change the plot with an ever present baseline was a better approach, in my mind.

The Solution

The great thing about this challenge is that you're allowed to select any tool to create the visualization. As a consultant, you don't often have this luxury, so it was something I decided to take advantage of.

Before I selected a solution, I went through several hand drawn wireframes of the dashboard (they're WAY too ugly to show here). I had a whole bunch of "microchart" styled dashboards in mind, but those designs got thrown out the window each time I revisited the data. It's not easy creating interesting stuff with a single fact, that being sales dollars.

So, I went back to the NYT visualization. It was simple, and with a few tweaks, could probably do the job.

Now the hard part was deciding what tool to best execute the visualization. To give you an idea of the options I considered but did not use: Flash, Excel, Google Charts API, Numbers (iWork), Pentaho Reporting.

In the end, I figured a web presentation would be the easiest way to go - I had the highest likelihood that everyone can see what I've done (maybe to a lesser degree in that so-called browser called Internet Explorer), and it would give me a fairly high degree of control over the design.

Architecture

Heres what I used for my dashboard engine:

• MySQL to store the sample data
• PHP and CodeIgniter to handle the server side code (there's not a lot of server side code at all)
• HTML, CSS and Javascript
• Flot, the open source Javascript charting framework
• JQuery (included with Flot), a Javascript UI framework

Sounds complex? Well it's not _that_ complex. Thanks to the prewritten frameworks (CodeIgniter, Flot and JQuery), I didn't really have that much code to write. I've never used Flot or JQuery before, but using the sample code included with the libraries, I was able to figure out what I needed to do with a minimal amount of code.

Having said that, if you don't know HTML, CSS, PHP or Javascript, you may have issues building on the sample code

My Dashboard

So here's a screenshot of my entry:

You can check out the latest version here.

Here's the source code.

Dashboard Breakdown

Title Bar

I wanted the title bar to be as inobtrusive as possible. Because I didn't like the original data, I included a selector that will change the data set. This allows me to add more realistic datasets over time.

Summary Bar

The summary bar provides some context to the rest of the dashboard, and shows total 2008 and 2009 sales numbers, with growth % and $.

Ranking Panel

On the left side of the dashboard are rankings, including sales dollars for each of the dimensions. Going with the "what have you done for me lately" theme, I only ranked based on 2009 sales figures.

Chart

Instead of using a line for each year in a 12 month grid, I opted to show the entire 24 month timeline - this made it less cluttered when viewing more specific data. The chart shows two lines, a baseline, and a performance line based on selected dimensional criteria.

I also allowed the option to change the view between a line segmented graph and a stepped line graph. The stepped line graph can provide a better sense of proportionality for some people. I added the controls just above the chart.

Here's a sample of a stepped line graph:

In terms of interactivity, you can hover over any point in the line chart to see the time series and value. The step chart doesn't allow this due to some weirdness in terms of how Flot works (read: it wasn't worth the time to write custom code to handle it).

Chart Baseline Selection

The user can change the baseline using a selector above the chart.

To assess relative performance, I provided 3 basic baselines:

1. Total - This is the total of all sales for a given month/year. This allows you to see how much a selected dimension set contributed to the overall sales during the time series.

2. Median - This shows the median sales by month/year across all the salespeople. It is not broken down by any further dimensions. This allows you to see who lies above or below the line.

3. Mean - This shows the mean sales by month/year across all the salespeople. Behaviour is like the Median.

Chart Series Selection

To see some depth in the data, you can select any combination of items from four dimensions: salesperson, region, products and customer types.

The orange line is rendered based on all selected dimensions.

Gotchas

• Internet Explorer, surprise, surprise, looks the least attractive. See the comparison of OS/browser combinations in the next section.
• When resizing your browser window, the library seems to misbehave, so I suggest you refresh the page.
• The degree to which I can meet the 1024x768 size specification is limited to how many toolbars you have open, etc.

Comparison of Browsers

iPhone - Safari

Mac - Safari

Mac - Firefox

Windows - Safari

Windows - Firefox

Windows - IE

[]: http://blog.braintapper.com/assets/images/tinygrab/a138d3acb3b2c517f4bc21bb035e43fc.png