ROLE

UX/UI Designer, with mentor and peer reviewing.

TIMELINE

80 hours over 2 weeks, with time spent revising.

TOOLBOX

Pencil+paper|Sketch|InVision|Adobe Illustrator.

PROJECT BRIEFING

Spotify’s mission is clear: “to help people listen to whatever music they want, whenever they want, wherever they want—in a completely legal and accessible way.” As a streaming music service, Spotify is the group lead and it wants to stay that way. For this reason, they want to improve engagement and retention in the app. In order to do that, they want to expand on their social capabilities. You will be helping them define what’s the best way moving forward in that direction, and provide them with a prototype of the feature(s) that you’re adding, integrated seamlessly within the rest of the app.

OBJECTIVES

1. Expand social capabilities of the app.

2. Improve engagement and retention.

3. Seamless integration into the app.

SECONDARY RESEARCH

I conducted initial Market Research to get an understanding of both about Spotify’s business goals and their current positioning, but also how the streaming market exists and is projected to grow within the US, as well as the competitive landscape Spotify is in.

Some industry statistics:

1. Revenue in music streaming is at $4,357M in 2019 (US).

2. Revenues from streaming music grew 28% year over year to $3.4B for the first half of 2018.

3. Streaming accounts for 75% of all music revenues in 2018 (US).

4. Paid subscription streaming grew to an average of 46.4M users in 2018.

5. As of 2019, there are 184.4M users of music streaming services.

6. In 2017, 37.9% of users were 25-34 years old.

7. In the US more than 900M songs were streamed in 2019.

And Spotify statistics:

1. 217M active monthly users.

2. 100M of these users are Spotify Premium subscribers.

3. This is a 25% increase from Q4 2018.

4. Owns 36% of the global streaming market.

5. Listeners spend roughly 25 hours a month listening.

6. Average user listens to 41 unique artists per week.

7. 44% of users login every day.

8. 40M tracks are available on Spotify in 2019.

9. 68% of streaming happens on a mobile device.

I also conducted a Competitive Analysis; exploring how other streaming services have positioned themselves as well as their relative strengths and weaknesses.

PRIMARY RESEARCH

With market and competitive research under my arm, the next step of my research involved conducting 1-on-1 Contextual Inquiry Interviews with potential customers. I spoke to 5 Spotify users at a coffee show about their experiences using the Spotify app by asking them the following:

View the full Interview guide here

EMPATHY MAP

Next, I took the data I uncovered from user interviews and constructed an Empathy Map in order to identify patterns that emerged between different people. This allowed me to keep a human-centric view of the product as I further examines Spotify users.

I distilled key insights from the categories that emerged from the patterns, and identified needs based on those insights, as follows:

INSIGHTS

Users like discovering new music through curated lists.

1. Users share/receive music recommendations on other platforms.

2. Users like discovering music that are curated by other users.

3. Everyone streamed music on their commutes.

NEEDS

1. To trust Spotify to curating music that they like.

2. To be able to share music with friends across other platforms.

3. To learn what like-minded people are listening to easily.

4. To be able to access and enjoy their music easily when they’re commuting.

USER PERSONA

After identifying those insights and needs, I was able to create a User Persona to represent what the ideal user of Spotify would look like look like. Giving the data an identity with context and personality, helped me empathize with the customer as I built features to suit their needs.

POV STATEMENTS / HMW QUESTIONS

To take this a step further, I crafted Point of View (POV) Statements and How Might We (HMW) Questions to empathize with the problems at hand from Allie’s point of view and create questions that would help ideate solutions to Allie’s most pressing needs.

INDIVIDUAL / GROUP BRAINSTORM

With the “Home might we?” questions defined, I conducted both Individual and Group Brainstorming sections to come up with solutions for Tom. I was able to round up 3 participants - a Spotify power-user, a former Spotify user, and someone who has never used Spotify before to help come up with novel ideas and solutions to the proposed questions.

PRODUCT GOALS

Before approaching the task of creating solutions for the above persona and addressing their pain points with a website and features, I found it helpful to combine the project goals, as defined in the project briefing, with the user goals as defined by research and taking a look at how they overlap with each other.

PRODUCT ROADMAP

With the product goals defined, I was able to create a Product Roadmap that listed all of the different features that would satisfy the business and customer needs - ranked in order of priority based on development time and cost.

SITEMAP

Everything I learned from the product goals and product roadmap went into creating the Sitemap for Spotify. I included the various proposed web pages and structured them in such a way that helped me visualize what the eventual app would look like and how the basic navigation would be.

USER & TASK FLOW

With the site map charted out I moved on to the initial stages of prototyping by creating a Task Flow and a User Flow.

The task flow I devised showed the direct path between a customer wanting to find what’s playing near them, and navigating to the Proximity Playlists section to see the playlist.

Building on this, the user flow I devised followed took potential customers on and additional journey of sharing a song via a “bump to share” feature.

UI REQUIREMENTS

Using these flows and the and the features roadmap from earlier, I created a UI Requirements document that listed out the exact screens that I would need to build and all the elements to include on them

View the full UI requirements document here

WIREFRAMES

Next. I moved onto designing the page. I created low fidelity sketches of potential layouts as a way to visualize different design directions before committing to the ones to use based on Spotify patterns.

I then created High-fidelity wireframes of the screens prior to creating a prototype.

PROTOTYPE

I then built a High-fidelity Prototype using the high-fidelity wireframes so that I could test the function and layout of the app with users. I used InVision to create the prototype that I then did my usability testing on.

View the full Prototype here

USER TESTING

Using the high-fidelity prototype of the Spotify app, I set out to test the features I came up with the product roadmap:

Test Objectives

1. To test the usability of new features in the app.

2. To see if users can complete the tasks successfully.

3. To uncover areas of improvement or inconsistencies in the app.

Tasks and Scenarios

Scenario 1: You’re walking along the lakeshore path near the dog beach and are curious about what music people are playing in the area. You decide to check Spotify for a proximity playlist.

1. Task: Find the playlist of what’s playing nearby, as well as details about the list.

Scenario 2: You’re listening to a song you enjoy and a friend wants you to share it with them. You decide that you want to “Bump” the song over to their phone.

1. Task: Find the option to bump a song and send it to the friends phone.

Scenario 3: You're in the grocery store and want to create a playlist tagged to the area so that other people like you can enjoy the music you like.

1. Task: Create a playlist tagged to the Mariano’s grocery store you’re in, and fill out some details about it.

TEST FINDINGS

I conducted my interviews in-person at a local coffee shop, and attempted to test with people who met my testing criteria and I ended up interviewing five people aged 23-34.

I had the users narrate what they were doing as they ran through the tasks, as well as tell me their feelings and thoughts as they completed their task.

I took their feedback and put it into findings document that summarized everything I learned from user feedback.

View Test Findings here

AFFINITY MAP

I then took this feedback and organized it into categories of - success, patterns, and, comments- that I further organized on an Affinity Map, where I further distilled my findings into insights and recommendations to make revisions to the prototype.

The recommendations I uncovered are as follows:

INSIGHTS

People wanted more info in the proximity playlist details.

1. Users wanted an icon to make the bump feature more clear.

2. It seemed the bump feature wasn’t super clear.

RECOMMENDATIONS (HIGH PRIORITY TO LOW PRIORITY)

1. Add more detail to proximity playlist like “users near you also enjoyed” info, or map data.

2. Make the bump feature more apparent with an icon near the instructions.

3. Give the bump feature screen more information so people know what it does.

LOGO & STYLE TILE

Before implementing the feature recommendations into a high-fidelity wireframe, I set out to create the UI design and visualization of the elements on the new Spotify updates. Using the inspiration I collected on a mood board, I put together a Style Tile that defined the final colors, fonts, and other elements that would make up the visual look of the final app.

I based these UI decisions following Spotify’s current branding guidelines.

UI KIT

I prepared a UI Kit using the elements I included on the high-fidelity prototype. This guide includes all colors, font sizes, icons, and other graphic elements that the Spotify app is built of.

TAKEAWAYS

1. Focus on consistency

   It was at times easy to forget to follow the design patterns already present in Spotify. Especially when it came to adding new features and come up with novel new features that didn’t currently exist in the app - in any case, they had to seamless fit in what was already there. And although a challenge, gave me a great education in paying attention to the details and not reinventing the wheel.

2. Be mindful of business goals

   When building on the work of other UX designers who actually work at Spotify, I needed to be mindful of the decisions they made in the current version of the app. It was tempting to undo their work and completely shift around features to suit user goals. However, Spotify is a business at the end of the day and as much as they want to build the best product for their customers, they still have to do so without cannibalizing their own business. And this was a fun challenge to keep aware of.