Background

Last.fm is a tool that allows people to track all of the music they listen to. This data is then presented back to users with insights into their listening behaviours. One of the key ways this is achieved is through a feature called Listening Reports - a summary of a user’s listening trends over a specific period of time. It’s a place for users to reflect on their behaviour, chase milestones, and share their tastes and interests with friends. It’s also an opportunity for Last.fm to demonstrate the value of our users’ data, providing insights they may not otherwise be aware of.

The content of Last.fm’s reports have been largely unchanged for many years. Since then, there has been a surge in popularity of end-of-year summaries across many different topics. We wanted to iterate and improve on the current foundations to make sure we meet the expectations of users, both old and new, in 2023 and beyond.

Chapter 1: Understanding user & business needs

User interviews & analysis

Before starting any ideation or design work, it was important to understand the current landscape surrounding the existing Listening Reports. To do this, I performed interviews with both senior Last.fm stakeholders (Head of Product, Head of Marketing, Lead Front-end Developer), and a selection of passionate users (aided by our committed moderation team). From these interviews, I was able to summarise what I considered to be the key drivers for the project - something I’d refer back to throughout.

User drivers
Match or exceed expectations of what a ‘report’ entails in 2023.
Provide more data, presented in new and interesting ways.
Update the UI to create a more visually engaging experience.
Provide more opportunities to interact with and compare data.

Business drivers
Demonstrate the value of our offering to new & lapsed users.
Continue to leverage the cultural impact of Spotify Wrapped.
Present a more unified experience across the app and website.
Promote more content sharing amongst our users.

Chapter 2: Understanding the market

Competitor research

While the above interviews were taking place, I also spent time analysing the competition to better understand the context in which we would be developing this project. I looked at market-leaders Spotify Wrapped, Apple Music Replay, as well as some examples from other verticals (Duolingo, PlayStation, Strava).

By analysing both the feature-set and user feedback from these well-received end-of-year reports, I was able to better understand what a report means to people in 2023, and also where companies find the most value in them -

Reports are primarily marketing tools

• One of the biggest benefits of reports is that they tend to be a microcosm of what a particular service offers. This is especially beneficial to Last.fm, a complex service that is often hard to summarise to new users.

• Sharable content is key, creating voluntary, organic marketing opportunities. At Last.fm, we tend to see a large upsurge in sign-ups and engagement after our yearly report is released.

A new report is an event, not a feature

• The event cadence of reports lend themselves to being presented as a reason to open an app or visit a site, rather than an ever-present feature.

• Story formats are popular for this reason, as they provide narrative structure and a visually rich experience.

• Given the above, pre-release marketing and user alerts (be that in-app, via email, or via third-party platforms such as Reddit or Discord) are necessary both to build anticipation, and to ensure the highest simultaneous engagement on release.

We must manoeuvre from Spotify’s shadow

• End-of-year reports have become synonymous with Spotify Wrapped. An unpalatable fact for Last.fm, but something that can be used to our advantage.

• Our focus must be on what we can offer that Spotify can’t (or won’t). Our users argue that Last.fm’s value lies in precise, granular data that can be freely interrogated, which is not Spotify’s strength.

• We have neither the resources nor the time to compete with Spotify’s marketing and visual polish, so we must surpass them with the quality of our content.

Chapter 3: Strategy

The last stage before visual design work can begin. The thorough research helped me to develop a high-level plan of what work would need to be done, along with estimated timelines, budget and resources required. This document was then presented to Last.fm stakeholders for buy-in. To summarise, the project was split into three parts -

1. Update the UI of the existing report page, including new charts content (called Last.year)
   A UI-focused update, including some UX adjustments where needed.
   Adjusting the layouts to make content chunks easier to screenshot and share.
   Removing or de-emphasising some less valuable data (based on research) to keep the reports streamlined.
   Introducing new charts, based on previous user studies, to make this new report feel fresh and interesting.

2. New mobile-first interactive experience (called PLAYBACK)
   An interactive walkthrough of the most valuable data in the reports, whith a high level of layout and animation polish.
   New rich, interactive charts for users to explore.
   Global standings to provide users with more context for their listening behaviours.
   Direct competitor to the modern year-in-review trend spearheaded by Spotify.
   An emphasis on detailed statistics, raw numbers, and insights.

3. New alerts architecture to better promote the release of new reports
   Let users know when a new report is ready. Multi-channel, configurable options.
   Update existing Reports tiles with an ‘unopened’ state.
   Use existing notification system to alert users of all report releases.
   Add new report badges to both app and website homepages

Alongside this proposal, I included a provisional timeline for research, design & implementation, and worked with our Head of Product on a budget for extra development resources. This budget would allow us to hire an external team to build the new interactive experience, while our in-house developers focused on the UI update to the existing report, effectively halving the implementation time.

Chapter 4: PLAYBACK content & user flow

Sketches, prototyping, user testing

With the scope, timeline and budget agreed upon, I could start working on the design in earnest. For the new mobile-first interactive experience, we decided to name it PLAYBACK, and was the main focus of this early design phase.

We began with whiteboarding ideation; we tried to come up with 50 ideas for charts and datapoints. These were then filtered down based on their feasability and how excited we were about them. We ended up with around 15-20 ideas - I sketched these out roughly and tried out different ordering/groupings to get a sense of how they could be arranged.

This progressed quickly to a basic user flow, and digital low-fidelity pages, adding more detail along the way. I created a quick user study using Usertesting.com to validate the flow, and made adjustments based on the feedback. The participants were unsure of the two-way flow I had devised, where the basic flow would be linear, but with opportunities to navigate to sub-pages at certain points in the journey. Users expected a more traditional story-esque flow, so I simplified the experience to better meet this expectation.

Next, I refined the page layouts, added detail and experimented with different approaches to they typography. This turned out to be a time-consuming process - we were simultaneously developing the visual language for both PLAYBACK and the new Listening Report, while also undergoing a brand re-evaluation with an external design studio. This was all as messy as it sounds. To try and keep things managable, I focused on 3 or 4 key pages from the PLAYBACK experience, allowing me to iterate quickly without having to re-draw a large number of screens. Over the course of two weeks, the designs progressed to the final look.

Chapter 5: High-fidelity prototype and final validation

Digital prototyping, user testing, design iteration

With the designs completed, I built a high-fidelity prototype for testing. Using Usertesting.com, I created a study that would explore the navigation, content, charts and overall flow with users. I kept the study simple, with opportunities for open feedback on the participants’ overall experience.

I was relatively confident in the quality and legibility of the charts, and the overall flow, based on my previous usability tests. This final usability test raised one key issue, however - the length. Rewatching the participants’ interaction with the prototype, I noticed their attention dropped sharply from the halfway mark. A couple of them went so far as to explicitly highlight the fact they considered it to be ‘too long’. This immediately set off alarm bells as we were quite late in the process, and ready for handoff. A colleague suggested a deceptively simple solution - adding title pages for each chapter, with a counter to tell the user how far through the experience they were. This would help orient users, and avoid questions of ‘How much more is there?’. I updated the protoype with these and re-ran the test - the results were remarkably better.

With this, we were ready for handoff.

Chapter 6: Handoff and implementation

We had contracted an external development studio called Gangverk, based in Iceland, to implement the project. This was my first time working with an external dev team, so I took extra care with the handoff documentation. I made sure to include empty states, variants and edge-cases, as well as animation notes to guide the team’s motion designer.

I was particularly proud of the naming system I came up with for each page - I used three numbers (e.g. 3:2:1). The first number indicated the chapter, the second indicated the page within that chapter, and the third referred to any variants of that page (e.g. empty states). This system proved to be an invaluable shorthand when implementation began; it was easy to track which pages had been completed, and when discussing bugs, it was always clear which page was being referred to.

As work got underway, I was in daily contact with the Gangverk team. I relied heavily on their expertise in animation, with the help of their motion designer. While I had ideas of how I wanted the experience to move and feel, I lacked the knowledge to describe in detail exactly how the pages and charts would behave in motion. Learning from the Gangverk team was one of my personal highlights of the project.

The entire build took 4 weeks, and while for the most part ran very smoothly, we had to make many reactive decisions based on technical limitations and unforseen edge-cases. Close communication and daily updates helped keep things on track, and allowed us to move swiftly to fill in any gaps.

Finally, on the 1st of January 2024, the feature launched simultaneously to millions of users worldwide.

Chapter 7: Release and reception

We were fortunate to experience a blissfully bug-free launch, and initial feedback was very positive. User complaints were mostly to do with the look & feel - we hadn’t quite reached the visual heights of some of our competitors. Others took issue with the Spotify-ification of the end-of-year reports, but these were heavily outnumbered by users who enjoyed the modern approach, with particular praise being given to the new charts.

Everyone at Last.fm (and Gangverk) were pretty proud of the work, myself included. On October 2024, the project was nominated for a prestigious Lovie Award, and eventually earned an award in the “Best Use of Data Visualization” category. You can read more about the award here.

(Bonus) Chapter 8: 2024 and beyond!

At Last.fm, we don’t like to sit still, so perhaps inevitably we returned to the feature in 2024. A refined UI, new charts, an enhanced user flow and thousand other incremental improvements that probably deserve their own write up - but please enjoy this full run-through of the 2024 edition of Last.fm PLAYBACK.