ThroughDesign
Published in

ThroughDesign

Spotify 2019 Wrapped — a design masterstroke

Exploring the Colours, UI, and Data Visualisation behind it

Spotify <year> Wrapped has been a common trend for a few years now. This extremely popular music streaming app barely needs to nudge the user to use it. Any user of Spotify immediately takes to its very elegant black-themed and content-focused design. But, today, I want to specifically explore the Wrapped presentation.

Why does Spotify even do the Wrapped thing?

In my opinion:

  • First, the obvious one, to delight the customer with some additional pieces of information about themselves.
  • Second, to nudge users, to explore their own music tastes with context — it is a common conversational piece for people to enquire what kind of music someone likes but many people fumble with their choices or are concretely clear of what they like. With this kind of data presented to the user, the answers may surprise you.
  • Third, taking marketing the app beyond users of the app — Most commonly, conversations about Spotify are often limited to the fellow users of the app itself; specifically features such as sharing song/playlist links. Even if a user shares a song in his/her Instagram story, non-Spotify users might observe it and decide to listen to the song in any place they choose (eg, Youtube, Apple Music Etc.,). Further, a conversation only may ensue about the song itself.
    But, what’s the guarantee that the conversation may extend beyond the song itself and to Spotify as an app? By creating beautiful visual imagery with the Spotify Wrapped presentation and enabling people to share more about their music than just a song, Spotify is creating more room for conversations. (And, definitely hoping for more customers to get on-board and the ones on it to stay longer!)

The Share to Instagram Story feature and direct Open Spotify button is useful only for fellow users.

Exploring the Design of Spotify 2019 Wrapped

The Spotify 2019 Wrapped is available both on the mobile app and the desktop filled with gorgeous animations and succinct data visualisation. In the mobile app, it offers an Instagram-Story like scrolling system whereas in the desktop, it is the traditional top-down scrolling.

Oh, the colours!

Traditional hues such as green, pink, yellow and red all carry certain emotions associated with them. Many people refer to this as Colour Psychology.

In my personal opinion, Colour Psychology is very derivative and contextual. Example, Red wishes to convey excitement, joy, and fun on a Coca-Cola can but on an ambulance, it conveys danger and emergency. I personally don’t think we can always give colour a standard and constant meaning.

Having said that, the widely believed Green equals Environment Friendly and such standard assumptions can’t be erased. BUT, fun fact: All these only apply to common hues.

Uncommon shades of the traditional colours are used to convey excess, fun, and frivolity. They carry no context except to steer someone’s attention towards the colour. The common usage of neon colours as road signs and vests for construction workers are some good examples.

In Spotify 2019 Wrapped’s colour palette, two colours — a green and a pink, take utmost prominence. These two uncommon colours almost look like neon shades. They also ensure that when you share something from the presentation(eg., on IG stories), or store it (eg., phone photo gallery), it’ll be a guaranteed attention-grabber.

Notice that the Spotify colours are somewhere nestled in between the commonly observed colours and the eye-disturbing neon colours. Just the right levels of uncommonness and sobriety.

Would you fancy a UI?

The UI of the entire presentation is stellar, fluid and minimal. By minimal, I mean to say each screen is carrying just the right amount of information. The fancy gimmicks are done just to the right levels leaving you with joy rather than confusion.

Having the perspective of the elements move along with my mouse is a pretty common occurrence throughout this year’s presentation but this particular screen is my favourite. Pairing the perspective change along with a file-cabinet like arrangement is just a fantastic idea!

The last screen on the Desktop enabling the user to share or change the image colours

The amount of data present as well as the placement is just so neat that your focus or attention isn’t all over the place.

Data Viz Wizardy

Saving the best for the last. I believe the task of presenting data in an effective manner with the right amount of information and content is a tough job. It requires skill, a thorough understanding of what is going to be presented and a tonne of creativity.

For example, this is a truly crazy way to present a bar graph. Bringing a 3d object into a 2d space while not confusing us with too many shadows is quite a hard task and they’ve done it pretty well.

Another favourite screen of mine is the presentation of the globe with the artists who I’ve listened to, and their respective countries. Usually geographical data is presented with a flatlay of the map and highlighted regions, but they’ve broken that in a beautiful way. I’d really urge you to check out this beautiful piece of work if possible.

Fun fact: the globe can be rotated by the clicking and scrolling on it!

Besides this, all the other screens carried some very interesting data points presented beautifully — things such as number of minutes listened to, my top songs, how much time I’ve spent listening to my most favourite artist alone. I’ve gathered some of them from my personal Spotify 2019 Wrapped below.

A few screenshots from the mobile App with the Share Option

Overall thoughts

I believe the success of this whole presentation lies in keeping the data structured, playing with colours effectively, and using just the right amount of UI gimmicks to present the data.

Just wish Spotify gave me some filters or handles to manipulate the data to my preference. Something like a dashboard. Could’ve been more fun.

Nevertheless, eagerly looking forward to next year’s!

This is just too pretty!

Your 2019 Wrapped presentation on Spotify should be available on the App directly and on the web www.spotify.com/wrapped. Have fun!