Back to Top
1Introduction
2Solution
3Research
4Design
5Prototype
6Conclusion
1Introduction
Spotify Social Hub

7 mins read

Making it easier to connect and share on Spotify

Timeline

8 Weeks

March 2024 — May 2024

mY ROLE

User Experience Designer

Motion Designer

responsibilities

UX Research

Conceptual Designs

Brand Strategy

Prototyping

Tools

Figma

Adobe Creative Suite

Lottie

Notion

Overview

Spotify Social Hub is a design concept that rethinks how people can connect and share music within the app. My goal was to build a dedicated space where users can see what songs their friends are listening to, engage with their activity in real time, and express themselves better through profile personalization.

Spotify has largely incorporated similar features to what I designed in their app as of May 2025.

challenge

Spotify's social features fall short

As listening to music has become a social experience, I wanted to rethink how Spotify can support this experience beyond individual listening, since most of it's social features have remained stagnant and don't meet the evolving user expectations.

The challenges I faced for this redesign were

01

How might we help users stay connected with their social circle?

02

How might we make music sharing feel natural within the listening experience?

03

How might we help people express themselves through Spotify?

Solution

A fresh approach to make listening social

Social Hub is a two-sided social space within Spotify that connects listeners through real-time friend activity and rich profile personalization for self‑expression.

Below is a feature breakdown.

Friend
Activity

01
01

Friend activity feed

Users can see what their friends are or were listening to, and like or comment on the activity. This creates a more social listening experience.

01
01

Friend activity feed

Users can see what their friends are or were listening to, and like or comment on the activity. This creates a more social listening experience.

02
02

Personalized profiles

User can now choose a banner from their album art of choice and display their favorites (song, album, artist) on their profile, allowing them to better express their taste and personality.

02
02

Personalized profiles

User can now choose a banner from their album art of choice and display their favorites (song, album, artist) on their profile, allowing them to better express their taste and personality.

03
03

In-app music sharing

Users can send and receive songs, reply to activity, or start conversations directly within Spotify, making sharing music seamless and more meaningful.

03
03

In-app music sharing

Users can send and receive songs, reply to activity, or start conversations directly within Spotify, making sharing music seamless and more meaningful.

04
04

Manage your friend list easily

A management UI lets users approve or remove friend requests, giving them more control over their social network.

04
04

Manage your friend list easily

A management UI lets users approve or remove friend requests, giving them more control over their social network.

mOTION GRAPHICS

Motion branding

I also made motion graphic highlighting the features with a refreshed visuals.

Brand Values

Values that define Spotify

Values that define Spotify

I started my research by referring to Spotify’s brand values to understand their voice and culture. These values shaped my approach to user research and also aligned my design decision with Spotify's intent and brand.

Collaborative

Innovative

Passionate

Sincere

Playful

Collaborative

Innovative

Passionate

Sincere

Playful

User Research

Listening to users

Using the values as a base, I conducted interviews and surveys to learn how people actually use Spotify. Particularly, how they listen, share music, and connect (or don’t) with others on the platform. Here are some user quotes from my research.

Key Findings

Insights that emerged

From the 14 semi-structured interviews of casual and dedicated Spotify users, these were the key insights that emerged.

78%

of the users were interested in seeing songs their friends were listening to.

67%

of the users felt their profiles didn’t reflect their music identity.

100%

of the users were agreed that the app could be more vibrant.

Low-fidelity Wireframes

Testing early concepts

I started the design work by wireframing different layout options to see how the new features would fit into the app's existing structure. Early testing showed that users wanted a more detailed layout for friend activity, so I made changes accordingly.

Logo

A new look

While rethinking the brand, I also made a new logo to feel more fluid and expressive while keeping it's core identity intact.

Color Palette

The role of color

This is the palette I developed for my UI Design and branding. It is divided into core, accents, and greys,

White
#FFFFFF
Black
#000000
Green
#1ED760
Ice
#68C7EA
Teal
#608986
Mint
#69be8f
Fern
#20a066
Lime
#C3DC3C
Gold
#9B6400
Tangerine
#EA5C32
Sunset
#F3963D
Rose
#BE3A76
Cranberry
#8A122C
Lavender
#CAB3F1
Plum
#682660
Gray 1000
#0B0B0B
Gray 900
#1A1A1A
Gray 800
#2C2C2C
Gray 700
#3F3F3F
Gray 600
#5E5E5E
Gray 500
#7A7A7A
Gray 400
#A0A0A0
Gray 300
#C5C5C5
Gray 200
#E0E0E0
Gray 100
#F5F5F5
White
#FFFFFF
Black
#000000
Green
#1ED760

Core colors kept my design grounded in Spotify’s brand and identity.

Ice
#68C7EA
Teal
#608986
Mint
#69be8f
Fern
#20a066
Lime
#C3DC3C
Gold
#9B6400
Tangerine
#EA5C32
Sunset
#F3963D
Rose
#BE3A76
Cranberry
#8A122C
Lavender
#CAB3F1
Plum
#682660

Accent colors highlighted actions like likes, messages, and categories, making interactions more expressive.

Gray 1000
#0B0B0B
Gray 900
#1A1A1A
Gray 800
#2C2C2C
Gray 700
#3F3F3F
Gray 600
#5E5E5E
Gray 500
#7A7A7A
Gray 400
#A0A0A0
Gray 300
#C5C5C5
Gray 200
#E0E0E0
Gray 100
#F5F5F5

Greys handled the structure and hierarchy, helping the colorful stuff pop out without overwhelming the design.

Style Frames

Defining the visual direction

Based on the color palette, I designed these two style frames which became a foundation for my UI and brand design.

Style Frame for Spotify, focussing on artists.
Style Frame for Spotify, focussing on genre.
Design System

Designing for consistency

I built a set of reusable components to keep everything consistent. This streamlined my design process and kept everything visually cohesive.

Avishkar's

Playlist

Home

Search

Social

Your Library

I GOT YOU

TWICE

Social Hub
Design Kit

Currently playing

Bed Chem

Bed Chem

David Hernandez

No need to be fed

If you're in the mood

We can take it to the moon

Just like a movie scene

Table for two

Tip Toe

HYBS

Making Steak

2:43

4:46

Send a song or message...

1h ago

Spotify

New Message

Someone sent you a message.

Avishkar's

Playlist

Home

Search

Social

Your Library

I GOT YOU

TWICE

Social Hub
Design Kit

Currently playing

Bed Chem

Bed Chem

David Hernandez

No need to be fed

If you're in the mood

We can take it to the moon

Just like a movie scene

Table for two

Tip Toe

HYBS

Making Steak

2:43

4:46

Send a song or message...

1h ago

Spotify

New Message

Someone sent you a message.

Prototype
Prototype
Prototype

Test it yourself

Here's the complete prototype with all the features. Ready to try it?

to navigate the prototype.

R

to restart the prototype.

Usability Testing

Validating with Users

I tested this prototype with 8 users to validate the features, design direction, and identify pain points. Participants were asked to complete the following tasks.

Find and view what a friend is currently listening to.

Like and reply to a friend's listening activity.

Customize your profile by adding a banner and selecting favorite tracks

Send a song recommendation to a friend via in-app messaging

Approve or decline incoming friend requests

Key Findings

What I learned

Testing showed that features worked really well, with almost all the participants saying they would use Social Hub daily.

94%

completed all user testing tasks without help.

3x

faster song sharing in-app compared to external apps.

4.7/5

satisfaction score for profile personalization features.

Reflection

Looking Back

This project started as a motion design piece, but as I explored ideas, it also made sense to work on parts of the app itself. That’s where the idea of the Social Hub came in. It also gave me practice designing around real user needs and not just visuals. Overall, it taught me how to build more connected, intentional experience.

Conclusion

What's next?

While I’m happy with where this project landed, there’s still a lot more I’d like to explore like

What does deeper personalization look like beyond just banners and favorites?

How might these features impact user retention or encourage more interaction over time?

This project made me realize that ideas can come from anywhere. Sometimes from a small detail, a design gap, or just noticing something that could be made better.

This project made me realize that ideas can come from anywhere. Sometimes from a small detail, a design gap, or just noticing something that could be better. Moving forward, I want to stay open to those moments and keep building on them as part of my design process.

Pssst, you've reached the end… but how about one more read?

Pssst, you've reached the end… but how about one more read?

Simplified clean energy adoption by connecting users to community solar projects with an intuitive mobile platform.

Empowered 40+ students in Motion Design through hands-on learning, curated resources, and continuous feedback.

Optimized food distribution and reducing waste by connecting food banks and pantries through a centralized coordination platform.

Back to Top
1Introduction
2Solution
3Research
4Design
5Prototype
6Conclusion
1Introduction

Change Theme

Spotify Social Hub

7 mins read

Making it easier to connect and share on Spotify

Timeline

8 Weeks

March 2024 — May 2024

mY ROLE

User Experience Designer

Motion Designer

responsibilities

UX Research

Conceptual Designs

Brand Strategy

Prototyping

Tools

Figma

Adobe Creative Suite

Lottie

Notion

Overview

Spotify Social Hub is a design concept that rethinks how people can connect and share music within the app. My goal was to build a dedicated space where users can see what songs their friends are listening to, engage with their activity in real time, and express themselves better through profile personalization.

Spotify has largely incorporated similar features to what I designed in their app as of May 2025.

challenge

Spotify's social features fall short

As listening to music has become a social experience, I wanted to rethink how Spotify can support this experience beyond individual listening, since most of it's social features have remained stagnant and don't meet the evolving user expectations.

The challenges I faced for this redesign were

01

How might we help users stay connected with their social circle?

02

How might we make music sharing feel natural within the listening experience?

03

How might we help people express themselves through Spotify?

Solution

A fresh approach to make listening social

Social Hub is a two-sided social space within Spotify that connects listeners through real-time friend activity and rich profile personalization for self‑expression.

Below is a feature breakdown.

Friend
Activity

01
01

Friend activity feed

Users can see what their friends are or were listening to, and like or comment on the activity. This creates a more social listening experience.

02
02

Personalized profiles

User can now choose a banner from their album art of choice and display their favorites (song, album, artist) on their profile, allowing them to better express their taste and personality.

03
03

In-app music sharing

Users can send and receive songs, reply to activity, or start conversations directly within Spotify, making sharing music seamless and more meaningful.

04
04

Manage your friend list easily

A management UI lets users approve or remove friend requests, giving them more control over their social network.

mOTION GRAPHICS

Motion branding

I also made motion graphic highlighting the features with a refreshed visuals.

Brand Values

Values that define Spotify

I started my research by referring to Spotify’s brand values to understand their voice and culture. These values shaped my approach to user research and also aligned my design decision with Spotify's intent and brand.

Collaborative

Innovative

Passionate

Sincere

Playful

User Research

Listening to users

Using the values as a base, I conducted interviews and surveys to learn how people actually use Spotify. Particularly, how they listen, share music, and connect (or don’t) with others on the platform. Here are some user quotes from my research.

Key Findings

Insights that emerged

From the 14 semi-structured interviews of casual and dedicated Spotify users, these were the key insights that emerged.

78%

of the users were interested in seeing songs their friends were listening to.

67%

of the users felt their profiles didn’t reflect their music identity.

100%

of the users were agreed that the app could be more vibrant.

Low-fidelity Wireframes

Testing early concepts

I started the design work by wireframing different layout options to see how the new features would fit into the app's existing structure. Early testing showed that users wanted a more detailed layout for friend activity, so I made changes accordingly.

Logo

A new look

While rethinking the brand, I also made a new logo to feel more fluid and expressive while keeping it's core identity intact.

Color Palette

The role of color

This is the palette I developed for my UI Design and branding. It is divided into core, accents, and greys,

White
#FFFFFF
Black
#000000
Green
#1ED760
Ice
#68C7EA
Teal
#608986
Mint
#69be8f
Fern
#20a066
Lime
#C3DC3C
Gold
#9B6400
Tangerine
#EA5C32
Sunset
#F3963D
Rose
#BE3A76
Cranberry
#8A122C
Lavender
#CAB3F1
Plum
#682660
Gray 1000
#0B0B0B
Gray 900
#1A1A1A
Gray 800
#2C2C2C
Gray 700
#3F3F3F
Gray 600
#5E5E5E
Gray 500
#7A7A7A
Gray 400
#A0A0A0
Gray 300
#C5C5C5
Gray 200
#E0E0E0
Gray 100
#F5F5F5
White
#FFFFFF
Black
#000000
Green
#1ED760

Core colors kept my design grounded in Spotify’s brand and identity.

Ice
#68C7EA
Teal
#608986
Mint
#69be8f
Fern
#20a066
Lime
#C3DC3C
Gold
#9B6400
Tangerine
#EA5C32
Sunset
#F3963D
Rose
#BE3A76
Cranberry
#8A122C
Lavender
#CAB3F1
Plum
#682660

Accent colors highlighted actions like likes, messages, and categories, making interactions more expressive.

Gray 1000
#0B0B0B
Gray 900
#1A1A1A
Gray 800
#2C2C2C
Gray 700
#3F3F3F
Gray 600
#5E5E5E
Gray 500
#7A7A7A
Gray 400
#A0A0A0
Gray 300
#C5C5C5
Gray 200
#E0E0E0
Gray 100
#F5F5F5

Greys handled the structure and hierarchy, helping the colorful stuff pop out without overwhelming the design.

Style Frames

Defining the visual direction

Based on the color palette, I designed these two style frames which became a foundation for my UI and brand design.

Style Frame for Spotify, focussing on artists.
Style Frame for Spotify, focussing on genre.
Design System

Designing for consistency

I built a set of reusable components to keep everything consistent. This streamlined my design process and kept everything visually cohesive.

Avishkar's

Playlist

Home

Search

Social

Your Library

I GOT YOU

TWICE

Social Hub
Design Kit

Currently playing

Bed Chem

Bed Chem

David Hernandez

No need to be fed

If you're in the mood

We can take it to the moon

Just like a movie scene

Table for two

Tip Toe

HYBS

Making Steak

2:43

4:46

Send a song or message...

1h ago

Spotify

New Message

Someone sent you a message.

Prototype
Prototype

Test it on Desktop

The prototype is currently only available on desktop and tablets to prevent this page from crashing. Please switch to a larger screen.

to navigate the prototype.

R

to restart the prototype.

Usability Testing

Validating with Users

I tested this prototype with 8 users to validate the features, design direction, and identify pain points. Participants were asked to complete the following tasks.

Find and view what a friend is currently listening to.

Like and reply to a friend's listening activity.

Customize your profile by adding a banner and selecting favorite tracks

Send a song recommendation to a friend via in-app messaging

Approve or decline incoming friend requests

Key Findings

What I learned

Testing showed that features worked really well, with almost all the participants saying they would use Social Hub daily.

94%

completed all user testing tasks without help.

3x

faster song sharing in-app compared to external apps.

4.7/5

satisfaction score for profile personalization features.

Reflection

Looking Back

This project started as a motion design piece, but as I explored ideas, it also made sense to work on parts of the app itself. That’s where the idea of the Social Hub came in. It also gave me practice designing around real user needs and not just visuals. Overall, it taught me how to build more connected, intentional experience.

Conclusion

What's next?

While I’m happy with where this project landed, there’s still a lot more I’d like to explore like

What does deeper personalization look like beyond just banners and favorites?

How might these features impact user retention or encourage more interaction over time?

This project made me realize that ideas can come from anywhere. Sometimes from a small detail, a design gap, or just noticing something that could be made better.

Pssst, you've reached the end… but how about one more read?

Simplified clean energy adoption by connecting users to community solar projects with an intuitive mobile platform.

Empowered 40+ students in Motion Design through hands-on learning, curated resources, and continuous feedback.

Optimized food distribution and reducing waste by connecting food banks and pantries through a centralized coordination platform.