Team: Self-directed with feedback from mentor and peers

Roles: UX / UI Designer

Tools: Sketch App, Marvel, and Photoshop

Client: Spotify

Timeline: March - April 2019, 2 weeks

Deliverable: Iphone App Prototype

 
 

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.

Objective

  • 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

 
Mobile Showcase (Straight).jpg
 

My Design Process

 
 


User Research

Goals: Gain insight on the business, customers, and current market

Process: Market Research / Competitive Analysis / App Audit / User Interviews

Market Research

I first started my research by creating a research plan which you can view here.

After creating a plan, I then started with some market research in order to gain a general understanding of the music streaming industry and Spotify’s user demographic. From this research, I learned that Spotify tried implementing an inbox and messaging feature back in 2017 but cut the feature short due to the feature requiring a lot of resources / manpower while having overall low engagement.

After learning this, I realized that I must pay special attention in designing a feature that was efficient but also encouraged more engagement of users.

Music Streaming Industry

  • Streaming Generate 75% of the music industry revenue in 2018

  • At a global scale the most revenue is generated in the US

  • Music Streaming revenue will reach $4,357 million in 2019

Where Spotify stands in the Music Industry

  • Q3 of 2018 Spotify had 87 million paid subscribers & a total of 191 million monthly active users.

  • Starting to offer indie artist advances for exclusive rights (wants to create original content sort of like Netflix)

  • Compared to other competitors Spotify has the highest user satisfaction

User Demographic

  • Millennials are twice as likely to pay for a music subscription compared to their older counterpart

  • Spotify users by age

    • 18-24: 26%

    • 25-34: 29%

    • 34-44: 16%

    • 45-54: 11%

    • 55+: 19%


Competitive Analysis

After learning more about the music streaming industry and Spotify, I decided that the best way to learn how Spotify differentiates themselves amongst their competitors was through a competitive analysis. Through this analysis I discovered was that throughout all platforms, most users stream their music through a mobile app which is why I decided to design for the mobile version


App Audit

Next, I analyzed Spotify’s mobile app in order to become more familiar with the current design, documenting notes of all the main features and social capabilities. Doing so allowed me to recognize design patterns Spotify currently uses, which in turn allowed me to better integrate my features into the mobile app. View Details

App Audit.jpg

User Interviews

In order to learn more about the Spotify’s users I conducted in-person interviews with six users who had Spotify Premium. Through open-ended questions, I listened and observed what people thought and felt towards Spotify.

By the time I finished, I gained a better understanding of who Spotify’s users were as well as what experiences they sought through the platform.

  • Number of Participants: 6

  • Gender: 4 male / 2 female

  • Age 20s - 30s


Define

Goals: Synthesize research and identify user needs, goals, frustrations, and motivation

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

Empathy Map

In order to understand the data I gathered through the user interviews, I created an empathy map to uncover insights and define user needs. Although at first glance, it seemed that users are mostly only interested in using Spotify as a music-listening app, there is a social aspect of sharing and discovering new music that can be improved upon. View Details

Empathy Map.png

Needs

  1. Users need an efficient way of sharing music

  2. Users need to know that Spotify’s playlist consist of songs the user enjoys

  3. Users need to be able to listen to Spotify no matter where they are

Insight

  1. Users currently uses a variety of platforms to share music

  2. Users enjoy not having to create their own playlist

  3. Users value convenience when it comes to music


Persona

Next, I created a persona “Tyler” to represent the findings from the empathy map. By basing this persona off all the research I’ve done so far, I am able to create a realistic representation of the target user, allowing for greater empathy and understanding throughout the design process.

Throughout the rest of the project I used this persona in order to help me make sure that all my design decisions are focused on Spotify’s core users.


POV Statements & HMW Question

With the target user defined, it was time to translate Tyler’s needs into action. How can we turn Spotify into a more social and overall enjoyable experience for Tyler? I crafted Point-of-View Statements and How Might We questions to start the ideation process for solving Tyler’s needs.


Ideate

Goals: To ideate website features, information architecture, and flows

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



Individual Brainstorm

Using the how might we questions, I brainstormed a list of possible solutions. The key takeaway from this was to generate as many ideas as possible, I gave myself 5 minutes per question and did two sessions with a large break in between in order to encourage thinking and coming up with more solutions.

Group Brainstorming

IMG_20190401_224652.jpg

Using the how might we questions as a framework, I facilitated a group brainstorm session with a couple friends in order to generate a great variety of solutions together (More heads are better than one). As the facilitator of the session, I focused on creating a positive, nonjudgmental, creative setting where ideas can be shared freely.


Product Roadmap

After collecting ideas from the group brainstorming activity, I created a product roadmap to prioritize several key features aiming to solve Tyler’s needs. I prioritized these features based off how many users it would affect, ease of integration within the current app, and how feasible the feature would be. During this process, I also wanted to make each feature was as intuitive as possible while also being a consistent with the rest of the Spotify app.


Sitemap

Next, I created a sitemap to visualize the information architecture of the app. This helped me determine where to best place the new features in the current app design in a way that is still intuitive for users. View Details

Sitemap.jpg

Task Flow

Next, I created a task flow about a user who wants to use the live listening feature. I focused primarily on this task due to the feature not being as common and I didn’t really have a lot of of examples to look at for inspiration. By building out a task flow, helped me understand how exactly the user would complete the task. View Details

Task Flow.jpg

User Flow

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

User Flow.jpg


Design

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

Process: Sketches / Branding / High-Fidelity Wireframes

Sketches

I started sketching key screens within the user flows I mapped out earlier. These sketches help me quickly iterate multiple versions of each screen. During this process I focused on trying to smoothly integrate the new features while adhering to Spotify’s design patterns in order to create a more seamless experience. View Details

Spotify.jpg

Branding

As I previously stated my goal is to implement these new features while still making sure that the entire app and flow is cohesive. In order to do that, I needed to understand the specifics to Spotify’s branding guideline which can be found here. I also created a collection of photos and references through this mood board.

Style Tile.jpg

High-Fidelity Wireframes

I then moved onto crafting these high-fidelity wireframes in Sketch based on Spotify’s existing mobile UI. These high-fidelity wireframes help give a clear idea of how the exactly the interface will look and work while also communicating design decisions to stakeholders.

Features that were added.

  • Personalized mood quiz

  • Sharing music through a QR code

  • Live listening session.


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 in hand, I created a mobile prototype in Marvel in order to have a tangible product that I can use for testing.


Usability Testing

Task

  • Take the current mood survey.

  • Play the song “We Find Love“ by Daniel Caesar

  • Share the song using the QR Code feature

  • Using the live listening feature add your friends Pearl and Scott, and listen to the song “We Find Love” by Daniel Caesar

  • Pass the remote over to your friend Pearl

Objective

  • Observe how users complete a set of task

  • Identify areas where the features can be improved

  • Identify what in the design works well for the user

Results:

I conducted usability testing at my local coffee and mini golf area with 5 participants all of who had a similar background to our persona Tyler. From direct observation and audio recordings, I was able to collect valuable usability feedback from target users.


Iterate

Goal: To iterate upon the design using usability data

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

Affinity Map

Now that I went out and tested my prototype it’s time to synthesize my findings. In order to do so I created an affinity map to identify common themes and connections within the user feedback. I was then able to identify critical insights and prioritize revisions from top to bottom for my next design iteration. View Details

Affinity Map.png

Recommendation

  1. Have a quick option that says "pass remote" on the music player

  2. Implement a share icon on the music player

Insights

  1. Participants didn't immediately know how to pass the remote

  2. Participants had trouble generating a QR code due to not being able to identify the location of the share option


Revised Prototype Wireframes & Prototype

Lastly, I revised the wireframes and Marvel prototype to reflect the recommendations from the affinity map. Feel free to interact with the final prototype below

Revised High Fidelity.png

 
 

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 recreate everything from scratch inside Sketch.

UI Kit.jpg

Final Thoughts

The foundation of this project’s is similar to many project encountered in the real world which is to improve an already existing product. Since Spotify is already well established it was difficult to identify areas of improvement. I was however able to overcome this challenge by first properly defining and empathizing with the core user. Another thing that I learned from this project was how to adhere to already existing branding guidelines. This was key to the success of the new features because not only did they have to work but they had to work well with the already established platform.

Next Steps

  • Continue organizing design deliverables for handoff

  • Work with developers to identify any technical limitations

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

  • Monitor engagement levels when feature is live

 

More Case Studies

Buena Lanes

(Responsive Web Design)

MotoTech

(Motorcycle Maintenance Ap[)