TTYL x Spotify Case Study

Design Process

Quick Background

This project was conducted under UCLA Creative Lab’s collaboration with TTYL, a venture-backed social media startup based in Santa Monica. As the project leads, we were tasked with coordinating a case study that would give members hands-on experience with product design. Under Alex Ma (TTYL’s CEO) guidance, our team decided to design a feature for Spotify.

Ideation

Our first step was to define a problem. To do this, each member generated problem statements in the form of “How might we…”. Some of examples of statements that were generated …

• How might we make initiating conversations easier through music?
• How might we help a guy express his love for his girlfriend with music?
• How might we celebrate certain events in our lives with others through music?

As shown, the majority of our problem statements were about relationship-building and socializing.

At this point, however, Alex Ma warned us that he’s discussed Spotify’s lack of a social feature with one of their lead designers. According to him, Spotify intentionally hasn’t designed a social feature because their primary goal is to be a music database, not a social media site.

We took this under high consideration and appropriately shifted our focus from making Spotify more social to allowing users self-expression through music using Spotify as a platform. After hours of discussing solutions, we decided to create an “About Me” page that would allow users to showcase their favorite songs, artists and their personality through music.

A UX Challenge

In our initial version of the About Me page, we designed a way to showcase the user’s top listened-to genres.

However, my co-lead and I soon realized that there was a huge gray area between listing a user’s top genres and a playlist.

Specifically, we realized that most people already use playlists to organize their songs by “mood”, “vibe”, or more technically, by genre. Additionally, as most playlists were already public, allowing users to showcase their top genres on the About Me page was fundamentally redundant.

So, after explaining our through process to our team, we decided to scrap this idea.

Final Design

Our final designs, as seen in the following Figma frames, include three primary features:

1. My Picks — My Picks allows users to display their current favorite song and artist and a song that answers a music-related prompt. Users can also edit the underlying text to expand on their choices.
2. Memories — Memories allows users to share a special moment in their lives and associate it with a specific song.
3. Q&A — The Q&A features a variety of music-related interview questions that the user can upload a song and written response to. We were inspired by Genius.

After we had all our features in place, it was time to delegate editing flows and get to work!

Frames

An overview of the About Me page! My Picks is for users to upload their favorite song, artist, and response to a fun prompt along with a brief explanation. Memories (see picture below) allows users to upload a picture of a special moment and associate it with a song and a quick recap of what happened. The Q&A allows users to answer music-related interview questions.

Editing Flow for My Picks

Courtesy of Shirley Tang

Courtesy of Shirley Tang

Courtesy of Shirley Tang

Editing Flow for Memories

Courtesy of Deana Moghaddas

Courtesy of Deana Moghaddas

Courtesy of Deana Moghaddas

Courtesy of Binxuan Zhang

Editing Flow for Q&A

Courtesy of Kirsty Hong

Courtesy of Kirsty Hong

Courtesy of Kirsty Hong

Courtesy of Kirsty Hong

Final Comments

Overall, I thought this was a great project for our members to get hands-on experience with product design. Designing a feature for a pre-existing application also helped with practicing UI skills. Who knows, maybe someone from Spotify will catch wind of this and build it in to their product!