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.

The content of Last.fm’s Listening 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.

Timescale
The project was expected to run from September until early December - around 6 two-week sprints. As this was a year-in-review, it needed to be released before January.

Resources
The project would be assigned three front-end developers, and intermittent access to a team of 4 back-end developers. I would be the only designer, and was expected to take on substantial Product Management duties under the oversight of our Head of Product. There was a mid-size budget for external development resources if needed (spoiler – they were needed).

Understanding user & business needs

User interviews & analysis

To start, I needed to understand the landscape surrounding the existing Listening Reports. 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 the key drivers for the project.

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.
Increase the value of our Pro subscriber tier.

Chapter 2: Understanding the market

Competitor research

Analysing the competition is necessary 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 why companies find them so valuable -

Reports are primarily marketing tools

• 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 creates voluntary, organic marketing opportunities. At Last.fm, we see a surge in sign-ups and engagement when our yearly report is released.

A new report is an event, not a feature

• The event cadence of reports incentivise periodic engagement with an app or visit a site, building predictable interaction habits.

• Story formats are popular as they provide narrative structure and a visually rich experience, in a familiar format (Jakob’s Law).

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

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

Strategy

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 -

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.
Adjust the layouts to make content chunks easier to share.
Remove less valuable data (based on research) to streamline content.
Introduce new charts based on previous user studies, to make this new report feel fresh and interesting.

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.

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
All this needed to be achieved with the allotted resources and timeframe (3 months).

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.

Project 1: LAST.YEAR

Step 1: Content analysis, user testing

As LAST.YEAR was only receiving a UX-light update (and not a re-imagining of the entire feature), I began with a heuristic mark-up of the existing layout. This helped me understand the existing content, and kick-started the creative process of designing improvements.

I also ran a quick user study of the existing report to explore current issues. Specifically, I was looking to understand how users navigated through the report, and how well they understood the data as it was presented.

These activities highlighted some key issues -
Unappealing UI that looks ‘old-fashioned’.
Content is not organised in a logical fashion - seems scattershot and bolted-together.
Inefficient hierarchy - the most interesting data points were buried.

Step 2: Design & iteration

As always, I began the design process with a pen and paper. In these early stages, I focused on the overall content structure, attempting to organise all the data points into logical sections, and making sure that the most interesting information (highlighted by the user study) were given highest priority.

I also explored how we could adjust or redesign some of the existing charts. This would be efficient; taking advantage of existing APIs to build new charts meant I wasn’t over-using limited back-end developer resources.

Worked continued, looping between design iteration, user testing and stakeholder feedback. As I neared final fidelity levels, I built out a core style guide to provide a framework to our front-end team. This style was still somewhat fluid at this point, given the concurrent developent of the PLAYBACK experience.

I performed a final, robust user study with UserTesting.com, including basic prototype interactivity. The aim of this study was primarily to validate that we were indeed improving the experience - this was robustly proven, as the new design performed well on both aesthetics and chart legibility. The only feedback I received requiring action was the relative placement of the charts, raised by three of the six participants. I adjusted the ordering, then prepared the project for hand-off.

At this point, I moved on to the second project - PLAYBACK.

Project 2: PLAYBACK

Step 1: Sketches, prototyping, user testing

I began with whiteboarding ideation; I tried to come up with 30 ideas for charts and datapoints. These were then filtered down based on their feasability and how excited we were about them. I ended up with around 10-15 ideas sketched out, and experimented with 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. Through testing, I learnt users preferred a more traditional story-esque flow, so I simplified the experience to better meet this expectation.

I refined the page layouts, added detail and explored different approaches to typography. This turned out to be a time-consuming process - I was concurrently developing the visual language for both PLAYBACK and the new Listening Report, while also undergoing a general brand re-evaluation with an external design studio. This was as messy as it sounds. To keep things managable, I focused on 3 or 4 key pages from the PLAYBACK experience, and iterated quickly. Over the course of two weeks, the designs progressed to the final look.

Step 2: Digital prototyping, user testing, design iteration

I built a high-fidelity prototype for testing. I created a user study to explore the navigation, content, charts and overall flow with users. I kept the study open-ended, with opportunities for feedback on the participants’ overall experience.

I was confident in the legibility of the charts, and the overall flow, based on my previous usability tests. This study raised one key issue, however - the length. I noticed participants’ attention dropped sharply from the halfway mark. Some explicitly considered it ‘too long’. 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.

Step 3: 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.

2024 and beyond: The work never ends

At Last.fm, we don’t like to sit still, so perhaps inevitably we returned to the feature in 2024. We received an overwhelming amount of feedback after launch, and there were plenty of rough edges I wanted to iron out.

A refined UI, new charts, an enhanced user flow and thousand other incremental improvements that probably deserve their own write up - but please enjoy a few shots of the 2024 edition of Last.fm PLAYBACK & LAST.YEAR.