Q1 Sketchpad

Q1 Sketchpad

hugh leoidsson | DESIGN

Welcome to our first design blog post. For those of you who haven't met me, my name is Hugh (@leoidsson) and I have the dubious title of 'Head of Colouring-In' here at Coolgarif Tech. Other then the obligatory colouring-in, I'm also the person behind the visual look of each project from initial sketches to final implementation.

I want to provide some insight into the early stages of our design process and show some of the concepts and sketches that we've been working on in the past months. Throughout Q1 we worked on a variety of different projects, which all begin with hand-drawn sketches to get the ball rolling.

We start with the individual components that we feel best suit the data and problem in hand and work-up some sketched ideas for these. The following snapshot is a collection of sketch ideas from projects we worked on in Q1 2014.

Sketchpad Spread – 1

Q1 Sketchpad - Image 1

Q1 Sketchpad - Navigation and Drop-Downs

Navigation and User-Interface (UI) elements, such as drop-downs and roll-overs, are a critical component to creating an effective User Experience (UX). For example, here I experimented with the concept of 'corner buttons', which are an effective way to hide away the menus and search bars. Having the UI offscreen gives the customer the ability to screenshot the dashboard at any point to use in presentations without UI cluttering the display.

Sketchpad Spread – 2

Q1 Sketchpad - Image 2

Q1 Sketchpad - Compare and Breakdown

We worked on some example ideas for an NHS England competition as part of a fringe event at their conference in Manchester.

We explored ways to compare various locations' data so that it could be quickly scanned for differences. Additionally we added the option for the user to drill-down into the data by clicking and revealing a more detailed breakdown: Not just getting a percentage value, but, actually seeing how that value was calculated.

Often the average describes the 'What', and the detail describes the 'Why'.

Sketchpad Spread – 3

Q1 Sketchpad - Image 3

You may have seen our lovely new homepage animation, which I designed and built this quarter. We as a team are keen to continue adding animated and interactive components to our website to better illustrate our approach to design.

Q1 Sketchpad - Homepage Animation

The image to the right shows the initial sketch idea and the final illustration. We imagined an interactive iPad, pulled apart to reveal the various layers of our design process. From inspiration (sketching and prototyping), to implementation (development and coding) and finally visualisation (fully rendered dashboard). You can see the final working design on our homepage

In this blog, I hope I've highlighted how we approach the initial, paper design phase of data visualisation. I'll keep you up to date each quarter with sneak peeks into my sketchpad and the design process.

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