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

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.

I like to sketch here…

or even better, here…

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.

Thanks to Jake Burke for the hoodie vector art template

It’s funny, I can’t see a lead balloon in there ; )

Morphological matrix

After doing some research into the scene and some broad thinking on possible themes that might add personality to the brand, I start to sketch ideas using a “morphological matrix” as a way of organising the ideas, it also helps to make those lateral connections. Here’s the matrix as a whole…

In an effort to maintain consistency and quality of our application icons, I have been collating a GUI (Graphical user interface) reference doc. As we produce applications on different devices and platforms, we need to take native UI styles and features into account. Although there can be no “generic” iconon all platforms, we can still achieve a consistency of drawing shape and general ‘character’ of icons across apps. For instance: to create tab and activity icons in iOS you  provide white shapes on transparent backgrounds, the “blue gloss” styling is added dynamically within the app.

This matrix is more of “how are we doing” document to see if Last.fm style shines through the veneer of native UI styling. The grid shows platforms in columns (names removed for confidentiality of work in progress) and the rows display the various activity states: rest, hover, press)

We made notes on post-its, one observation per note, with quotes from users to back up observations. We used rolls of brown paper to collect and store the notes for taking away later, the paper was divided into the broad themes we were testing. Back at the office we sorted the post-its more thoroughly into columns under more exacting topics. Several people were taking notes so we had to de-dupe, however it was important to keep similar comments if made by different users, as this indicates that the issue might be more common to a wider group.

The death of a thousand notes

Affinity Sorting

The next step is to do an “affinity sort” to look at each comment individually and sort them into groups based on perceived patterns, rather than features. It’s important to start quite freely and not to place a heading above the group or draw a conclusion too quickly. It’s basically finding groupings based on a gut feeling that different users were having similar issues. In this research session we were testing different features, such as “Events & Festivals” and “Artist Library”. In afinity sorting I noticed that a user who couldn’t find  their recommended events was probably having a similar issue to a user who couldn’t find their recommended artists in the “library” section. These two notes were moved from their former “feature” headings into a new group called: “Issue with finding personal recs”. The issue had nothing to do with events or radio, it was a issue around users needing a uniform place to access all their personalised info.

BEFORE: Basic sorting by feature or topic

AFTER: Sorted by affinity – patterns emerge