Improving how people scrobble and connect over sound.


This is a work-in-progress! (My Muji sketchbook is suffering!) Have other thoughts on the beloved music platform? Message me and let's talk about Last.fm!

Last.fm is the music search & discovery network. In a time of streaming sites galore, Last.fm remains the go-to space for strong listeners to track history, fan over songs, and find people just like them. As we move more onto mobile listening, I thought of revamping the aged Last.fm application to give weight to the music we love.

Roles User Research & UX Design Visit Say hello to me on Last.fm


Context

Learning and spreading what you love

The beauty of Last.fm is that it puts discovery together with community, while providing comprehensive listening statistics from every platform I listen to. It's essentially a music lover's dream: data-driven and social—and it seems the music community agrees

Last.fm brands itself as your "musical calling card." However, the mobile application doesn't reflect this yet.

Present Last.fm mobile app

At present, the Last.fm mobile app shows you your music history, and has tabs dedicated to top artists, albums, and tracks that you can filter over select time periods. There's brief informational overviews for all of these, too—but the app was lacking in what the website did best: comprehensive listening reports (we want a musical calling card, after all), music recommendations and discovery, and even some of its social aspects.

Music as a center

Before working to redesign Last.fm, I had initially planned to create a concept for an all-around "recommendation" site. Like the scrobbling site, it would be built around chrome extensions and service integrations (Spotify, Goodreads, IMDB...)—I realized this would be trying to achieve too much.

Instead, I would borrow a lot of concepts from this redesign for the Last.fm mobile app.

Feature Mapping

I talked to existing Last.fm users and explored Last.fm alternatives to explore issues with the current mobile experience.

  • Missing key features 👎
    Users often use the mobile site to substitute with the app: listening history, discovery, and social features aren't accessible on the mobile app
  • No mobile onboarding 👎
    No onboarding or syncing on mobile, only on desktop—alienating mobile-first listeners
  • Missing integrations 👎
    Scrobbling support is only built-in for Spotify mobile and local files
  • Minimal track information 👎
    Unlike the web version that brings up biographies, lyrics, and other key information about music—our mobile version has sparse content.

It was clear that there was a suite of product features inaccessible in the application. What stood out to me was the lack of listening history, which presumably should be accessible since the current mobile app mainly gives users information on their previous scrobbles.

How can we give on-the-go listeners the ability to understand and discover their music?

What does Last.fm serve when it tracks music you're playing on your phone, without letting you dive into that history? Tracking and listening history would become a priority.
As we go mobile and listen to music on-the-go: users should be able to see their listening history and its breakdowns, and then be able to participate in discussions from them.

New Architecture & Map

For this iteration of the redesign, I prioritized building an onboarding flow, showcasing listening history and statistics, reworking the way music information is presented, and introducing the social aspects of the site on mobile through profiles.

Mapping for a proposed redesign, first prioritizing the addition of stats, discovery, and minimal social features (profiles)

I sketched a base flow for the redesign taking into account these features. The original mobile app only had a view for the top tracks, and then recent scrobbles. Much of my flow was based on ensuring web spaces were found on the app.


Present Last.fm mobile application

Prioritizations

  • Universality 🌎
    While eyeing to add a breadth of web features on Last.fm, I kept in mind how sizable amounts of users are non-English speaking. (Many of the most popular Last.fm integrations and extensions are made by users outside of the English-speaking world!)
    Keeping with minimalism and intuitive visual flows was key; I didn't want to detract from the way deeper navigation happens on the web.
  • Immediacy 🗂
    Last.fm has fun social features and discovery, but I wanted to keep to the statistics and history that many users were prioritizing and looking for in the app. I opted to leave out some web features like neighbors and events to focus on the peg as a musical calling card.
A selection of the design assets for the redesign that I began reusing while putting together mid-fi screens

Process

Building ground for sound

To begin, I built lo-fidelity mocks for the home, top listening stats and music (artist, album, track) screens. The following are mid-fidelity looks into my proposed designs.

Dashboard, top artist, and music (artist, album, track) screens

Home Screens

New app home (mid-fi)

HOME—Previously, the app home only displayed recent scrobbles that took over the entire screen. Now, a redesigned home gives the user a glimpse into their profile, listening report, and music recommendations.


Screen explorations Present app home
Present top music

TOP MUSIC—Views for the user's listening history are largely the same. Instead of the dropdown, I opted to make the three history levels (weekly, monthly, and annually) more distinct.
Next, a swipe interaction easily swaps between top artists, albums, and tracks.

New top music

Hold Interaction—For previewing music pages, I thought of creating a "hard hold" interaction that would showcase a modal previewing the artist page. I need to look into this more closely to determine where the modal should appear based on source button and thumb/hold position.

Hold interaction (artist preview)

Music Screens

Present artist page
Revised mid-fi artist page (scroll ↓)

ARTIST PAGE

Present album page
Revised mid-fi album page (scroll ↓)

ALBUM PAGE

Present track page
Revised mid-fi track page

TRACK PAGE—The background color on the track shifts based on the originating album.

Profile

New profile page

Listening Stats



New mobile listening stats

Onboarding