We had a hack day at Last.fm to develop ideas for better web radio products. I got together with @tdhooper @marekventur to design an interface for creating customised radio stations.
The interface consisted of two input boxes, one to put in what you wanted to play using a mix of tags, artists, and user profiles, and one that would exclude things you don’t like (e.g. Coldplay, Adele and “industrial house” in my case!). To get a flavour of the music the station would play, we added a quilt of artists and tags, that you could fine tune by deleting tiles from the quilt. Once you were happy, you could then play, save or share the station.
We called it “Radiomongr”. Unfortunately the prototype isn’t available for public viewing, but hopefully it can be used as a model for a releasable product at some point.
User interface design
Play state
I’ve been collecting a board of brands, mostly around music. There’s a definite resurgence of the graphic logo rather than a logotype alone, which makes practical sense when it comes to designing a small graphic for an app icon (like the fin of Grooveshark, or the cloud of Soundcloud). Aweditorium got around this by emphasising “AWE” on their icon. You’re onto a winner if you can claim a single letter – and happne to be a dominant social network: “f”, “p”, “t”,”v”, and “w” are gone now of course ; )
I’m impressed by the stand-out of Pinterest’s cursive “p”, Beats Aduio circle, and the clarity of thisismyjam.com branding.
As well as researching music brands, I also find it’s good to have a set of brands to study and admire just because they’re cool.
This is getting close to the final design. I have been consciously trying to make it more graphic, and less illustrative. I have a tendency to get fancy and use effects and gradients.
A note for the geeks, the nebula in the background was inspired by a certain sci-fi drama. It’s the Nova of Madagon.
I’m designing an infographic to see if Last.fm listening stats can predict the rising stars of festival season 2012, and which are the best fetivals to see emerging talent this year.
I’ve decide to use stars as a metaphor for the most promising artists, and the constellations they form represent festivals. Star brightness = Current hype (how much an artist’s audience has grown over the last 150 days).
The data
@omar711, Last.fm’s data team wizard, Phd, genius and general all round nice guy, anylised the listening data of all artists playing festivals this year, and measured their audience numbers over a period to see who were growing the fastest; this produced a strange decimal number we call a “hype score”.
I needed to translate these hype score into a meaningful graphic. As the figures alone mean nothing, only relative scale from artist to artist would be meaningful. However I encountered a problem. The scale ran from 0.0013 to 0.095, and I couldn’t figure out a decent way to represent the scale graphically. Omar came to the rescue with a simle math lesson…
The difference between normal and skewed distribution.
Essentially I had a “skewed distribution”, which Omar said “could be solved simply by using square root or log”. He looked at me expectantly as I gawped back vacantly. A quick Excel lesson later, and I had a more usable set of figures.
Last.fm festivals infographic "star" scale
Festival star makers
Omar then looked at festivals over a number of years to see how many artists grew in audience number directly following (and likely as a result of) playing at the festival. This produced a score for each festival on how often they “grew” new stars. Again, this was a decimal that needed translating into something understandable. I decided to take the top 10 and give each a rating out of 10.
My initial idea for the infographic was based around a map, however when the data was ready it turned out the festivals at the top of the list were mostly in the UK and Belgium.
This was for the Camden Crawl flyer. Goes out to 25K people. And there’s no cmd-z!
To get some inspiration and user focus for design the Time Out City Guide apps I interviewed users about their use of information while travelling, and then asked them to sort cards to arrange possible travel app features in order of importance.
The plan for the new charts page was to make it more dynamic by including location and tag/genre filtering. In addition to this we were considering intergrating personal user listening charts. Although user charts were for a later iteration, this wireframe needed to workout the overall IA to prepare for the later development work.
This is a quick user flow to sketch out an email stratergy for communication with new starters, offering prompts to fill profiles, engage with the service, or hints and tips as a response to (or lack of) user activity.
The flow chart was done in Omnigrafle, with which I have a love/hate relationship. I think the auto alignment features are incredible, but as a designer it feels a bit like backseat driving.
Some rough illustrations for a service description page.
Concepts for user listening trend graphs for Last.fm showing how much music a person scrobbles from day to day, and how much they are discovering new music or listening to old favourites.
Website wireframes for Hachette publishing to promote their Vampire Young Finction ranges, called “Books With Bite”.
Homepage wireframe
Book list template
Book detail page template
Series list page
Website site map for Hachette publishing to promote their Vampire Young Finction ranges, called “Books With Bite”.
Website sketches for Hachette publishing to promote their Vampire Young Finction ranges, called “Books With Bite”.
User flows
In my last few months at Time Out I was asked to create some concepts for a Time Out London iPad app. The designs were intended as a discussion point for possible commercial opportunities such as advertising and paid-for content, but also to have something visual to get excited about.
Time Out are the best known for providing “What’s on” information for London to help people find something to do, but they also have strong editorial content on life in London, such as: opinion pieces, cultural commentary and reviews.
The brief I was given for this app concept was that it should feel like a magazine, but have a prominent search facility, however as started mapping out the use cases (below) I quickly came to the conclusion to that there should be a browsable magazine style app (this was a whole year before Newstand and Adobe’s iOS publishing tools), and a separate productivity app for finding things to do. In general, apps are best when they are focused on one purpose or solving one user goal, which makes for a simpler UI. For me, the use case of a productivity tool and a sit back and browse a magazine felt somewhat at odds with each other.
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?
iOS GUI schema
Desktop version schema
Stuff Magazine had a feature on ‘Best of British’ hero brands and products, Last.fm was No.8 and to illustrate the service they asked for some infographics.
It may not seem like much, and it’s no yellow pencil, but this means more to me as I LOVE the Guardian Datablog. It’s a shame the colour fooked up in the screenshot they did. Don’t now what happened there.
Some good tweet feedback too
“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 eronious “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!
A logo for a Valentine’s Day feature on Last.fm. I’m not very romantic and chintz makes me nauseous, so I wanted to avoid the cliches on this logo. As this was for a music site, I felt the Ziggy Stardust lightning bolt was a better representation of love than the typical Clintons Cards heart shape. I knew I’d found the right solution when someone commented “it looks like a heavy metal band logo!”.
The font is set in Eagle Black. The colour came about by chance… When you add a colour overlay to a layer in Adobe Photoshop, the application default colour it always applies is #ef4836 (M: 87% Y:84). I’ve always like that colour and wanted an excuse to use it.