Spotify Wrapped
Released annually around December, Wrapped is a celebration of the listening moments throughout the year.
Many teams and functions across Spotify work together to bring this product experience to life.
Overview
The project
2023 Wrapped aimed to engage more users with their Wrapped data and inspire more users to share it.
In addition to designing a refreshed campaign for 2023, we made UX improvements and built Wrapped on the web for the first time in order to reach more eligible users outside the mobile app and drive increases in engagement.
The team
I primarily worked with:
A design team (Product Designers, Motion Designers, and a Content Designer)
A product team (Product Manager, Data Scientist, User Researcher, Engineering Manager, and Engineers)
And a marketing team (Marketing Managers and Brand Designers)
My role
I led the design for the Wrapped listener experience on the web, entry points to Wrapped that linked from the Spotify desktop and mobile apps, and the Your Top Songs playlist in the mobile app.
UX strategy, design sprints, user flows, information architecture, wireframing, visual design, interactive prototypes, usability testing
The opportunity
We wanted to create a cultural moment with Wrapped that would engage more users and inspire more sharing than before.
Before the 2023 launch, Wrapped was already considered a cultural phenomenon and one of the most anticipated and celebrated moments on the internet. Through visuals and animations, the campaign provides users a personalized journey of their listening data—such as their top songs, artists, genres, and total listening time—and invites them to share their Wrapped with others.
While 2022 had successful results for Spotify’s growth, it had also revealed key takeaways and learnings for improvements, such as through awareness and education, entry points, new data points, and sharing. These areas were translated into new opportunities in order to reach our business goals for 2023.
The problem
Despite success in 2022, we found that a majority of eligible users never viewed their Wrapped. We believed this was largely because the feature was only accessible through the latest version of the mobile app. However, a significant number of users exclusively stream on other platforms, such as the desktop app, the web player, and smart speakers. So these users didn’t have a way to get to their Wrapped without having to download the mobile app.
Additionally in 2022, a significant portion of users hadn't updated their mobile app, which resulted in compatibility issues that prevented them from viewing their Wrapped results. These non-mobile app users and outdated app users weren’t notified that their Wrapped was ready and available to view. So when and if they did try to get to Wrapped, there was a lot of friction in their user journey:
The 2022 user journey required downloading the mobile app to view Wrapped.
Expanding access
By building a web experience that allows users to participate in some of the magic of Wrapped, we hypothesized that we would expand access by reaching more users who listen outside of the mobile app.
Wrapped web would be available anywhere users can access a web browser. This would reduce the friction getting to the Wrapped experience and remove the need to download the mobile app.
In addition, we would build a webview functionality within the app. So if they haven’t updated their app and they tap on a Wrapped entry point, they would be able to see the Wrapped web version in their app.
Design principles
Based on the user needs and reasons why Spotify listeners love Wrapped, the design team developed a set of principles that would guide our design decisions to ensure a delightful and holistic experience on every Wrapped surface for every Spotify user.
1 – Lead with data
Where possible, incorporate and focus on personalized data.
2 – Make space for delight
Creativity, insight, and humor of the Wrapped brand should clearly stand out.
3 – Include everyone
The concept and design should translate for all users, i.e., all markets and languages, on smaller and low powered devices, and for listeners with low listening data.
4 – Foster connections
Ensure that listeners’ data center around the artists they care about, and they want to share this with people close to them.
Early wireframe prototypes
Defining the web experience
We held a remote design sprint that included the design, product, and marketing teams. Together we brainstormed ideas to align and decide what the Wrapped web experience should be. The design sprint focused on creating a web version that highlights the value of Wrapped and gets listeners excited to connect with others about their listening habits.
We came up with many solutions, narrowed down to three wireframe directions, and then built clickable prototypes that would help us evaluate the designs and engineering effort and ultimately decide on a final design.
The design
From brand to product
The Brand & Creative team at Spotify plays a key role in Wrapped by conceptualizing and executing the overarching campaign's visual and creative elements. Every year they design a visual identity that reflects the essence of the past year, including the color palette, graphics, animations, and interactive elements, that exist throughout the campaign and in the user experience. The 2023 identity drew inspiration from the convergence of internet culture and real life, with a playful nod to the aesthetics of the early 2000s internet era.
As product designers, we worked closely with Brand & Creative to understand the 2023 Wrapped brand's visual language, style guidelines, and campaign objectives. We translated the visual identity into the user experience within the product, integrating the visual elements into the design so that they would be scalable and buildable. At the same time, we ensured usability and accessibility across all 35+ supported languages.
2023 Wrapped mobile web experience
"Genre sandwich" data story in the mobile web experience
"Sound town" data story in the mobile web experience
Top artists data story in the mobile web experience
"Me in 2023" data story in the mobile web experience
Designing for all screen sizes
For the first time in 2023, users could view Wrapped from any web browser, including on desktop, tablet, or mobile devices. We designed Wrapped to use the same aspect ratio and the navigation controls to be responsive across all browser sizes.
Seamless sharing
Millions of users share their Wrapped results to connect with their friends and favorite artists. Each data point and the summary page prominently displayed a share button to facilitate easy sharing of their Wrapped cards on social networks and messaging platforms.
Desktop users can share a summary of their Wrapped results.
Mobile web users could also share their Wrapped summary.
The web homepage
Building on insights from the previous year, where a significant number of users didn't engage with their Wrapped, the web homepage had two main goals: first, to make it easier for users to access their personalized Wrapped, and second, to increase awareness by offering product education about Wrapped.
Desktop view of the Wrapped web homepage
Mobile view of Wrapped web homepage
Entry points
To make discovering Wrapped easier and more compelling to users, we created banners that linked to the Wrapped experience on the mobile and desktop apps as well as the mobile and desktop web players.
We also optimized the display logic on the surfaces and expanded the entry point messaging to be more personalized with users. The desktop banner had to be flexible and adapt for different display sizes.
Wrapped banner in the desktop app directs users to the web homepage.
Banners in the mobile app opened the Wrapped experience. If the user was on an older version of the app, they would be able to see their Wrapped in a webview functionality within the app.
Your Top Songs playlist
In 2022, when a user shared their instance of the Your Top Songs playlist, the receiver couldn’t view the playlist that was shared with them and would instead see their own. We hypothesized that creating easier ways to navigate to and access a listener's playlist would increase usability and engagement with Wrapped.
We made several improvements to the playlist design and user flow, including allowing the receiver to view and listen to the sharer’s playlist, providing easy access to their own playlist, a profile image to make it clearer whose playlist they’re viewing, a more prominent share button for easier sharing, and product education messaging about Wrapped.
Receiver view of the Your Top Songs playlist
Localizing Wrapped for diverse audiences
2023 Wrapped launched in 170 markets worldwide in 35+ languages. Because our goal was to provide a delightful experience for every Spotify user, we translated and localized the design into every supported language.
Some of the localization considerations included maintaining a consistent visual identity in adherence to brand guidelines across every language, accommodating the design for text expansion or shrinking in translations, addressing cultural sensitivities, and ensuring readability across languages.
Making Wrapped accessible
The Wrapped feature also made accessibility improvements to make it enjoyable by as many people as possible, regardless of their abilities. The 2023 introduction of the web experience marked the first time visually impaired users could access their Wrapped results using a screen reader.
The design also ensured high contrast ratios between text and backgrounds for improved readability, accommodation of larger text size settings, and ease of navigation. It also incorporated accessibility features like options for keyboard navigation and a reduced motion version.
