Spotify Flashback

Spotify Flashback is a mobile app supplementary to the original Spotify that helps users navigate played history by specific places and times in the past.

Type:
Personal Project

Role:                                  Team:                                            Timeline:
UX Designer                    Andy Kim, Mier Lee                    Apr - Aug 2020

Timeline:
March - May 2020

Role:                                  Team:                                            Timeline:
UX Designer                    Andy Kim, Mier Lee                    Apr - Aug 2020

This project was not sponsored or incentivized by Verve Coffee Roasters.
 

Background

As I age, it seems like I enjoy the nostalgia. It helps me be more truthful to my emotion, and it even raises my spirit and vitality. A 2016 paper has found that bittersweet emotion increases vitality and serves a positive function, improving mood and possibly mental health. So, I looked into how I could elicit nostalgia in a natural fashion by design.

References: 
https://www.scientificamerican.com/article/why-nostalgia-is-good-for-you/
https://www.nytimes.com/2013/07/09/science/what-is-nostalgia-good-for-quite-a-bit-research-shows.html
https://health.usnews.com/wellness/mind/articles/2018-12-26/how-nostalgia-can-be-good-for-your-health-and-well-being

User Interview

I conducted casual interviews with 20 acquaintances (20-to-64 age group) and asked:

Q. Among the five senses, which one helps you to bring back old memories?

Spotify_UserSurveyResult

Through this survey, I found out:

  • Hearing seems to touch people's nostalgia the most. 
  • For hearing, people feel music and songs to be the most effective. 

Targeted User Groups

1. Generation Zers
Generation Zers are most comfortable and accustomed to online music streaming and recommendation services in the first place. However, most such services only offer choices by one's taste and maintain the record of when a song was added, but not the time or period when it was heard.

2. Millennial

The Millennials have lost or forgotten most of their personalized music playlists as the mp3 era shifted to today's online streaming services. I hope I can get them to recover their old playlists and bring back their favorite memory.

Bill's User Journey Map

I drew out a user journey map of Bill, an active music streaming service, to discover what different paths he would take to find an old song that he heard in the past. I discovered the following needs for users and challenges that needed to be addressed.

Spotify_CUJ_1

The Goal

As I analyzed the journey map, my goal became clear; the right solution could not be just a quick fix, but to propose and create a new kind of experience flow of searching music with time "and" place.

User Flows

Spotify_UFM_Type1
Spotify_UFM_Type02

Creating a user flow map helped me develop the most convenient and easily accessible pathways a user can take. I named the system "Flashback" because it helps users to search old playlists and flashback to different "times" and "locations."

Type 1
An AI module that suggests a music playlist depending on the user's current location.

Type 2
A searching tool that allows users to manually input certain times and places.

Sitemap

Spotify_Sitemap_test

Through the site mapping process, three major design requirements were derived.

  • Providing "more" than just necessary history search capability.

  • Designing this concept to be self-explanatory and easy to follow.

  • Choosing the right UI look and feel.

Potential solutions to the three above design requirements.

  1. Flashback LIVE Mode
    That suggests a playlist of a specific time through a notification when you are walking or passing by the same place where you heard it in the past.

  2. "Set place" and "set time" pages
    Setting for the time first ahead of the place is preferable because, one could be in several places for a single period, but not vice versa usually.

  3. An "onboarding" page
    For an intro of what this application can do and permissions for allowing notification and place data.

  4. A guidance page
    For helping the user match the time with a place.

Most importantly, as I believe that the nostalgic music experience is unique in its way, the Flashback service was created as an independent child app (instead of embedded inside the main app). 

Thus, similarly to Spotify Station, the required data is fetched from the main app. 

Wireframes

Styleguide

Even though Spotify uses a very flat visual style, I went with the skeuomorphic approach because this was going to be a subsidiary but distinct and separate app from the mother Spotify app. I tried to make the 3D look, that goes well with the nostalgic feel, as harmonious with the original look and feel of Spotify.

Design languages were mostly brought from Spotify to keep the consistency; however, I developed the UI/UX for the Flashback service. 

"Poppins" font is used, which is still similar to that of Spotify. I chose yellow as the overall tone of color for the Flashback service to give retro-ness.

Spotify_Style-28
Spotify_FinalDesign_03
Spotify_FinalDesign_04
Spotify_FinalDesign_01

User Scenarios

Features

Search music by time

Is there a time period in your life which evokes emotion by music? Discover your old playlists from a specific time. 

Spotify_Time
Spotify_Location

Search music by location

Is there a special place that evokes emotion by music?  Discover your old playlists from a specific place. 

Flashback Live's suggestion

Flashback Live tracks your location data. Thus, if you are passing by a certain area such that Spotify recognizes you have music history, it will suggest you rediscover it.

Spotify_Notification_01
Spotify_Data

Location History

You may have forgotten about the association between a song and times/places. Spotify Flashback records all of the user's played history as associated with time and location.

Distance Filter

For an efficient search of playlist history, distance filtering is available to configure the best service.

Spotify_Distance

User Testing & Result

Lastly, I had 20 interviewees use Spotify Flashback on their own, and it was interesting to see various reactions. I was pleased to see that more than 17 interviewees (85%) understood the different modes and their workings and wished to use them in the future.

There was also very interesting feedback about applying the Flashback experience in cars, especially for future self-driving cars. Imagine riding on a self-driving car, passing by some nostalgic place, and your car automatically playing the associated music. It will be almost like an actual time machine.

FlashbackCar01

What I've Learned

This project taught me how to strike the right balance between my design aesthetics and existing design languages like Spotify.

I strived to leverage the existing technology rather than rely on or imagining futuristic technologies so that my service could be actually be deployed and used practically. Aesthetics played a crucial role in evoking the user's emotion - I had to go beyond just providing information.

Like any project, I came to realize how even a simple looking idea could involve many different and conflicting variables and design choices, each of which had quite an impact on the end product.