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.

Roles & Responsibilities:
Research, Product vision, UI UX

Collaborators:
Personal Project*
Tags:
Design system, Mobile, UI UX

Timeline:
March — May 2020
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?"

Through this survey, I found out:

- Hearing touches 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.

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

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 Al 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

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 Ul 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 Ul/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.

User Scenarios
Search music by time

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

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.

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.

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.

What I 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.