GUI elements

For services that work across multiple platforms it’s important to keep a consistent style across UI elements. Various platforms and operating systems have their own native UI elements, but you can still add brand characteristics. At the end of each project I put together a grid of all the UI elements, as a quick reference for any future project. There is also a master UI matrix comparing elements across platforms, i.e. how does a play icon look on iOS compared to Android, and can it still reflect the brand?

GUI - UI user interface elements matrix

iOS GUI schema

GUI - UI user interface elements for iOS apps

Desktop version schema

GUI - UI user interface elements for a desktop version

Valentine’s Day Infographic on

Valentne's Day logo for
Valentine's Day Music Infographic for - CITY. MUSIC. SEX. ROMANCE.

“We don’t have the time for psychological romance”
– Larry Blackmon, Cameo

As my missus will testify, I’m not very romantic and greetings cards make me nauseous. So I wasn’t looking forward to designing a feature for Valentine’s Day.

Then I realised it might be interesting to use music data to see if anyone else felt the same or if Valentine’s day was full of hopeless romantics playing “Somebody To Love” by Jefferson Airplane back-to-back like saps.

So I went to see Omar…

Omar the Oracle

I don’t pretend to understand what Omar does, I like to think his job involves “running things through the computer”. He is always very patient with me, even when I ask him silly questions like: “Do you think David Hasselhoff’s audience was affected by the drunken cheeseburger + floor-as-plate incident?” (it did, the Hoff gained an extra 400 scrobbles that week). Omar was more than happy to dig into the Valentine’s Day stats, especially when I said I wanted to compare the music tags “romantic” with “sex”. I’m always running the word “sex” through the computer and it never takes long.

To get a clean set of Valentine’s data to analyse, Omar compared the listening behaviour on 14 Feb over a number of years to the behaviour on any other day of the year, normalised it to remove erroneous “new release” spikes, thereby sifting out the tracks unique to Valentine’s Day. Then we went to work with the location and genre tags.

This gave us a list of cities ranked from Sexy to Romantic and the proportion of sexiness for each.

Looks like I need to head to Fresno on 14 Feb!

See the full feature on music data visualisation (datavis / inforgraphic) Best of 2011 music datavis (datavisualisation) Best of 2011 music datavis (datavisualisation)

Every year at this time, most music sites give you a run down on the best acts of the year. Generally, sites start rolling out “Best of” features in December, however at we decided to wait until January so that we can show a complete year’s worth of data. This year we’ve also added a datavis feature, which shows key stats, including the music news events of the year that made a noticeable change in an artist’s listening levels – or scrobbles.

Making of

To create this, we polled our colleagues across the CBS Interactive group for what they felt were the key music events of the year. I then used our internal trends tool to see if the artists featured in these events had any corresponding spikes in their listening data, based on actual total daily scrobbles. To my surprise, most of the shortlisted news events had encouraged listening, showing clear spikes. The only HUGE event that hadn’t really had any effect on listening was David Hasselhoff’s birthday. The Hoff is the mascot and his birthday is always big news here in Old Street, but sadly not with the wider world. However he did have some huge spikes in 2011, which a quick check on Wikipedia proved to be related to a come back tour in Germany and Austria, who also have great taste in idols.

A tribute to Steve Jobs

The Steve Jobs tribute was the last one to go in. I wanted to do a tribute to Steve (mostly because I am addicted to my iPhone and iPad), but mostly due to his huge impact on the world of music. The trouble is he’s not an actual artist (or so I thought), so he doesn’t have listeners to create a graph from. Instead, I used our site statistics to show how Apple devices are represented in visitor levels. It was only later that I learned Steve Job DOES have an artist page, as many of his keynote speeches and addresses have been shared as audio files and podcasts, which do actually “scrobble” … and yes, there was a spike after his death in October.

Graph showing the scrobble stats of Steve Job's speeches for 2011 on Lastfm Best of 2011 music datavis (datavisualisation) Best of 2011 music datavis (datavisualisation)

Translation issues in web design is a global company and provides translations in 10 languages. Translation is usually added into the html, but as the datavis was a graphic, yours truly had to edit the translations by hand, which was fun, as not all the character sets would work in the cut of Helvetica Neue I had. Also, sentence length in translations can be a huge layout issue, especially if tabs are used. In this case the annotation of the charts took up a lot of room and needed to be considered early on. Contrary to popular belief German wasn’t the most problematic in terms of sentence length; Russian caused the most formatting problems, followed closely by Polish. Best of 2011 music datavis (datasualisation) translated into Japanese

See Best of 2011 charts UX & visual design Charts style

I’ve been working on a refresh of the “Charts” section of the site, including a new filtering options for “Hype”, “Top Artists” and “Top Loved Track”. This first launch only includes filtering by date, a later release will include “genre” and “location” filters, so that you’ll be able to can see the best “electronic” music or “black death metal” in your home town. Have a play at charts UX and visual design charts UX and visual design artist charts UX and visual design artist charts wireframes and user flows charts UX wireframes and user flows charts UX wireframes and user flows charts UX wireframes and user flows

Tablet music discovery app – concepts & user-flows

Tablet ap concept - main "artist" grid view

Brief: Conceptualise and a music discovery app for WebOS. Timeline: 1-2 weeks.

Concepts, wireframes and visual design for a music discovery app. Currently without a stable home (As of 18 Aug).

Artists screen

Tablet app concept - slideshow playing mode

Tablet app - "Artists listener stats view"

Tablet app - "Cold start" view - a tool to quickly add artists to your library

Wireframes below – the notes have ben removed (so I don’t have to worry about too many typos out in the wild ; ) !

Tablet app - major screens map

Cold start experience – a way for new users to quickly add artists to their library

Exploring artists and recommendations

Exploring artist’s biography, images and top tracks

Playing personalised radio with slide show and listening stats overlay

GUI doc

Initial sketches of the interaction model

Browsing music artists using touch gestures model 1

Browsing music artists using touch gestures model 2

The new Festivals app

2012 W3 Awards Silver Winner Festivals app won a 2012 W3 Silver Award for the Music & Audio Mobile App category and a 2012 Mobile WebAward from the Web Marketing Association. You can download the app on iTunes here. Festivals iPhone app Festivals iPhone app Festivals app

My part in the project was to: create a set of wireframes, work out the userflows, provide UI and marketing assets, and follow up with QA and bug testing.


  • Festival compatibility – find the best fesitval for you based on the artists you listen to.
  • Recommended line-up – picks out the artists you listen to most in each festival.
  • Sort by location – people travel for festivals, your ideal festival may be on another continent!
  • My List – plan your summer festival season and save festivals you’re interested in
  • Friends – see all the festivals your friends are attending.

Read more about it on the blog

Comments from around the web

With the addition of their new Festivals app, 5 years of data just became even more useful for me – @MattHurst Launches Amazing New Festivals App — #music – @Acecentric

Awesome new #lastfm smartphone application recommends music festivals according to your musical preferences – @Florianmaganza aims to making choosing which to attend easier with its new Festival application – Mashable – Live!

Easy Gourmet Catering new CMS website
Easy Gourmet Catering are based in East London and produce gorgeous food for weddings, events and private functions.

Easy Gourmet Catering’s new CMS site is live. I designed and developed the site, as well as creating a new logo and brand. Still some holes in the content, but it’s good to get it live to let Google start indexing.

I started what I though would be the slow process of switching the DNS with the current host (the mammothlyg expensive Netbenefit) only to find things happened super quick. Then had to migrate 8 pop email accounts and set up the necessary forwarding the client was using – which meant learning how to migrate pop email FAST! Always a good way to learn 😉
The design and build of the site took 2 months and was completed in January, however putting the content has taken much longer. Easy Gourmet had great help from my friend Michael, who is an excellent editor and travel writer. However, this kind of content is quite personal to the business and needed a lot of involvement and consultation with the client, Marie, and running a successful catering company keeps her very busy.

Better SEO

The most exciting part of this project is the SEO opportunity. The old site was poorly structured and not at all optimised. I did an audit of the 40 most likely customer search queries in Google for page rank (e.g. Wedding caterer”, “Catering London”, “wedding reception catering”). I found only the exact company name “Easy Gourmet Catering” returned a page 1 listing, and that was compromised by a competitor with a similar name in the second position. For all the other search terms there was no listing at all. The new CMS structure and some basic copy alone should give this site a decent presence in search results, but with Michael’s rich copy and some “white hat” optimisation tricks of mine, I think this site will start to be SEO competitive. Google generally takes between 7-14 days to re-index a change on a site; there is an unconfirmed theory that Google is slow to react because it “sandboxes” changes.

Easy Gourmet Catering is a successful business now, even without the aid of natural search listings, woth this new site it should explode! If, that is, people really choose caterers from the web, or if it’s more of a word-of-mouth reputation based business.

Easy Gourmet Catering new CMS website

Attento – interaction | Yoga Therapy | Personal portal

Graeme Balfour - Attento Interaction Design | Yoga Therapy | Massage Therapy site
This links to a series of flat designs to click through.

Second iteration ideas for my Graeme Balfour, who needs a unified personal/professional identity and website design. The gesturecons from the first iteration are still planned, but the more urgent issue is to get the web presence sorted.

Sketches for a new identity…

I love a challenge ; )

These are sketches for a professional identity for a friend who has a very diverse skill-set: massage therapist, yoga teacher and usability consultant.

The easy route would be to treat each strand separately. But that’s no fun. There was already a nice idea of using hands as a conceptual image for the massage, the leap was to tie that into “interaction and usabilty”… oh and “Yoga”.

As often happens, there was a bit of serendipity: earlier that week a colleague had introduced me to a really nice set of “gesturecons” (illustrations used in diagrams to demonstrate how to use software on touc-screen devices) for a user-flow diagram I was doing. Massage is about touch, so why not use gesturecons to illustrate massage movements?

Trying to tie this concept into yoga was a but more work. Then I remembered that in yoga books you often have figurative diagrams to demonstrate postures, and in yoga there are postures just for the hands, called “mudras”.

It seemed to fit quite nicely as an idea, hands that massage, a hand in a meditative mudra, and a hand performing an interactive gesture. new logo

Books With Bite Logo
Books With Bite new logo

When I first designed the Books With Bite site Hachette didn’t have a logo ready, so I quickly mocked one up (below) and they were happy to keep it. Now the in-house team have a new logo, made from one of the cover illustrations and the house fonts  Goudy Old Style and some other funky distressed font called “Beach”. The new logo fits the site really well and still has dripping blood to fill the “glass vial” nav panel, though I think my treatment was more sublte ; )

Books with Bite logo
Books with Bite initial, temporary logo

Easy Gourmet identity & logo

Easy Gourmet Catering logo, a cream heart etched in a black sauce

Monogram of E and G and a heart shape

Logo brand mark - a cream heart, etched into a fruit coulis

First iteration

In the photograph I was using to draw this logo, which represents the decoration made from a drop of cream in a fruit coulis, it looked like a leaf. They are in fact hearts. So I have updated my Illustrator rendering for this logo mark. The shape is more feminine now and will compliment the image of the (still secret) company and it’s owners. Original design is below.

Easy Gourmet dessert with cream in fruit coulis

Secret branding 1

Illustration for “My Time Out”

My Time Out

“The social buttefly”. OK, it wasn’t my idea.

Logo illustration to be used as a brand element and to spice up the UI of “My Time Out”. Drawn in Illustrator, the outline was a tracing and the markings were hand drawn. Lovely, lovely bezier fun.

Someone walking past my desk while I was drawing this commented “your job is so much fun”. I guess you take it for granted after 15 years, but it’s no bad thing to spend an hour being paid to draw a butterfly.

Books With Bite

Books with bite wireframes

Work is progressing on the build of the Books With Bite site, a site for Hachette Publishing to increase engagement with their range of “Supernatural romance ” titles. The site will be based on Joomla to offer the client to manage and update the site.

I’ve designed the site and created the logo, the Joomla build is being handled by Lurex Lounge. The deadline is Halloween!