Category Archives: User Experience

Mixing emotion and statistics to tell the data story

It is rare to get a press release that has everything needed to tell a story, let alone a data story.

A few weeks back I noticed an interesting data story from Barnardo’s UK in a local newspaper in sarf lunnun (or South London if you don’t speak the East End patois).

Getting in touch with Dan at Barnardo’s I soon had a press release with real facts in, a cracking model released image and some interesting data.

Even data references! How unusual is that?

Below is the result of my work.

barnados graphic 01-02

The image was a little too tight for my liking so had to use context-sensitive fill in Photoshop and more than a little retouching to give myself a few more valuable pixels on the right hand side.

At the same time I wanted the typography and data to intrude onto the boy’s image.

I tried various styles of bar chart, most of them very slight variations on the finished result, the main option being a yellow key line around the ’81 families in Tower Hamlets’ bar.

Barnardo’s liked what I had done and it helped to get the reality of life behind statistics out there.

Here is the story on my hyperlocal site Love Wapping.


Site consolidation – the tech is the least of your worries

One of the tasks I find myself undertaking more frequently is site consolidation.

The typical scenario is Huge Global Corporation Inc. has developed (and i use that term very loosely) their web presence over a period of years with no strategic plan. Yes each of their different websites may serve the purposes of a different part of Huge Global Corporation Inc. but none of them connect to each other on even the most basic level. Forget APIs and data flow (big data? yeah right!), send an email via one and someone somewhere is probably printing it out and putting it on a colleagues desk. I do not exaggerate.

How many sites do we have?

One company I worked with had between 70 and 140 websites. They did not actually know the precise number. Scary, huh?

But let’s say you have something more reasonable like a corporate who has 19 websites. And they want them all to play nice. Even all reflect the corporate brand maybe? (Don’t get me started on digital brand guidelines…)

First thing to do is create what I call a ‘universe map’, a schematic that shows all the existing sites (and apps, and Facebook pages, and Twitter feeds) and how they relate to each other.  Oh and how many different Content Management Systems they all use.

Then if you actually have accurate analytics (again, very unlikely) you can have a look and see where the traffic is flowing within and between the sites.

Business Requirements. Always handy.

Then you can refer back to what Huge Global Corporation Inc. now wants in terms of their business requirements (if they have them).

So you look at what they have and what they want and come up with a pragmatic plan.  An information architecture. That of course sits on top of the technical architecture. The  two will overlap but remember that your users do not give a stuff what OS a server is running.

But then you hit the real killer of projects.


And so maybe the real skill of an Information Architect is in navigating the internal rivalries of Huge Global Corporation Inc., not the server configurations.

RWD, taxonomy and Bootstrap

Primary Task

The primary task was to take an existing catalogue of big data assets and provide a prototype version of the next iteration for a presentation with a fixed deadline.

For the presentation a web application would be viewed on iPads but the design needed to be used for further Business As Usual (BAU) work in future.


I recommended the best approach to this was to create a Responsive Web Design (RWD)  based on the Twitter Bootstrap framework .

This would allow me to create prototype wireframes using Bootstrap components and so cut down development time and UX design iterations.

The first deliverable would run full screen in Safari on the iPad.

The core of the application was based around category search of a number of diverse data assets.

Taxonomy First

Very early in the project I realised that the main problem was that of the taxonomy. Different people, sometimes with the same job role, described the same things using different terms.

The UX design was secondary to the taxonomy in terms of project work as what people were searching for had to be formally identified before the UI could be considered.

After discussion with the client I led a taxonomy workshop for those representing the User Group. I used the example of describing animals to explain the purpose of the workshop and ways to think about the problem. This proved extremely useful as the users easily identified with this.

The end result was a classification of existing ‘data assets’ into three main types of animals (although I would later argue the animals were really different zoos.) From this I could then move on to the UX design itself using Bootstap.

Search Models

One of the initial search models I looked at was ‘Elastic Lists’. Although I considered this ideal for the type of search required (a simple and powerful way to filter data assets) it was evident that users did not fully understand the way Elastic Lists worked so it was decided to adopt a simpler search model.

This consisted of an initial keyword search across the database and then selection of categories using standard form components such as lists, check boxes and radio buttons.

Although basic this was a significant improvement on the current version.

During the UX design a fundamental principle was data integrity. In the existing database a significant amount of descriptive data was of little use as it was unstructured.


Another issue I faced was clear identification of the different high level persona groups. Due to the deadline I could I only categorise them into normal users who would only search and advanced users who would search in a sophisticated manner and had the ability to add, edit or delete records.

For the personas authorised to create new records the interface design I created restricted free text entry to one descriptive field.  This improved data integrity and consequently the quality of the search results.

RWD Benefits

Through the use of media queries it was possible to create one UX experience which would only display editing functions to authorised users on the appropriate device.

Although the primary use case of the iPad version was a client facing sales role the same RWD was also deployed when an editor was viewing the same site on a desktop device.

The UX design also accommodated widescreen (16:9) laptop use.