Designing the journey from data to personalised insight using interaction design

You might be thinking that the title of this article may not be promising anything too radical, but please do read on, the concepts described within are extreme and could completely shake up your traditional ways of designing data and interactions.

Let's start slowly and examine, if you will, the humble bar chart, whose distinguished history dates back to the 14th century. And yet he still provides us with a simple yet delightful method of representing comparative data.

Over the years we’ve stacked them, we've colour coded them, switched their orientation, drawn them in 3D and performed endless groupings and data sorts. All of which is wonderful and fun ... but I think we can go further.

Imagine, instead of a flat two dimensional image, that our chart metamorphoses into a living, interactive vehicle, transporting our user on a series of possible journeys that the customers themselves help to define, in order to reach the conclusions they personally need. Instead of static data defining the chart, the customer is now using interaction controls to help them to re-define the data in order to create something new and biased toward their needs.

Effectively, cause becomes effect and vice-versa, which would be pretty mind blowing, if I can make a case for it.

Just about everything we come into contact with now comes with the potential for digital interaction, we touch, tap, look and even wink at our digital interfaces. We can now whisper in the contents of a field, drag virtual objects around with our eyes. We can also use these events to filter and mutate any numbers we have before feeding them into our models to affect the outcomes. Creating a positive bias on the data towards our own requirements.

At the moment we're still quite blinkered, only focusing in on little jack and his single digital touch point. The truth is that we're not alone, we do collaborate, join groups, we discuss and we debate. We're not bound by geography any more, our coffee shop straddles the whole world. And while we're talking about space, why not bring in time too. We have the capability to look more in depth at our data history as well as the many potential futures, all within the same real time journey.

Some amongst you, might argue that this sounds all well and good, but isn't what I'm really talking here just data science? Don't we already have people for this? You'd be mostly right. many of the skills needed to take this discussion beyond a concept and into the real world are within the remit of the data scientist. But those people don't usually live in our world, they're so busy hadooping across the big data landscape in their R-mobile that they don't have time to work at the coal face that is our customer facing front end. To analogise, the data scientists are more concerned with huge tankers carrying the crude oil over the globe, whereas our customers are more interested in filling up their own car at the petrol station, if only they were allowed to.

Back to the future (of data visualisation)

OK, enough of the sound bytes and before we start floating away on our hover boards, let's return to the real world with a live example using real data and real people and let's move some pixels around.

I actually started writing this article last year, but without an example I didn't think the concept could stand on its own. I was just in the process of engineering a commerce data set to model my theories when I happened across a perfect example of the data I needed.

Most of us in the IT world have come across the Forrester Wave report or the Gartner magic quadrant. These expert opinion companies take a particular digital solution area and they research some of the better known vendor software products for that area. After collating a mountain of qualitative and quantitative research on the subject, they then mush up all of that goodness into three key categories. This mush is then amalgamated as plots on a bubble chart. Finally, the customer comes along and they point at a product on the chart for their clients and explain to them how wonderful/terrible it is, what the highs and lows are and why they think that it is, or isn't, the technology of choice for a particular project.

This story starts as I was chatting with an agency CTO last December. We were discussing their Web Content Management (WCM) offerings; they were certified experts at using several products on the market. They even went so far as to offer the Forrester Wave report as a download on their web site. As we chatted away I was also scanning the report and I think I experienced one of those wonderful moments of true clarity. Instead of just surfacing the chart, as I have done countless times before, I was instead looking at the chart in detail, analysing the data implications as well as the numbers making up the chart. And all of a sudden, all of those little bubbles started to dance and wriggle around the chart.

The bubble chart - some context

Your standard bubble chart usually depicts 3 dimensions of data using the x-axis, the y-axis and the radial size of the bubble for the third. A seldom used, but possible addition is to include a colour differential. Take care though, this can get messy with just a little too much information on display. It works best if applied subtly, highlighting a selection of bubbles as in the chart above, or used as an intensity level using colour shade saturation. And then there's one more dimension we can use, the one I personally love, time. As I mentioned above, we are no longer restricted to the static nowness of data, we can use simple animation methods to have our bubble chart data extend, telling time-span based stories.

But back to our vendor product comparison example, Forrester and Gartner produce a lot of these reports every quarter, for many different solution areas. Forrester uses "Strategy" and "Current Offerings" for the X and Y axes and then "Market Presence" for the bubble radius. If you're one of the lucky products then you end up as a big fat bubble sitting close to the top right corner of the chart, signifying your superiority over the lesser bubbles.

To plot each bubble, Forrester uses a score (0-5) for each of the 3 main categories. Each of these categories is itself made up of many sub-categories, which also are scored (0-5). On the surface, this probably all sounds pretty good so far. You're nodding away, I can tell. What Forrester then do is they provide a pre-defined weighting value (F) for each of these sub-category scores and then they sum of all weighted scores to come up with the main category score.

Let's look at a small example. Imagine we have a main category X, the success of a relationship, which has been defined as a combination of 4 sub categories companionship, shared interests, sex and progeny, with scores S0-S3. The weights F0-F3 all add up to 1 and the result of the addition is a value (0-5) which we plot.

In algebra, X = F0xS0 + F1xS1 + F2xS2 + F3xS3

The diagram above shows our trusty bubble chart and on the right the three set of weights for each of the categories, so in this case F0 = 0.15, F1 = 0.25, F2 = 0.2, F3 = 0.4, or in English the "Relationship" category is made up of: 'companionship @ 15%', 'Shared interests @ 25%', 'sex@ 20%' and 'progeny @ 40%'

You're still nodding, it all makes perfect sense, this is Forrester, after all. That is until you examine the detail and ask why a score about sex can be compared to a score about shared interests. Aren't we comparing oranges and lemons, or more realistically comparing lemons with the volcanic activity levels during the Roman empire? What if we just didn't accept it?

Lies, damned lies and Statistics

A very long time ago, as an undergraduate, I spent a lot of my life studying applied statistical modelling as part of my degree. What they don't tell you as you're learning is that the methods and practices being taught, initially developed to create truth, have a flip side. They are also ideal in helping us hide the truth, obfuscating the facts by changing the parameters to produce the answers you need.

We've all seen TV adverts for beauty products. The government recently insisted they clearly state the results of their user testing and also make available the details thereof. As with many governmental initiatives, nice try, but that's a fail, too little, too late. You might as well ban marketing or statistics. When you read the small print at the bottom of the screen that 87% of the surveyed volunteers liked the product, what they are not telling you is how they found those volunteers, what demographics they looked for, what pre-test screening was carried out, the environmental factors used to sway their emotions, the incentives provided and, most importantly, how they arrived at the number 87 which just happens to be exactly enough to be a convincer without making you think "Cheaters!"

For the Forrester bubble chart, the scoring mechanism I described just now is called a weighted sum model, best known from multi-criteria decision analysis. Forrester has, with the best possible intentions (I hope), created their own weightings based on a logical discussion as to which aspects are more important. Read that again ... Forrester decided, and then provided an opinionated view of the supplied data.

But what if we disagree? What if some of those sub-category areas aren't very important to us at all, whilst others are critical, what if, as a younger man I am very interested in sex, but not the progeny? As a deep seated religious couple I want shared interestes and progeny to be scored higher, but low on the sex as the oomph has departed? What if I am a really old geezer, I am probably going to be more interested in companionship more than anything else. So, depending upon my personal situation, I am going to be interested in radically different aspects of a product assessment, which means radically different weights.

The reason Forrester and Gartner do this is simple, it's time. The people they want to read the report don't have enough time to read and analyse all of the data, to sift through weightings and numbers. However, by simplifying the data to the degree shown, they are instead taking away almost all of the value. Fortunately, we have a remedy for this, it's called interaction design.

Let's look at a simplified weighting problem with another timely example. I want you to imagine you're going to a restaurant for dinner where the reviews suggest that their starters are so bad that you'd rather eat socks, their mains are OK and the deserts are like eating a slice of heaven. If those scores were averaged, then the final score means good cancels bad and we end up with a score indicating a mediocre restaurant. If you did decide to try the restaurant you probably wouldn't even stay for the only section of the meal worth waiting for, desert. Even worse, imagine if we used weighting factors favouring the starters, then all the goodness would vanish completely.

Now, whilst I am not suggesting all of those thoughts occurred during that one fateful conversation in December, the mathematics of them did, enough for me to really see the missed potential within the data. I had my data set.

Design thinking the new product - Prototyping

In the very best tradition for all cooking shows, just like taking the lemon meringue pie and deconstructing it into its individual component goodness, I started my process by doing the same type of analysis with the existing data.

The first aspect I considered was the single category data from the bubble chart on its own. Instead of losing the significance of these numbers within the larger picture of the bubble chart, I gave them their own voice, which means 3 extra bar charts, one per category.

Because this category level data is based on weighted numbers, I needed to create a graphical equaliser type chart tool for each category, which adds another 3 controls, which allowed me to adjust the weights and see the difference it made on the category bar chart. Going further and breaking that category data down to sub-category added another 4 charts to my repertoire for the first category and in total 11 extra. To use my example I had a bubble chart, my relationship bar chart with a weightings tool and then 4 extra bar charts for companionship, shared interests, sex and progeny.

The next area I looked at was the UX. Who was using this system, what did they want as an outcome from their time, could I define journeys for them to travel down and if so where would they find pleasure or pain?

Next I looked at journeys, selecting products from the full list, providing detailed product information and then comparisons between my selected favourites, providing help, on-boarding, sharing options, contact options, being able to save these new personalised charts. Hopefully, you can see that I am building up a picture that is pushing our little bubble chart to expand in a whole new series of wonderful directions and dimensions.

I probably spent a couple of weeks total, iterating through low fidelity prototypes, planning options, data and screens and then bringing the concept into a solution architecture. After that I took the game up a notch into the digital world. Each of the chart types needed to be developed and tested, animations, micro interactions, entry/exit.

Of particular fun was building the brand new graphic equaliser chart type to manage the weightings. The rule I needed was that the total of the weights must always equal 1, no more no less. Therefore each option needed to allow the score the go up and down, but the other options should maintain their score structures whilst going in the opposite direction.

Pretty soon I had some chart prototypes to play with scores and weightings and it was astonishing how those bubbles and bars danced on the charts, just like they had in my mind during that meeting, many weeks before. Up, down, left and right. Leaders became losers and vice versa. It was a singularly gratifying moment.

As a next step, I created methods to separate out and select only the horses I was interested in from the pack. I next needed a new comparison multi-bar chart to allow me to test 2-5 products against each other at the same time as well as in serial. I was then able to really compare these offerings at sub-category level, allowing me to reach some real conclusions.

The diagram above shows left to right, my bubble chart, the three category level charts, a product details chart that animates the bars between products and the multi-bar compare chart.

Then I looked over all I had made, and I saw that it was very good indeed.

The End?

I haven't shown anything radically different here, rather I hope I've created a glimpse of something you might see from the corner of your eye, a teeny shift in perception which turns the usual cause and effect on its head.

Instead of data leading to visualisation, I have journeyed into an altered reality where the interactive visualisation allows us to change the data based on need to help us reach new personalised results.

Dashboards cease to be the end result and instead become the interactive tools which we manipulate in order to reach those results. The consequences of this can however be substantial. Another way of looking at this is to start at the end, start with the insight you want to reach and then determine the paths the data will need to travel through in order to make that happen for different personas. I know, it's really, really subtle.

To make it happen charting API libraries need to grow up fast, business analysis will need to incorporate better modelling, and interactive design should incorporate at least an understanding of the work completed by data scientists and engineers.

As far as my little experiment was concerned, I decided to finish the exercise, I turned the toys in my sandbox into a navigable entity, cleaned up the code, modified it to allow me to use it for multiple data sets and vendor lists and finally popped all of that chewy goodness it into an app container for mobiles and tablets.

And if you know anything at all about app development, you will realise how much of an understatement that last really was. The pain, blood, sweat and tears involved in the process is only justified at the end of the trip.

Here's a demonstration video of the app in action