last.fm – Graham Todman freelance UI / UX product designer

Last.fm charts wireframe & user flow

Graham — Tue, 10 Feb 2015 09:24:04 +0000

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.

Last.fm brandguide

Graham — Tue, 09 Apr 2013 08:44:02 +0000

I’ve been updating the Last.fm brand guidelines site to include the new “refined logo”. The site is not open to the public, so here are a few logo usage illustrations from the site.

Last.fm logo exclusion area

LFM_Ticket_sizeLast.fm logo sizes

LFM_Ticket_sizeLast.fm logo placement

LFM_Ticket_sizeLast.fm logo – inproper usage

Last.fm homepage concepts sketches

Graham — Tue, 08 Jan 2013 11:14:53 +0000

Sketches for the “logged out” homepage of Last.fm. The purpose of the page is: to introduce the service, encourgae signup, and offer a taster of the content. In these initial sketches I was exploring the idea of focusing the page on the different use cases: listening to radio, scrobbling listening history, and music recommendations.

Scrobbler tablet & mobile music app design

Graham — Mon, 10 Dec 2012 16:44:53 +0000

Features

Enhance your music collection on iPad & iPhone
Smart playlists created for your mood and favourite genres
Artist galleries and listening stats
Scrobble* music to your Last.fm profile
See who’s on tour

*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!

Last.fm 10 years of scrobbling infographic

Graham — Fri, 07 Dec 2012 18:37:58 +0000

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 infographic Christmas card

Graham — Fri, 07 Dec 2012 18:20:51 +0000

My dear colleague @dawhiting had the idea of looking at the scrobble graphs for the top 10 Christmas songs leading up to the 24th Dec. Over the last few years there has been a consistent spike. I did a bit of “pretty” work and now we have this year’s Christmas card design.

Last.fm 10 years of scrobbling logo

Graham — Fri, 16 Nov 2012 11:55:44 +0000

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

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

Graham — Thu, 15 Nov 2012 11:53:58 +0000

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

Graham — Thu, 15 Nov 2012 11:44:36 +0000

Launch flow and "music moods" playlisting using machine music analysis tags

Exploring local music collection with listening data sorting and meta.

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

Graham — Mon, 12 Nov 2012 13:06:46 +0000

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…

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