Spotify

Summary
Adding a social feature to Spotify to increase engagement and connect more listeners to new music.
My Role
UX/UI Designer, UX Researcher
Timeline
Mar 2023 - Apr 2023 (4 weeks)
Tools
Figma (wireframe + prototype)
Jump to Final Solution
This is a student project and I am not affiliated with Spotify. All rights are reserved to Spotify.

Project Background

A global music streaming service.

When it comes to competitive music streaming services, Spotify takes the lead with their fun, easy-to-use interface, an extensive catalog, and device compatibility, which makes them arguably the largest music streaming service in the world. Spotify makes discovering new music extremely easy while also providing accessibility to the music you already know and love. However, social sharing capabilities are limited and refrains listeners from building effective interpersonal bonds with others.

THE PROBLEM.

Music, by its very nature, is a profoundly social art form. People listen together, attend concerts as a group, and eagerly discuss the latest releases wherever they gather. Given this, it's a logical progression to extend these music-bonding conversations into the virtual realm, particularly on a platform as beloved and widely used as Spotify.

As the foremost leader in the music industry, it's imperative to question whether Spotify is fully capitalizing on its potential to evolve into a dynamic social space. By fostering in-app engagement that connects listeners more deeply, Spotify has the opportunity to transform into a hub where music enthusiasts not only consume music but also actively engage and bond with others who share their musical interests.

THE DESIGN PROCESS.

No items found.

user interviews

Want vs. Need

It is crucial to begin asking whether this feature is a want or a need. Would the creation of a social feature serve of use to Spotify listeners and produce impactful and enjoyable experiences?

I spoke with 4 longtime Spotify users between the ages of 25-30. All participants noted that they use Spotify everyday.

Our conversations gave insight into the context of usage, how they discover new music and share music with friends, and their stance on social features and the connection between music and friendships.

User Quotes.

"I want to be able to play songs that I think fits [my friends]... on the off chance that they might like it and discover new music through me, I find that very validating and rewarding."
Participant #1
"It's exciting and validating when I meet people who are also into the same music I am... It's pretty cool."
Participant #2
"[Music] supports a lot of bonding between me and my friends... Having a similar love for artists helps with shared experiences like concerts."
Participant #3
"I share music with my friends pretty often... It feels good when you know people's music tastes enough to be able to send them something."
Participant #4

current assessment  

The Before Shot

After analyzing the business' data and determining their core problem in retaining their customer base, I took in a full assessment of what we currently have as their active website, in order to highlight where we should focus most of the redesign. 

analysis of current home screen and landing page
analysis of current product listings page
analysis of current product details page
analysis of current bag overview screen

user interviews  

Affirming with our audience. 

In part of understanding the data is  connecting with previous users to gain insight on real user opinion of the current website, as well as to understand their mindset when shopping online. I talked to 3 participants who have previously shopped with REVERE THE BRAND in attempt to learn what does or doesn't work for them with the current website, and determine what makes an enjoyable and effective online shopping experience. 

user survey

Collecting a general impression.

Next, I conducted a survey of 25 people to gain a broader understanding of the level of interest in Spotify's social feature, and to gain insight into their opinions on the platform and the potential for music sharing to enhance social connections.

Survey Results.

  • 96% of users strongly agree that music can help build stronger connections with friends.
  • 88% of users believe that listening to the same music can create shared experiences.
  • 76% of users would rather listen to music recommended by a friend than an algorithm-generated playlist.

competitive analysis

Spotify vs. The Competition

Lastly, a thorough competitive analysis of Spotify against other music platforms justified why a social feature for Spotify is a strong need rather than a want.

competitive analysis of music streaming platforms

What does this tell us?

Why not join the playing field? - Other competitor platforms are already enabling a social network presence among their services.
Soundcloud speaks to the vision - While Soundcloud carry their own strengths and weaknesses against Spotify, their social space based on music interests reflect the best of what I imagine to create.
Expanding music discovery - Although Spotify holds a competitive number over competitors, all platforms are continuing to expand their library content⎯Perhaps an addition of a feature that enables more extensive music exploration to the Spotify platform would be significant.
Don't be too broad or vague.

Shopping guides being too broad or vague can make the gift shopping process overwhelming, adding on stress and deter users from finding anything truly potential.

A personal and unique experience.

If it's curated or personalized, it helps users feel like they have their own personal shopping assistant, someone who is specially there to help only them.

Make it intuitive.

A huge online marketplace like Amazon can be hectic, but is actually user-friendly due to its intuitive UX design and layout.

Strong landing page.

These websites feature strong call-to-action buttons on their landing page to immediately captivate users.

AFFINITY MAPPING

Synthesizing our user research data.

Next, an affinity map was created to organize and synthesize the data collected from user research, primarily from user interviews. It helped in gathering common themes surrounding motivations, pain points, and needs, which will essentially create the ideal user persona for this product.

INSIGHTS + USER NEEDS.

Insight #1: Users find it stressful and uneasy when are unable to obtain a gift in time.

Need #1: Users need to get a gift in time to prevent feeling stressed.

Insight #2: Users feel anxious when they are unsure about what gift to get.

Need #2: Users need a way to discover ideal gifts.

Insight #3: Users feel more confident and excited to give gifts when they are guided through what to get the other person.

Need #3: Users need a form of guidance to know what to shop for others.

INSIGHTS + USER NEEDS.

Insight #1: Having common music interests with friends helps users feel closer to them.
Need #1: Users need to know if they share common music interests with others to feel closer to them.
Insight #2: When sharing music with others, users feel good when they receive positive feedback.
Need #2: Users need to feel validated through their music recommendations.
Insight #3: Users find it limiting to use Spotify's algorithm-curated playlists to discover new music.
Need #3: Users need an alternative method to discover new music.

user persona

Creating our ideal user.

Through key insights from research, I developed The Curator as the archetype of my ideal user persona.

PAIN POINTS - Repetitive songs from algorithmic playlists and failing to share music or know what music his friends like
NEEDS - Accessible sharing and interaction abilities with friends and listening to song recommendations with ease
MOTIVATIONS - Creating interpersonal bonds and shared experiences with friends through music in order to achieve validation and positive feedback

user persona for the curator

pov + how might we

Turning problems into opportunities.

To reframe user needs as opportunities for positive impact, I created POV statements and then converted them into How-Might-We (HMW) questions.

pov and hmw questions for spotify app feature
New Social Features to be added:
  • Social feed for sharing and interacting
  • Direct-messaging within Spotify app
  • Two new playable options
  • A re-vamped user profile

Brainstorm, brainstorm, brainstorm.

I used my HMW questions as a starting point to ideate multiple solutions, which I then prioritized based on insights gathered from user research.

project goals

Defining business and user goals.

Before settling on key features, it is necessary to establish business and user objectives that are in line with the Spotify brand. This clear overview gave me a direction when developing the product roadmap in the next step.

business and user goals

product roadmap

Defining potential features.

In a product roadmap, I listed out potential features that would be impactful towards the common goals between business and user goals.

product roadmap for spotify feature

information architecture

The functional pathways of the features.

A demonstration of user flow highlights the functionality of how users can complete various tasks through multiple pathways and provide clarity on the process.

brainstorming / 

Stepping up our features.

With my persona in mind, I brainstormed key features that would serve their needs.  

Based on my research, I believe that the following features would have an effect on retaining customers and creating an enjoyable online shopping experience:

  1. An appealing landing page, since it is the user's starting point where they should be quickly drawn to a product or various selling points.
    Shelly is visiting this brand for the first time and is immediately drawn to the newest collection and their ongoing sale promotion.
  2. A review and ratings section would be an effective addition because it would assure buyers who value shopping with confidence.
    Shelly is unsure if this shirt would fit her boyfriend, so she looks at the reviews and photos from other users that are similar to her boyfriend in order to make a decision.
  3. A 'Complete the Look' feature that would suggest new items as it would promote other products and also inspire users on styling choices.
    Shelly likes the top she's buying and notices other items suggested to go along with the top. She completes her look with the recommended items.

wireframes

Visualizing the features.

Based on the task flows, I did a digital sketch of how I'd visualize the features by following Spotify's structure and then designed wireframes to show how the features could integrate seamlessly into Spotify's current app.

mid fidelity wireframes with detailsmid fidelity wireframes with details

design system

Respecting the visual constraints.

A major constraint for this project is to work within the brand's existing design system, in which I must respect Spotify's branding and align the designs of the new feature with Spotify rather than myself. By working with their existing design system, I maintained consistency in my high-fidelity wireframes with their color palette, typography, and UI guidelines.

spotify design system and ui kit

high-fidelity mockups

Integrating the functionality.

I designed mobile screens that would incorporate the features into Spotify's mobile app by following the constraints of their existing design system.

For the in-app direct messaging, I didn't want it to stray away from Spotify's existing design of their 'Share' function, so I decided to keep it within the sharing abilities and added profiles of friends for easy selection. With the newly invented 'Spotify Circle' social feed, I was inspired by various social media platforms, including Instagram, BeReal, and Soundcloud, a notable music platform competitor for this project. I followed what Spotify has currently designed for their music feed and added social components, such as likes and comments.

the visual branding palette for revere's redesign

high fidelity mockups

Bringing the vision to life.

With my foundations set up through wireframes and visual branding, I can now begin piecing everything together by updating the brand's content and playing with the UI elements. With this, I produced high-fidelity frames for my initial prototype for responsive devices through Figma.

usability testing

Approving design decisions.

For usability testing, I recruited 6 Spotify users to evaluate my initial prototype and gauge the effectiveness of task completion and the overall user experience of the feature.

Feedback from usability testing plays a vital role in guiding the next iteration of design choices. It helps validate current design decisions and approve future modifications that lead to an improved user experience.

Usability Testing
Results & Iterations

5 out of 6 users were able to complete the tasks without any confusion.

100% of the users were satisfied with the redesign, notably enjoying the idea of the social features and its integration into Spotify's design system; however, some visual tweaks could be made to improve user experience.

The following components received feedback based on visual design choices:

  • The timeframe breakpoints on the Spotify Circle playlist
  • The "Add a comment..." text featured on each shared post
  • The taste match feature on a user's profile

Here's how I iterated on this feedback:

usability testing iterations
Iteration #1: Prioritizing our goals.

On the home feed, I rephrased 'Upcoming Events' to 'A little reminder ⌛️' to express how quickly events are approaching; added how many number of days are away, to prevent any date confusion; and pushed content higher up to highlight its value. 

Replaced Saved Gifts with quicker access to curated "Gifty Guides" so users can begin exploring potential gifts and provided context into what "Gifty Guides" meant. 

Iteration #2: Optimizing extra space

Reframed the original content to create space for saved items so users will always be reminded of gift options whenever they visit a Friend's Profile. 

Iteration #3: Vertical = Effective

Rephrased 'lists' as 'collections' to mitigate confusion and transitioned the save function to a vertical format. This change was aimed at optimizing user-friendliness, allowing for improved content viewing and the ability to save to multiple options. 

iterations made on the home screen
iterations made for the reviews

Final Solution

interacting on social feed gif

Introducing 'Spotify Circle'

Explore a new social presence called Spotify Circle where users can  share music, see what friends are listening to, and interact with friends to engage in a whole new music-bonding experience. 

Re-vamping the user profile.

Check out a friend's shared music activity on their user profile, along with discovering your music taste compatibility with them.

With this feature, you can effortlessly utilize Spotify's existing Blend  feature and create a mix that fits both of your tastes. 

user profile gifwalkthrough of finding spotify circle playlists on prototype

Finding music from friends.

Spotify Circle will also introduce two new playlists, allowing for users to discover music outside of their preferred genre as well as learn what friends are listening to through the convenience of a playlist. 

Share directly within Spotify.

Send song recommendations to friends directly within the Spotify app to make music sharing easier and faster than before. 

how to share or send music directly on spotify gif
onboarding prototype gif
Onboarding: New users can sign up and personalize their settings to create a Discover Feed with suggestions made just for them.
Topics and Filters: With accessible topic links on the landing page, users can easily navigate to areas under chosen topic. They can further refine their results by using the filters.
topics and filters gifexplore an area task gif
Explore an Area: Upon finding an area of choice, users can explore surrounding amenities such as parks and read reviews from locals.
Explore through navigation
Browse the home page for trends and featured collections or navigate the menu to shop different categories.
browsing home page gif
Filtered browsing
Browse through products with simplified categorization to narrow down your search.
browsing products gifadd to bag gif
Shop with Confidence
Read reviews from other buyers to make an assured shopping choice.
Simplified Styling
Complete the look by browsing through our style suggestions for an easy and quick shopping guide.
complete the look gif

Available on desktop and mobile!

image for revere's responsive models

Personalize your profile.

Sign up and complete your profile by adding your information and hobbies or interests to customize your own curated guide and begin discovering gifts,  even for yourself.  

Never miss an important date.

Event reminders are a top priority so you will never miss a chance to get a gift for an important date. Let it lead you to the friend's profile so you can begin shopping for them or pick up where you left off. 

Discover the right gifts.

Add a friend into  GIFTY  by inputting their information (as with your own profile) to begin exploring numerous gift options that were curated just for them. And saving it to buy  later is as easy as a single tap. 

Save for any event or anyone.

Like what you found while browsing? Save it to a collection you made or a friend you think it'd be perfect for. All within one action. 

Closing Thoughts

Reflections

Future in-house agency work

Working under the guise of a major real-world company like Spotify helped me gain valuable experience in working with constraints and prioritizing the project's goals to cater to their target users and align with their business objectives. Designing a feature that effectively caters to the users' genuine needs with a viable plan can boost the user experience and attract more users to Spotify, while staying true the brand's values. I will carry on this lesson with me in the future if I ever land a design position with an in-house agency.

Constraints

I appreciated the both the time and design constraints for this project. Working with Spotify's current design system was new and interesting as I had to envision designing as a member of their team, and I feel successful with the outcome of my work due to the positive feedback in regards to the feature's integration. Given sufficient time or in actuality, I would ensure to test the feature's responsive integration by covering both mobile and desktop designs.

arrow up image for back to top scrolling