Last.fm 10 years of scrobbling infographic

To mark the 10th anniversary of scrobbling, my colleague @stefansperber and I created this infographic showing how the top music genres have changed over the last 10 years. Stefan ran the data queries and produced vectors for the stream graph, I did the final infographic.

Last.fm 10 years of scrobbling logo

Last.fm 10 years of scrobbles logo

 

The Audioscrobbler software is 10 years old and Last.fm is celebrating this revolutionary innovation.
The logo takes elements from exisiting branding assets.

Sketch

10 years of scrobbles logo sketch

scrobble: skrob·bul (ˈskrɒbəll) [verb]
To automatically add the tracks you play to your Last.fm profile with a piece of software called a Scrobbler
If I’m not scrobbling the music I hear, it doesn’t count!

Scrobbler tablet & mobile music app design – icon family V1

Following the iOS design principle of “do one thing really well” we decided to spilt the Last.fm service into three distinct apps which serve clearly different use: radio streaming, exploring and scrobbling your music collection, and finding events to see. This meant coming up with a family of icons that were different enough to be distinct, yet belonged together and clearly reflected the brand.

The solution was inspired in part by the style of exisiting brand illustrations, but simplified and using geometric shapes. Each icon has a loose concept:

Radio: (Obvious!) is personal radio, so radiating waves… no brainer.
Scrobbler: The Scrobbler enhances your local music collection with Last.fm UGC tagging data and creates automated personal playlists. The icon shows inverted triangles, representing  focusing lots of music down to the point of the tracks you really want to listen to.
Events: The icon shows a horizon with points radiating out, representing the points of a globe where you can see your music live.

Scrobbler tablet & mobile music app design – wireflows

Wireflows for iPad local playlisting music app
Launch flow and "music moods" playlisting using machine music analysis tags

 

Wireflows for iPad local playlisting music app
Exploring local music collection with listening data sorting and meta.

 

Wireflows for iPad local playlisting music app
Profile screen and music listening stats views

Wireflows for the local music library stats and playlists app I’m working on.

Attention to detail – tablet & mobile app design

Obsessive, fussy… Me?

When designing an appdesigners take great care over the UI and the fine details. Apple provide a lot of built-in UI styling in the SDK for developers to produce apps of a consistent quality. However, when Apple create their own apps they add an extra layer of detail and finish that is not supplied in the SDK, this extra quality is hard to achieve out-of-the-box.

Designers are fussy by trade, and communicating this obsessive level of detail via email or Skype to a remote developer can be challenging. I have great sympathies for developers, espcially when I find myslf sending them the following documents with design revisions… 😉

 

iOS app design revisions

iOS app design revisions

 

Kevin was as keen as me to get this right, so I hope doesn’t he hate me too much 😉

Smart playlisting music app – demo

I’ve been working with our MIR team (Music Information Retrieval) on the new instant playlisting engine, designed to provide instant playlists from collections of any size.

The guys have created a playlisting demo which you can try out against your Last.fm profile. Please ty it out give us your feedback. You can also read Mark Levy’s background to the technology on the Last.fm blog.

My part in this has been to think about the user experience and ensure that the catagories we choose to create fit with the natural expectation and behaviors that people use when making their own playlists. This engine will form part of a new iOS product I’m designing for Last.fm.

Prototype music track list UI

Last.fm track list player UI design

New playable track list UI style for artists and catalogue pages.

Objectives:

  • Make a distinction betwen full playable tracks and 30 second previews
  • Create a player module to play all tracks avaible
  • An expandable ajax panel to get track info, stats and content in position to increase engagement.
  • Add improved e-commerce features, including the ability to buy a list of tracks in one.

Scrobbler tablet & mobile music app design – sketches

Here are some sketches on an iOS app I’m currently working on, laying out possible ways to interact with your local music collection using listening data.

Last.fm iPad music app - playlisting sketch

Last.fm iPad music app - your artists sketch

Last.fm iPad music app - artist detail sketch

Last.fm iPad music app - play mode sketch

Last.fm iPad music app - profile sketch

Last.fm Scrobbler iPhone iOS sketches

Last.fm Scrobbler music app for iPhone sketch

iPad app sketches - first iteration
This first sketch was a quick pass of how to lay the app out using floating frames, before I moved onto simpler and more interesting interactions.

I like to sketch here…
20120723-124538.jpg

or even better, here…

20120718-212818.jpg

 

MOODmongr – music mood analysis & machine tagging

Last.fm MOODmngr mood music chart

Continued from my previous post, my data team colleague Mark Levy has adjusted the mood chart to only show the percentage of moods in total music listening per week, removing the scaling that showed how much music a user was listening too. This makes it easier to see the variance in mood.

Here is my Moodmongr report or you can give the Mood report a try yourself.

Music Hack Day – MOODmongr

Last.fm Moodmongr sketch music mood datavis

Sketch for an idea for a hack day at Last.fm. The theme is “user profiles”. I’m working on a project with Mark Levy, who leads the Music Information Retrieval team, to chart the mood of a user’s listening over time using new audio analysis tagging. We will be testing it on the team first!

I call it MOODmongr

The results

In general, the moods were pretty even across the year’s listening of my test group; my team mates. This was largely due to the fact that we all have varied music tastes and use radio steams and playlists for variety. However there were a few spikes and points of interest:

20120720-152200.jpg

 

 

 

 

 

Justgo Music – more effects please

Justgo Music - artist page design iteration

In this iteration we are moving away from the flat navigation styling, and adding some depth and detail. I’m designing an iOS app at the moment, so I’m at home doing this stuff. Although, I think clean and minal is a better way to go online as, like the “little black dress”, it never goes out of fashion.

Visit Justgomusic.com

JustGo Music – Beta design specification

http://grahamtodman.co.uk/blog/wp-content/uploads/2012/06/JustGoMusic-Feed-v4.png

Responsive design for navigation

Here is some work I’ve been doing on the Beta site for JustGo Music, which has just gone live. We’re worknig in agile, so designing by component rather than finished pages. The UI designs feature responsive behaviour for tablet and mobile, and a baseline grid to align posts across columns. See justgomusic.com

Electronic music site logo – 3rd iteration

In the second iteration I was asked to try a more minimal logo based around the “J”. We also had a font we really liked called Chalet London 1970 by House Industries.

The client liked the last two ideas, a combination of the clean J shape with a bit of movement.

After some thought, the client decided they actually quite like the rotated “J” logo, an wanted to see some development on that version with colour option. Nearly there. Replaced the funky Chalet “S” with a customised “S” from Lucida.

JustGo Music logo colour samples