Spotify Dashboard

Challenge

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." Spotify is the group leader as a streaming music service, and it wants to stay that way. For this reason, they want to improve engagement and retention in the app.

Solution

The solution is to expand on Spotify's social capabilities with a report in the dashboard. It's essential to define the best way forward by understanding the users' needs and having a prototype of the new feature(s) integrated seamlessly within the rest of the app.

Role
UX/UI Designer

Duration
75 hours

Tools
Figma, Adobe Illustrator, Adobe Photoshop

Team
Self Directed, with guidance from a mentor

Goals

Identify the demographics of music streaming services.

Understand current market trends

Determine Spotify’s competitors and their strengths/weaknesses

Determine users’ frustrations/motivations/needs/goals

Understand users’ experience with Spotify’s social capabilities

The Design process

01 Discover

TOOLS USED:

SECONDARY RESEARCH: MARKET ANALYSIS, COMPETITOR ANALYSIS, PRIMARY RESEARCH: USER INTERVIEW.

Secondary research: Market analysis

I started off the project with research to understand and gain insight into the frustrations and needs of the users. I summarized essential points from the gathered collection of data and statistics related to the research goals/topic for more insights:

Spotify has 180 million monthly active users and 83 million paid subscribers.
Spotify provides access to more than 40 million songs.
Spotify operates in around 79 countries
72% of Spotify users are millennials
56% of Spotify users are male, 44% are female
Spotify has 232M active users and 108M premium subscribers
55% of Spotify users linked their accounts with Facebook.
67% of Spotify users are through mobile devices.
Spotify is being tuned by users 148 minutes every day
Around 50M+ tracks and 3B+ playlists are available to users

See comprehensive research

Competitive Analysis

Next, I moved on to competitor analysis to identify Spotify’s competitors and determine their strengths, weaknesses, similarities, and differences to understand how existing services affect the market.

Provisional Personas

Based on my secondary research, I created provisional personas to consider who might make up Spotify’s customer base. It helped me to focused on the question I wanted to ask in interviews.

Interviews

To gain qualitative data about users’ goals, needs, frustrations, and motivations, I conducted user interviews on users that fit the demographics from market research. I completed interviews with five different interview participants. Three are female, and two are male and fall between ages 24 to 40. All are Spotify Premium users.
Below are some of the exciting findings from the interview:

All participants use Spotify mostly on mobile phones.
Participants usually use Spotify during their commute.
All participants mentioned that two essential things in an overall positive music streaming experience are: Content and Discoverability.
All participants mentioned having experience listening to music with other people.
All participants mentioned having experience with numbers and reports.

02 Define

TOOLS USED

EMPATHY MAP, PRIMARY PERSONA, POV + HMW STATEMENTS, BRAINSTORMING

Empathy Map

After completing interviews, I gathered and organised all information to look for insights. I wrote down responses on sticky notes and mapped them out into says, does, thinking and feeling. This method allowed me to discover trends and patterns from which I was able to draw insights and discover the needs of my users.

Insights

Users can use a dashboard on Spotify to see the song's statistics.
Users can share their reports from the week with others friends
Users can control the time that is using the platform.

Needs

Users need to stay up to date with the statistics on Spotify.
Users need to share with friends the reports on Spotify and talk about them.
Users need to know and control the time that is using the app.

User Persona

Based on gathered research, combined with insights from an empathy map, I created a persona that represents Spotify's key audience segment.

POV STATEMENTS & HMW QUESTIONS

Using my persona's goals and needs, I develop Point of View statements and translated them into How Might We questions. This allowed me to define the problem before thinking about solutions.

03 Strategy

TOOLS USED:

PROJECT GOALS MAPPING, PRODUCT ROADMAP, SITE MAPPING, USER FLOW MAP

Business & User goals

After a short brainstorming session, I compared initial business goals with the user's goals to identify commonalities. This helped me to focus on the features that satisfy both business and user.

Product Roadmap

After that, I created a product roadmap outlining features and metrics. This helped me organize my thoughts and prioritize what features to focus on.

Dashboard Features

From the surveys and interviews, I concluded that users are super attentive about the artists and songs they listen to and would like to have absolute control of knowing which artists, songs, and albums they listen to, followed by Spotify's standard of recommendations weekly, monthly and yearly.
In addition, users love discovering new music to have access to the « new » most listened to music.

Another thing I noticed was that most users find it challenging to define their favorite music style, and Spotify doesn't help in that sense. Another proposal would be to implement a timeline tag on the dashboard to indicate the most listened-to music styles.

Many many users were also unable to inform me in the interview when they listened to songs the most, so I decided to add this new Listening Clock utility, it will help the user to know the times when they are most active in Spotify, a similar strategy that Instagram already does it for example.

Features: Top Music, Listening Statistics, Your News, Tag Timeline, Listening Clock

Information Architecture - Sitemap

After outlining the features and priorities in the product roadmap, I created a site map outlining Spotify's current app and incorporated the social elements I designed.

Task & User Flows

Simulating the flow a user follows to achieve a main task on the website, I focused on smaller processes needed for the main task and was able to outline the key screens required by the new feature.

04 Interaction design

TOOLS USED:

SKETCHING, WIREFRAMING IN ADOBE XD

Wireframe: Sketches

Before going digital, I sketched out the key screens necessary for fulfilling the tasks in our user flow. Sketching first allowed me to brainstorm different ideas on how to design different screens effectively. Below are the final sketches that I intend to use when moving into digital wireframing.

Moodboard

In order to have a reference of how I would like the final prototype to look like, I gathered pins in Pinterest that I think would best suit the brand's vision using keywords: Friendly, Innovative, Enjoying. This will help me maintain a consistent visual identity for the project while designing.

UI Kit

To have a collection of visual elements for consistency, I used elements (components, color styles, and text styles that I defined in Figma) and put them all on one page that makes up the UI Kit.

Wireframes Update

Next, I created high-fidelity wireframes mainly to serve as a blueprint for the visual interface and to be used for a prototype that allows us to test the effectiveness of visualize hierarchy, priority, and flow before implementing more details, such as font and colors.

5 Test & Iterate

TOOLS USED:

TESTING PLAN AND SCRIPT, PROTOTYPE IN FIGMA, AFFINITY MAP

I created a prototype in Figma; then, I conducted an in-person and remote usability test with five users recruited in public places. I provided the users with a detailed scenario and had them complete a series of simple tasks.

Usability testing

I went out to test the overall quality and ease of navigation throughout the design and observe areas of errors/difficulties. I had three total strangers (1 male, two female) interact with my prototype. I used Think-aloud Methodology and In-person Moderated Usability Testing. Criteria for participants were based on the demographics from the research phase (ages 20 - 40) and Spotify Premium members.
The users were given the following scenarios and tasks to complete:

Scenario 1: You want to access the reports section from the main menu.

Task 1: Need to find the "reports" section.
Task 2: Choice the time: Last week / Last month / Last year.

Scenario 2: After choosing the desired section, you want to access the dashboard and understand the five tools proposed in the dashboard.

Task 1: Look at all the dashboard sections, say the artists, albums, and favorite songs.
Task 2: Say which day of the week (current and past) you listened to the most music.
Task 3: Tell me your top new artist.
Task 4: Say what musical genre you listened to the most.
Task 5: Tell me what time you listen to the most music.

Summary of findings from 3 participants (1 male, two female):

Completion Rate: 100%
Error Rate: 70%
All participants recognized the value of the feature and how it would affect them in their use of Spotify.
Participants believe it is an innovative tool that has not been proposed by any music streaming platform before.
Everyone found it very easy to see all the sections of the dashboard and understand the feature.
Most of the errors occurred in the first task when trying to find the section to choose the time Last week / Last month / Last year.

Affinity Map

After collecting my notes and audio/screen recordings from my testing, I transferred them to post-its and then grouped joint statements to develop insights on specific site elements.

After grouping similar concerns/topics, I uncovered insights and formed specific solutions for each:

Pattern 1: Time-division section
Insight: Participants could find easier the section.
Solution: Put this section at the top.

Pattern 2: Texts align
Insight: Normally the Spotify platform does not have centralized "titles" texts, this can create confusion.
Solution: Align all texts left.

Pattern 3: Box size
Insight: Participants think the size of the boxes too small, difficult to read some texts.
Solution: Increase the size of the boxes further.

Pattern 4: Contrast colors
Insight: Participants found that the contrast between the colors and the background is little.
Solution: Put more contrast between the elements and make it more dynamic.

UI final

After gaining insight and prioritizing recommendations, I tweaked our UI final screens to reflect the solutions. I used the UI Kit and occasionally referring to the mood board, I made sure that all elements in the prototype are consistent with Spotify's branding to cohesively integrate within the app.

Takeaways

For this project, having solid research, knowing the business goals, and understanding the users' needs were vital in helping Spotify achieve their goals better through adding a features. The greatest challenge here is creating a design that will flawlessly integrate into their current system.