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 a proper space for the music we love.

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


Context

Learning and spreading music 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.

If I weren't in tech, I would be in music—I'm sure of it. In each of the past two years, I listened to about 115,000 minutes of music according to Spotify Wrapped (so this excludes my considerable local file and YouTube collection). I fell in love with Last.fm because as a listener and music fan, I want to know my activity, how I fell in love with an album, and what else I can discover.

Last.fm brands itself as your "musical calling card". However, the mobile application doesn't reflect this yet.
I set out to design a mobile experience for Last.fm: the go-to place for music from everywhere should be accessible anywhere.

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 the app just because it has so many missing features: listening history, discovery, and social features aren't built for the mobile version yet
  • 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, and there's no clarity on what is synced
  • 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: users should be able to breakdown their music history and pull it up as needed.

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 key 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. Song details would be a focus, no complexity or getting lost.
  • 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 app as a musical calling card.

Constraints—while crafting this redesign, prioritization of universality and listening history led me to forego some of the more expansive features on the web: events, chatting, charts, and streaming from Last.fm weren't features to prioritize.

Key Assumption—Last.fm's edge is in its data. In an age where we stream everywhere, aggregating and focusing on this data to truly understand it is key—it is empowering to listeners when they understand their behavior.


A selection of the design assets for the redesign that I began reusing while putting together mid-fi screens

Asset Library

For these designs, you'll notice a heavy use of images. One tiny, impactful feature on Last.fm is community-voted images that overlay artist and album pages. I wanted to keep this level of customization and intimacy in while developing the Last.fm mobile world.


OVERVIEW

A redesigned musicscape

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 redesigns:

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


Discover and own your music.

A dashboard with discovery lets users focus on understanding and expanding their music.

In addition to scrobble history on your homepage, recommendations take stage as music you love is recommended to the user. Simple and straight to discovery, users can track their own activity and expand it with ease.



Your listening activity at a glance.

Swipe interactions to go through top music at different time levels.

A new approach at music history gives users the ability to see their musical activity at a glance with an intuitive swipe gesture.



Your calling card & stats.

Easily look at a user's musicality with customized listener reports and profile views.

Spaces for user profile and listening reports give mobile users another layer of insight to their activity, and help them connect with other music fans. Social engagements begin and end with music.



The experience starts on mobile.

A flow to capture mobile listeners.

Now music fans can begin exploring their tastes and history right from mobile. As more of the masses go mobile, it makes sense for Last.fm to begin prioritizing its mobile experience as a starting ground. Even if the app can only technically sync-in to local music files and Spotify—that's a lot of streaming activity that Last.fm can look at! On-the-go music fans can spread their love for music, and have their friends hop onto the platform too.


Take a closer look at how these screens were crafted with music and love, plus see them in action!

Process

Building ground for sound


Present app home

Home Dashboard

Screen explorations

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.

New app home (mid-fi)

NEW HOME—On the new home, recent tracks are more condensed but offer users a direct way to visit their listening reports and discovers.

On universality and discovery 🌎
A redesigned home mirrors the features that users love on the web:This mirrors the Last.fm web experience and immediately offers users a way for more discovery & engagement.



Swipe to love interaction

Track Displays

Love—The redesigned track component features track length and a swipe to love interaction—helping mobile listeners remember highlights from their streaming activity.
Loved tracks are highlighted in music pages.

Edit Scrobbles—a premium functionality allows users to edit track details. In addition to a love interaction, I designed a potential modal that could be used for users editing their tracks.

Edit scrobble


Top Music


Present top music

TOP MUSIC—A swipe interaction easily lets users switch between their top artists, albums, and tracks.
With history levels present at the top, users can easily see their activity through time.

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.


Music Screens

ARTIST PAGE—Emphasis on discovery and providing a concise view of an artist's music.
On the artist page, I opted out of displaying the bio field that the website has due to potential inconsistencies.

Revised mid-fi artist page (scroll ↓)


ALBUM PAGE—The redesign emphasizes the need-to-knows: release date, length, and an expandable about.
A tracklist offers an overview of the songs featured on the album; discovery follows at the end of the page.

Revised mid-fi album page (scroll ↓)


TRACK PAGE—The background color on the track shifts based on the originating album. Lyrics are available in full through a modal.

Revised mid-fi track page Lyrics modal for the track page


Mid-fi profile page (scroll ↓)

Introducing User Profiles

PROFILE PAGE—There was previously no profile page on mobile. Now, it's a social space to instantly see a user's top music, and engage with them through a shoutbox. (Who calls it that anymore?)
Other potential features for this space are neighbors (users with similar music tastes to you) and more details covering play counts & listener statistics.

These profiles focus on music—at a glance, a snippet of a user's activity and history, week to week.
As part of our "musical calling card" design, I wanted all music stats to be easily compiled in the profile screen.



Listening Stats

The listening report page gives users a glimpse into their history.

The reports are filtered by week, month, or year: with immediate scrobble counts, day views, overlaid on their top discovery of the week.

  • Scrobble Counts displayed as bars encourage users to listen even more than previous weeks.
  • Tag Timeline shows the diversity in music taste over time, and highlights the user-generated tags on Last.fm.
  • Discoveries show users their top listens throughout the week.
  • A listening clock provides a new glance into user activity.
Mid-fi listening report (scroll ↓)


Onboarding: Building a mobile onboarding experience

I also wanted to tackle a mobile onboarding experience, especially for the number of users that stream locally or on Spotify that can't wait until their end-of-the-year to understand and expand their music history. This is a huge opportunity area.

Visually, albums and artists are highlighted—like in Last.fm's web experience that relies on community votes to select top images. As the user connects streaming services, the background image reflects this—showing the user's music customizes their entire experience.


Next Steps

As a product, Last.fm has a dwindling userbase and desperately needs to be the best at its many developed features over the years. To me and in this redesign, that was how in an age of mobile streaming over dozens of services: it connected and made sense of everything, empowering me as a listener by letting me know the data behind my behavior.

Instead of falling into a trap of underused prompts or spaces, I'm interested in seeing how the dead simple edge as a musical calling card can lead to everything else: discovery, engagement, and more streams. I'm certain there's power in these building blocks even if the mobile redesign doesn't have the entire web featureset: there's already so much we can get from these numbers and materials. They're simply universal to every listener.

  • Going social ❔
    This design only featured user profiles as a beginning engagement space. If put into action, it would be interesting to observe data on how users engage with one another—especially while only currently prompted by music pages.
  • Listening activity ❔
    With the redesign, it would be interesting to capture how much more active listeners are. Are they only checking on Last.fm to see their latest activity? Do their behaviors change now that there's more numbers and customization that reflect their listens?

Again, all of this is still a work-in-progress. Let me know what you think, or better yet—let me know how you listen.