One of the interesting challenges in modern design is in taking data and presenting it in an easy to digest, engaging format.

Project details:
My roles & responsibilities:User Experience, UI/Visual Design, Front-end code
Techniques I used:Stakeholder Interviews, User Stories & Scenarios, Sketching, Prototyping/Design/Delivery (HTML,CSS,jQuery)
Tools I used:Pen, Paper & Post-it notes, MacBook Pro, Panic Coda

As with many businesses we had a need to do just that. Take a subset of existing available data and package it into a small piece of scannable content in order to support a business initiative that both positively benefitted ourselves and our customers.


If you know about the inner workings of the pub world you’ll have no doubt heard about flow monitoring. Flow monitoring allows the pub landlord, business owner or tied pub company to understand and monitor the flow of beer from the cellar to the pumps - this information is useful as it can tell an operator if all of the beer being dispensed is being paid for by reconciling cash receipts and also allow the business owner to understand when peak trading times are, or in bigger pubs, which areas of the bar trade better. Another useful application of flow monitoring is to be able to pinpoint when and how often the dispense equipment is being cleaned. The lines from the cellar to the pump become pretty horrible if not cleaned regularly, not to mention be a health hazard and degrade the quality of the end product served over the bar.


To cut very long discussion short, we thought that if we could track performance and use the data to incentivise landlords to clean these beer lines regularly we would see an increase in product quality served to paying customers, and we already knew happy customers return to buy more beer. More beer sold means better performing businesses all round - the old world of commerce working just as it should!

Research & understanding the problem:

Our main issues were twofold. Firstly, many landlords never saw the correlation between product quality and clean equipment and had therefore never formed a habit of periodic cleaning. Secondly, cleaning beer lines does waste a small amount of product and therefore was thought to be a costly process.

We knew, through research and practice that the increase in product quality was worth the effort and waste, and increased profit overall due to increased sales.

Our challenges where therefore both educational and habitual.

Strategy and design solution:

We created a content strategy to deal with the educational side of the issue, where blog posts and polls would increase awareness and dispel the myths. This was backed up with an incentivisation email campaign that would reward landlords serving a clean pint. The one thing we needed, was to take data contained in the flow monitoring software and make it very visible and simple to understand. This would allow landlords to monitor their progress towards the incentivised goal.

from sketches to screen
From quick sketches to iterating in HTML once we found a suitable direction

The existing flow monitoring data was perceived to be pretty impenetrable to the average user, being rows on rows of numbers it wasn’t very visually arresting either, just not a simple thing to grok. Learning through iterative sketches I quickly came up with a ‘widget’ like solution based on a simple traffic light analogy. This would show at a glance if the user was on track or not and clicking to open the widget would show where about the pub was on the tolerance scale over the 6 weeks of the scheme.

from sketches to screen
The final widget was made responsive to work more smoothly across devices
The final product was delivered as a WordPress widget pulling line cleaning data from our backend, then animated with CSS to move the positions of the sliders with the data refreshes, I wrote the front end code (html/css) but the PHP and database chops came courtesy of our ecommerce agency.
code view
Coming together in code

Since running the initiate on an ongoing cycle, using different rewards each time we have had anecdotally changed attitudes to line cleaning. We have also increased cleaning percentages with the majority of pubs now reporting 95% cleaning efficiency.