Combating Competition

Project Overview
Add conceptual features seamlessly within the existing Spotify interface.
Project Type
Speculative
When
Spring 20201
Role
UX/UI Designer
Spotify is a leader in the music streaming industry, striving to help users listen to music wherever and whenever they are. The company continuously fights to maintain its position while improving overall user engagement and retention. In this project, I assumed that Spotify believes that the best move forward may be implementing new social features. With this all in mind, how might we expand Spotify's social capabilities to an experience that is inherently solidarity?
View Solution
The Problem

Top of the Heap

A user’s demand for music was enabled by iTunes in 2001 through its infamous selling proposition of 99¢ per song. 20 years later, numerous other companies have followed in satisfying the user’s craving for specific tracks, including Spotify.

As of 2019, Spotify holds the largest percentage of the music streaming market share and would like to keep it that way. However, instead of staying stagnant the company would prefer to grow.
The Challenge

Maintain the High Ground

The goal of this project was to build upon and not detract from Spotify’s existing success.

The high level objective was:
  1. Design additional features that embed well within the Spotify mobile app.
My Role

Fit for a King

I worked as the end-to-end UX designer and researcher for this project for two weeks in December 2020. In addition, I led a group brainstorming exercise with a team of four remotely over Zoom.
The Solution

Answer Key

My research uncovered that users prefer a solo experience when it comes to music, often using it as background noise as they work. This behavior ultimately leads users to rely on Spotify's competition — namely YouTube. In order to not loose user engagement within the app, I designed the main features and screens below.

User-Centric Generated Playlists

From the home screen, users can access two playlists: Rise n' Shine and Fresh Finds. Both of which provide a user with new music based on his previous listening.

Time-Based Streaming

To provide users with an ongoing stream of their music library, a new settings option called Work Mode was designed. Within the currently playing screen, a user can set the time length of the stream so he more easily allocate their focus elsewhere.

Recommendations Based on Search

Without having to relying on Spotify's competitors (namely YouTube), users can receive music suggestions to listen to based on an unsuccessful search.
My Process

Let's Get on the Same Page

I. Empathize

II. Define

III. Ideate

IV. Prototype & Test

  • Market Research
  • Competitive Analysis
  • Heuristic Evaluation
  • Provisional Persona
  • User Interviews
  • Empathy Map
  • User Persona
  • Brainstorming
  • Application Map
  • Task & User Flows
  • Wireframes
  • Mobile Prototype
  • Remote Usability Testing
  • Affinity Map
  • Design Revisions
  • Mood Boards
  • UI Kit
  • Revised Mobile Prototype

I. Empathize

Understanding the music industry and its users through research.

I. Empathize
Secondary Research

Uncovering Information

I started this project by completing secondary research so that I could uncover existing information about the music industry and the Spotify specifically. The methods I used were market research, a competitor analysis, and a heuristic evaluation; using information from the former to create a provisional persona.

Market Research

I conducted market research in order to gain a broad understanding of the music industry before delving into the music streaming industry. Through reading news articles online, I sought out potential opportunities or threats that Spotify may want to consider moving forward. Below are a few key findings I uncovered.
Share Your Music With Me
Musicians are licensing their music through multiple means online. This includes a variety of apps, from Peloton to TikTok.
Crowdsurfing
Relationships between musicians and fans have become closer than ever and even collaborative through crowdsourcing and social media.
Time Hop
Music has increasingly become more about a consumer’s moments instead of physical representations of identity.

Competitor Analysis

After gaining a high-level understanding of the music industry, I compared Spotify's competition to learn from their user experiences. For each streaming service, I used its app and searched for a given song while writing notes along the way.
I looked at both indirect and direct competitors; concluding that the ability to directly select a song was always a delight. However, interruptions in the form of advertising was always a nuisance.

Heuristic Evaluation

Now that I had a grasp of Spotify's competition, I wanted to understand the strengths and weaknesses of Spotify itself. I assessed the app through a heuristic evaluation, which allowed me to judge the user interface against Jakob Nielsen's series of usability principles. As I navigated through the app, I jotted down notes related to each principle. Overall, I found Spotify's current UI design to be successful due to a clear visual hierarchy implemented across its design system.

Provisional Persona

Synthesizing some the information I had gathered during market research, I devised a provisional persona: "Mike the Millenial". Despite being ephemeral, Mike was rooted in research so that he would help me determine who to reach out to later in my user interviews.
Name
"Mike the Millenial"
Gender
Male
Age
25 - 34 years old
Gains
  • Curate playlists based on moments.
  • Maintain a relationship with favorite bands and artists.
Pains
  • Found a licensed song he likes online but can’t find it on Spotify.
  • Continually paying for Spotify.
Primary Research

Discovering Information

Once secondary research was completed, I moved onto primary research so that I could discover new information about the Spotify user. I completed this by conducting a series of user interviews.

User Interviews

Acknowledging that provisional personas can only get us so far in design, I sought out individuals who embodied the characteristics possessed by Mike. I ended up interviewing 5 participants, with 40% being male and all being within the 25 - 34 age demographic. Through hearing each one speak, I was truly able to gain empathy for the user.
Research Synthesis

Making Sense of It All

With primary research finished, it was time make sense of all the information I had gathered. However, before digging too deeply, I transcribed each of my user interviews so that any details obtained would remain raw and unedited.

Empathy Map

With the help of my transcripts, I created an empathy map using statements that were spoken. Direct quotes were written down on post-its and organized by the following categories: doing, thinking/feeling, seeing, hearing, gains, and pains. Each participant was represented by a different color to enhance readability and help in visualizing majorities later.

Derived Insights

Within the categories of the empathy map I was able to recognize emerging patterns of participants' behaviors, as well as their pains and gains in relation to Spotify. This allowed me to further synthesize the information I collected during the user interviews and gain additional empathy for the user. The most prevalent patterns were grouped into insights. For each insight, I wrote an adjacent user need so that I could later address it in my designs. These insights and needs are all listed below.
Insight #1: Users get frustrated when they are unable to find certain songs despite Spotify’s extensive library.
"There’s not every song is on Spotify that I want. But a majority of music that I like and listen to is on Spotify."
Need: Users need to be clearly notified of what is available on Spotify.
Insight #2: Users use YouTube when they are unable to find certain songs on Spotify.
"Well, I use Spotify primarily. And then YouTube for things that I can't find on Spotify."
Need: Users need to be able access their songs without relying on YouTube.
Insight #3: Users create playlists based on feelings and moments.
"So if I find songs that I like, I'll put in that playlist, but if I ever want to get nostalgic, I'll listen to music from that year and that will honestly transport me back to that time."
Need: Users need to have playlists that are personal to them.
Insight #4: Users play music as background noise.
"Usually, I have music playing all the time, in the background, very softly... Most of the time I use it as background music to help focus on work."
Need: Users need to fill the void of silence.
Insight #5: Users enjoy discovering new music.
"I want to be discovering new songs, but it plays those same songs that it knows I like. And I'm like, okay, but can you help me find a new song. I'd like to find more songs."
Need: Users need to have fresh music in their libraries.

II. Define

Revealing the Spotify user, his needs, and his problems.

II. Define
User Persona

Meet Robert

To summarize all synthesized information from the empathy map and its resulting insights, I created a persona named Robert. For the remainder of the process, Robert acted as a continuous reference point of the targeted Spotify user. All information of the persona was directly derived from my research to ensure accuracy and eliminate bias.
Brainstorming

Outside of the Box

Based on the insights that emerged earlier as I created my empathy map, a series of "How might we...?" questions were established. These inquiries, listed below, later acted as prompts for all future brainstorming.
  1. How might we clearly notify Robert what is available on Spotify?
  2. How might we give Robert access to his songs without relying on YouTube?
  3. How might we give Robert playlists that are personal to him?
  4. How might we fill Robert’s void of silence?
  5. How might we give Robert fresh music in his library?

Individual Brainstorming: Mind Map

In order to come up with ideas of how I might address the needs of Robert, I chewed on the "How might we...?" questions from earlier. For each question, I listed as many potential answers I could based on what design patterns already exist on other apps, as well as anything that simply came to mind.

Group Brainstorming: Brainwriting

Understanding that there's only so many ideas that can emerge in a silo, I facilitated a remote group brainwriting session. Over Zoom, I assembled a team of four participants, with each one possessing a unique professional background. Before the activity began, I summarized the project and introduced the group to Robert. Each participant was then given a "How might we...?" question and was encouraged to write as many solutions as they could for 3 minutes before moving onto another question. After participants had the chance to work on every question, we discussed the resulting ideas and which ones we thought were best.
"Understanding that there's only so many ideas that emerge in a silo, I facilitated a remote group brainwriting session with a team of four participants over Zoom."
After both brainstorming sessions, I was left with plenty of ideas to move forward with. To prioritize, I listed all of them according to the goals of the project and the needs of James. This helped me gauge which ones made the most sense to pursue and later design.
Application Map

Getting Organized

With all ideas prioritized according to the project, I put together an application map showcasing the best solutions. This would convey the existing organization of the Spotify app, as well as where the features I planned to design would fit in. The information architecture was based on what already exists on the Spotify app. However, for the new features, I made assumptions where they would best fit; knowing I would later determine the app's overall navigability through usability testing.

III. Ideate

Generating solutions to the problems Robert is facing.

III. Ideate
Task & User Flows

Let It Flow

Using the application map as a guide, I created task and user flows. These were made so that I could understand how a user might achieve his needs discovered earlier through user interviews.

Task Flows

I started with task flows in order to understand the potential actions and screens a user would face. These were based entirely on assumptions since I knew I would be testing the same exact flows in usability testing later on.

User Flows

Knowing that task flows are imperfect due to a lack of acknowledging a user's decisions, I wanted to generate a better empathy for the user. Therefore, in the form of user flows, I thought of how he would navigate through the app with decisions in mind. Like the task flows I created prior, these were based entirely on assumptions since I knew I would eventually conduct usability testing.
Wireframes

All Wired Up

Now that I had a sense of how a user would potentially navigate to the new features of the Spotify app within its existing information architecture, I designed a series of screens. Throughout I remained inspired by the design patterns of Spotify to maintain consistency and hopefully decrease cognitive load.

Low-Fidelity Wireframes

I started by sketching low-fidelity wireframes on a whiteboard. As I went along, I made sure to label each sketch to avoid any potential confusion of what was precisely drawn. This helped me quickly communicate the user experience I was striving for without spending hours on Adobe XD.

High-Fidelity Wireframes

After sketching wireframes on a whiteboard, I recreated them in Adobe XD. Since I planned to later test my prototype on existing Spotify users, I went straight into high-fidelity so that they would engage in what felt like a familiar experience. From my sketches, I recreated the screens that I felt that not only made sense within Spotify's existing interface and patterns but also addressed Robert's needs the best.

IV. Prototype & Test

Building best ideas and iterating based on user feedback.

IV. Prototype & Test
Mobile Prototype

Ready for Testing

The high-fidelity wireframes were then configured into a prototype on Adobe XD. This finally gave me the ability to test the assumptions I made about the app's overall navigability, as well as the screens and actions associated with different tasks.
Remote Usability Testing

A Dry Run

Using the complete mobile prototype, I carried out remote usability testing on Zoom with five participants. Throughout, each participant engaged in a think-aloud exercise and were recorded with expressed permission. This allowed me to receive real-time feedback on the mobile prototype and gain additional empathy for users through hearing their opinions. Just like my user interviews, I transcribed each test so that any all details would remain raw and unedited.
Affinity Map

Room for Improvement

Using the transcripts from usability testing, I pulled salient quotes from each participant on wrote them on post-it notes. Similar to the empathy map, each participant was represented with a different color in order to increase readability and help in visualizing majorities later. Using the affinity map, I synthesized what participants said by separating post-its into the different tasks they completed, as well as a section designated to any remarks about the overall experience. From there, I was able to distinguish patterns of pain points and successes from my testing.
Design Revisions

Change for the Better

Each pain point that was discovered through the affinity map was then evaluated by how much time it would take to fix against how many participants mentioned it during testing. This helped me determine not only what needed to be fixed on the mid-fidelity wireframes before designing the high-fidelity prototype, but which fixes are more important than others. These fixes became known as my design revisions, with an explanation of how I conquered one below.

Distinguishing the Rise 'n Shine Playlist

During usability testing, 60% of users mentioned that they found the already established "Good morning" headline in Spotify misleading when attempting to find the Rise 'n Shine playlist. Users stated that they expected a morning-related playlist would be listed underneath "Good morning" instead of under the pre-existing Spotify headline "Made for you". Using an established design pattern within the Spotify interface, I managed to place the playlist near the "Good morning" headline.
Mood Boards

Staying in Character

Once I understood what needed to be fixed in my designs, I went back to understand the fundamentals of Spotify's branding. This was completed so that went back to fix my prototype, I had inspiration to refer back to. I started by creating a series of mood boards based on the Spotify's existing brand guidelines and attributes so I would have a better understanding of the overall feeling that the company conveys.
UI Kit

On Brand

After assembling the different elements of Spotify's branding, I created UI kit to act as a reference document and ensure consistency. If the Spotify ever wanted to build additional screens for the app, all of the main UI elements would all be in one place.
Revised Mobile Prototype

Making Amends

Once Spotify's branding was fully established, high-fidelity wireframes were edited with the established UI design elements with the proposed design revisions completed. From there, a new mobile prototype was created in Adobe XD.
View Solution
Reflections

Looking Back

Next Steps

Onwards

  • Complete another round of usability testing to ensure previous user pain points were successfully addressed.
  • Understand whether or not Spotify users can navigate to newly added screens.
  • Invalidate or validate the assumptions I made in deciding the different increments of time for the Work Mode feature.

Like what you see?

View my other projects.

Smithsonian

End-to-end mobile app that enhances the existing museum user experience through mobile navigation and augmented reality (AR) labels.

Stella's Bakery

Responsive website for local bakery that maintains a user's perceived food quality through online ordering and tracking.

Primary illustrations by absurd.design
Additional illustrations by Alex Muravev, Olga, and Tatyana from the Noun Project.