Last.fm Playback

The design process behind an award-winning music data visualisation experience; planning, research, implementation.

Project: Last.fm Playback & Last.year Listening Report

Requirements: In a rapidly changing competitive market, Last.fm needed to update and modernise its end-of-year Listening Report. Competitor research (Spotify, Apple Music, Duolingo, Sony Playstation) provided context and user expectations, while user testing highlighted key areas of improvement needed, regarding both features and overall usability.

Scope: Redesign the existing Listening Reports to better meet user expectations. Introduce a new linear experience to provide strategic marketing opportunities, and better celebrate the new year by providing more engaging insights for our users. Update our notification systems across multiple channels to better inform users when a new Report is available.

Process: Stakeholder and user interviews to understand the business and user demands. Competitor research to map the digital landscape I would be working within. Strategic planning with Product team to document scope, budget and time-frame. Usability testing to identify issues with the old Reports, and test prototypes throughout the project. Robust design process from pen and paper to high-fidelity Figma designs, iteration of visual language, layout and data visualisation elements. Prototyping animations and page transitions. Procurement process for an external development team, and robust hand-off process to ensure a smooth release.

Success metrics: Tracking social engagement % change YOY, page views, sign-up velocity.

Design process

Last.fm is renowned for its accurate, detailed presentation of users’ listening behaviour, and I was tasked with updating one of their key data visualisation features to better meet market and user expectations in 2024.

The process began with information gathering, in three parts - stakeholder interviews (Head of Product, CEO, Lead Front-end and Lead Back-end developers), user benchmarking (usability tests of the existing feature) and competitor research (Apple Music, Spotify Wrapped, Duolingo, Sony Playstation, FitBit).

This provided the basis for the project requirements, and a project plan including budget, timeline, feature-set and implementation process. A key element of this project was that work would be split between our in-house developers and an external development studio called Gangverk, so a high level of organisation was required. As an end-of-year report, there was also zero deadline flexibility, so maintaining the design & development timelines was paramount.

Throughout the design process, I maintained continuous collaboration with the Product and Development teams, refining details as designs evolved, user flows were tested, and data visualisations were fine-tuned. While the early stages required extensive upfront design work and user testing, my parametric approach allowed for rapid iteration — ensuring that any design tweaks could be implemented instantly and approved on the spot.

By keeping an open and agile workflow, I ensured that every element seamlessly integrated into the overall end-of-year report bundle, while remaining a functional and easy-to-understand presentation of our users’ listening data.

*Example pages from the finished project.*

Sketches & iteration

*Early datavis sketches. These were used for early user flow prototyping.*

*Flow adjustments based on user feedback*

*Progression of the UI, copywriting & layout*

Handoff and implementation

We had contracted an external development studio called Gangverk, based in Iceland, to implement the new Playback feature of the project. I made sure to include empty states, variants and edge-cases, as well as animation notes to guide the team’s motion designer. I also built a rudimentary design system for referencing reusable components.

When naming the pages, 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.

*Example of one of the handoff Figma pages*

*Exploration of data visualisation elements.*

I was in daily contact with the Gangverk team. I had ideas of how I wanted the experience to move and feel, but I lacked the knowledge to describe in detail exactly how the pages and charts would behave in motion. Learning advanced animation techniques from the Gangverk team was one of my personal highlights of the project.

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

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.