Scrobbler tablet & mobile music app design

Last.fm tablet & mobile iOS iPad & iPhone app – Scrobbler

Available on the app store

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

Last.fm Scrobbler iPad and iPhone app - artists view

Last.fm Scrobbler ap for iPad and iPhone - now playing view

Last.fm Scrobbler iPad and iPhone app - smart playlisting

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

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