Group 2.png

Spotify

 

Spotify

Adding Social features

 

Client: Spotify

Timeline: Oct-Nov 2018, 2 weeks

Deliverables: iPhone app prototype

Team: Self-directed, with feedback from mentor and peers

Role: UX/UI Designer

Tools: Sketch App, Illustrator, Marvel

 
 

THE CHALLENGE.

Spotify is a leading music streaming service with a mission to help people listen to whatever music they want, whenever they want, and wherever they want. To improve engagement and retention, Spotify wants to expand on its social capabilities within the mobile app.

This is a speculative project, and I am not affiliated with Spotify.

Objectives.

  • To design social features for Spotify’s mobile app

  • To follow Spotify’s existing design patterns

  • To smoothly integrate the new features into the current app for a seamless user experience

 

Process.

design-process-grey.png
 

 

01. RESEARCH

Goal: To research the business, product, and users

Process: Market Research / App Audit / Competitive Analysis / Contextual Inquiry Interviews

 

Market Research.

I started off with market research to gain a general understanding of the music streaming industry and Spotify’s user demographic. Although Spotify caters to a broad audience, a majority of their users are younger than 35 years old, which explains why Spotify primarily targets the millennial generation. I also identified potential challenges by analyzing Spotify’s past attempt to add an inbox feature and current methods for sharing music. Based on this research, it seemed best to be wary of low engagement and inefficiency when designing the new social features.

 

App Audit.

Next, I analyzed Spotify’s mobile app to familiarize myself with the current design, documenting notes of all the main features and social capabilities. Doing so allowed me to gain a better understanding of Spotify’s design patterns and how new features could be integrated. From the design, it was clear that the primary focus was providing relevant music to users, and social tasks seemed like a secondary feature that was only accessible from overflow menus. This structure will likely change since this project is based on the assumption that Spotify wants to start prioritizing social capabilities as well.

 

Competitive Analysis.

After learning more about Spotify itself, I wanted to learn more about how Spotify users differ from users of other music streaming services. Therefore, I compared Spotify’s user demographic to demographics of other top music streaming companies. The statistics gave me a better picture of who Spotify users were in terms of their music-listening behaviors. I also learned that music streaming services are used primarily on mobile devices, which is why I decided to design for mobile first.

 

Contextual Inquiry Interviews.

To learn more about the users, I conducted contextual inquiry interviews with 6 Spotify users about their music streaming experiences and social experiences with music. By the end, I was able to learn more about who Spotify users are and what experiences they seek through Spotify.

  • Number of Participants: 6

  • Gender: 3 male / 3 female

  • Age: 18-30 years old

  • 5 Premium members

 

02. Define

Goal: To define the target user and understand their needs, goals, and frustrations

Process: Empathy Map / Persona / POV Statements + HMW Questions

 

Empathy Map.

From listening to Spotify users, it wasn’t immediately clear if there was any need for adding social features to Spotify. The interviewees seemed satisfied with streaming music just for their personal entertainment, which makes sense because Spotify’s current design prioritizes this goal. However, since this project added a priority for adding social capabilities, it was important to uncover insights that were relevant to enhancing social experiences for Spotify users. By using an empathy map, I was able to identify user needs that would determine how to best incorporate social capabilities in Spotify’s app.

 

Persona.

Next, I created a persona “Jasmine” to represent the findings from the empathy map. Reflecting Spotify’s target demographic, Jasmine is a young professional of the millennial generation who often listens to music for productivity and entertainment purposes. By giving context and personality to the research data, we can better empathize with the target user throughout the design process. Although Spotify has a broad user audience, I chose to focus on a young adult persona because it’s Spotify’s largest user group and it’s the user group that I collected the most primary data about.

 

POV Statements + HMW Questions.

After defining and empathizing with Jasmine, it was time to translate her needs into actions. How can we make Spotify a more social and enjoyable experience for Jasmine? I constructed point-of-view statements and how-might-we questions to start the ideation process for solving Jasmine’s needs.

 

03. IDEATE

Goal: To ideate features, information architecture, and flows

Process: Group Brainstorming / Product Roadmap / Sitemap / Task Flow / User Flow

 

Group Brainstorming.

I decided to do a group brainstorming activity because there was a lot of creative potential within the challenge of making Spotify more social. Consequently, I gathered four of my friends to help me brainstorm ideas for solving Jasmine’s problems. As the leader, I made sure to explain the context and create an open, non-judgmental environment. By combining our creativity together, we were able to produce a greater number of ideas and have fun while doing so.

Group brainstorming in progress.

Group brainstorming in progress.

 

Product Roadmap.

After collecting ideas from the group brainstorming activity, I created a product roadmap to prioritize several key features aiming to solve Jasmine’s needs. I chose features to prioritize based on feasibility, how many users the feature would affect, and ease of integration within the current app design. It was also important to consider how the new features could follow Spotify’s current design patterns and make for a more intuitive, consistent experience for users.

 

Sitemap.

Next, I created a sitemap to visualize the information architecture of the app. This helped me determine where to best locate the new features in the current app design such that it’s still intuitive for existing Spotify users.

 

User Flow.

To analyze the flow of the new features, I mapped out three user flows based on common scenarios I found from the primary research. This helped me learn which screens and UI elements were needed to implement the new features, while considering how to optimize user flows.

 

TASK Flow.

I then explored the flow in more detail by constructing a task flow about a user who wants to browse music from their social network. This helped me understand more about how the user would accomplish certain tasks based on the decisions the user makes throughout the app.

 

04. DESIGN

Goal: To design high-fidelity wireframes following Spotify’s design patterns

Process: Sketches / Branding / High-Fidelity Wireframes

 

SKETCHES.

I started designing the UI of the new features by sketching out various ideas. I found that within the current layout, I was able to smoothly integrate the new features while adhering to Spotify’s design patterns and utilizing UI elements that Spotify users are already familiar with. With the annotated sketches, I was able to present my ideas to others and gain constructive feedback at an early stage of the design.

 

Branding.

Before creating high-fidelity wireframes, I needed to understand Spotify’s branding guidelines to ensure cohesiveness. To help with this goal, I studied Spotify’s official branding guidelines and other online references, which I collected into a mood board.

 

HIGH-fidelity Wireframes.

I then created high-fidelity wireframes in Sketch for mobile screens. The designs were all based off of Spotify’s existing mobile UI, often requiring me to match pixel to pixel. For the “Shared With You” and Friends Weekly” cover art, I drew inspiration from Spotify’s previous cover art designs. The wireframes demonstrate the look and feel of the new features and encourage useful feedback from stakeholders.

 

05. PROTOTYPE

Goal: To prototype the new features and gain usability feedback

Process: High-Fidelity Prototype / Usability Testing

 

High-Fidelity Prototype.

With the high-fidelity wireframes, I created a mobile prototype in Marvel to gather usability data from Spotify users. Feel free to interact with the prototype using the button below.

 

Usability Testing.

Objectives:

  • To test if users can find the new features based off their existing knowledge of the app

  • To determine the usability of the new features, including learnability and efficiency

  • To identify any common errors while using the new features

User Tasks:

I asked participants to complete tasks based off different scenarios. Here are the basic tasks:

  • Find a playlist where you can listen to what your friends are listening to

  • Find a friend’s playlist that’s recommended for you by Spotify

  • Enable the Shared With You feature

  • Navigate to the Shared With You playlist

  • Identify a song through your phone’s microphone

Results:

I conducted usability testing at local coffee/tea shops with 7 participants who had similar backgrounds to our persona, Jasmine. From direct observation and audio recordings, I was able to collect valuable usability feedback from target users.

Testing with Spotify users at cafés.

Testing with Spotify users at cafés.

 

06. ITERATE

Goal: To iterate upon the design using usability data

Process: Affinity Map / Revised Wireframes + Prototype / UI Kit

 

Affinity Map.

I created an affinity map to synthesize the usability findings, identifying reoccurring behaviors and feedback. Then, I drew insights from the synthesized information, which informed recommendations for the next iteration in the design. For example, the highest priority insights indicated a need to improve the learnability of the new features. Therefore, I recommended to add announcements that introduce the features and show where to find them. Feel free to view the full affinity map here.

 

Revised wireframes + Prototype.

Finally, I revised the wireframes and Marvel prototype to reflect the recommendations from the affinity map. Some of the main changes are shown below. Feel free to interact with the revised prototype using the button below.

 

UI KIT.

While prototyping, I maintained a UI kit in order to document UI elements and patterns for future reference. Although many of the UI elements were based off of Spotify’s existing design, I had to make everything from scratch inside Sketch or Illustrator. The newly designed cover art for the “Shared With You” and “Your Friends Weekly” playlists were made in Photoshop and were inspired by previous cover art for Spotify-made playlists.


 

Reflection.

This project relates to many projects in the real world because the mission is to improve an already existing product. Since Spotify is already enjoyed by many of its users, it was difficult to identify opportunities for growth. However, we were able to overcome this challenge by defining and empathizing with the target user. While working on this project, I also strengthened my ability to create high-fidelity prototypes while adhering to existing branding guidelines. Earlier in the research phase, we identified that it’s critical for new features to have enough engagement to be worth the cost of maintenance. Therefore, a key goal moving forward would be to determine engagement levels of the new features, perhaps through methods such as beta testing.

Next Steps.

  • Work with developers to identify any technical limitations

  • Conduct research that would predict engagement levels of the new features

  • Continue organizing design deliverables for handoff