Q2 Sketchpad

What a busy quarter this has been and we are already nearing the end of Q3 as well! We have worked on some exciting projects during this time, which has lead to, as you might expect, pages and pages of sketches. Nothing shows this more than the header image which is a blend of all my pages on top of each other. Among the splashes of colour and pen scribbles are sketches from projects such as the re-branding of AltViz with a new name and logo.

Hugh Leoidsson Sketches -1

Hidden UI:

During this quarter one of the themes which appeared in many of the projects was the need to display the user interface (UI) in a way that was hidden, or that didn't take away from the data. The advantage of hiding the UI is that it removes extra clutter from the main screen and leaves it presentable to be used as a screenshot and shared, if required. For example, for one project we made the chart title a sentence: “Graphic Designers who are living in London and can code”, where the underlined words are dropdowns that you can be clicked. This hides the UI, but also describes the graph.

Hugh Leoidsson Sketches -2


One of the more unique problems we came up against this quarter was the need to display the flow of data as it went through a number of processes. Issues that arose would have knock-on effects further down the line, so the client wanted a quick visual to see where the issues were. We chose to show this with a traffic light system which user-defined thresholds. Critical issues are red, then amber for warnings, and finally green for all OK. In some situations a critical issue would affect all the stages downstream. Another situation would be that an amber warning at one level would become critical further down the line.

Hugh Leoidsson Sketches -3


We keep away from pie charts (too many calories), instead we use “healthy” bar charts. Stacked bar charts are brilliant at representing the make-up of a “whole”. One of the drawbacks though, comes when comparing two stacked bar charts. The blocks on the baseline are easy to compare, but, from there on up, it's harder to compare, as all the blocks start at different heights. Our solution is to include a “Shuffle” button beside the chart, which allows the user to cycle through the stacked bar chart, re-basing it for each block in turn.

Hugh Leoidsson Sketches -4

As ever, we love to hear from folks, and you can get me @leoidsson with questions, comments, and feedback.

Let me leave you with a little bit of modern art:

Hugh Leoidsson Sketches -5