Spotify
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.
mOTION GRAPHICS
Motion branding
I also made motion graphic highlighting the features with a refreshed visuals.
Brand Values
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.
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,
Core colors kept my design grounded in Spotify’s brand and identity.
Accent colors highlighted actions like likes, messages, and categories, making interactions more expressive.
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.
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.
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. Spotify also adopted similar features in there May 2025 update.
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?
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 1997 797" xmlns="http://www.w3.org/2000/svg"><path d="M 1996.924 763.841 C 1811.555 630.321 1679.488 519.513 1442.195 586.273 C 1412.524 311.892 1138.143 319.309 952.775 489.842 C 1049.206 81.94 478.113 -133.099 188.972 89.358 C -167.005 356.322 57.364 643.168 233.479 682.628 C 144.848 682.628 72.123 724.993 73.805 763.841 L 1997 763.841 Z" fill="rgb(255, 255, 255)" height="763.8411971121667px" id="JYjNQhcOT" transform="translate(0 33.06)" width="1997px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 1997 830" xmlns="http://www.w3.org/2000/svg"><path d="M 1996.283 769.187 C 1996.731 763.54 1997 757.894 1997 752.158 C 1997 634.387 1901.546 538.933 1783.775 538.933 C 1779.921 538.933 1775.978 539.022 1772.124 539.291 C 1724.441 427.436 1613.482 348.922 1484.239 348.922 C 1477.965 348.922 1471.691 349.19 1465.506 349.549 C 1407.696 147.796 1221.987 0 1001.592 0 C 781.197 0 581.865 158.731 531.852 371.956 C 416.232 408.166 330.458 511.596 320.151 636.538 C 295.503 629.367 269.511 625.424 242.533 625.424 C 137.937 625.424 46.965 683.503 0 769.187 Z" fill="rgb(255, 255, 255)" height="769.1869305686456px" id="os90eoq0A" transform="translate(0 30.405)" width="1997px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 1997 830" xmlns="http://www.w3.org/2000/svg"><path d="M 1996.894 829.987 C 1962.959 745.413 1880.182 685.577 1783.451 685.577 C 1749.939 685.577 1718.012 692.871 1689.257 705.769 C 1707.546 663.482 1717.801 616.755 1717.801 567.702 C 1717.801 375.614 1562.079 219.892 1369.991 219.892 C 1332.778 219.892 1296.94 225.812 1263.322 236.595 C 1160.247 93.348 992.263 0 802.394 0 C 488.837 0 234.692 254.144 234.692 567.702 C 234.692 571.613 234.904 575.525 235.01 579.437 L 234.692 579.437 C 105.083 579.437 0 684.52 0 814.129 C 0 819.415 0.211 824.701 0.634 829.987 L 1997 829.987 Z" fill="rgb(255, 255, 255)" height="829.9866066701954px" id="vMMTACG0H" transform="translate(0 0.005)" width="1997px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 1997 334" xmlns="http://www.w3.org/2000/svg"><path d="M 0.19 254.233 C 496.965 -43.532 719.134 -33.789 1198.053 53.132 C 1302.389 68.037 1517.115 92.266 1625.593 95.237 C 1816.011 100.459 1952.819 189.64 1997.535 244.289 L 1997.535 333.721 L 0 333.721 L 0.19 254.223 Z M 0.19 254.233" fill="rgb(130, 188, 87)" height="333.7209937404235px" id="HH4OPyo75" transform="translate(-0.381 -0.153)" width="1997.5345977410975px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 173 334" xmlns="http://www.w3.org/2000/svg"><g d="M 81.398 0.008 C 31.557 1.006 -4.006 122.585 0.363 185.87 C 0.363 231.118 38.859 267.781 86.338 267.781 C 133.816 267.781 172.312 231.108 172.312 185.87 C 171.946 121.984 140.721 -1.173 81.398 0.008 Z M 81.398 0.008 M 73.082 333.98 L 94.326 333.98 L 89.386 233.706 L 129.4 187.277 L 88.898 218.4 L 85.934 101.332 L 80.007 183.081 L 48.884 143.332 L 79.019 200.628 L 73.092 334 Z M 73.082 333.98" fill="transparent" height="334.00000176268003px" id="hdkqpVPw3" transform="translate(0.34 0)" width="172.3123335011137px"><path d="M 81.398 0.008 C 31.557 1.006 -4.006 122.585 0.363 185.87 C 0.363 231.118 38.859 267.781 86.338 267.781 C 133.816 267.781 172.312 231.108 172.312 185.87 C 171.946 121.984 140.721 -1.173 81.398 0.008 Z M 81.398 0.008" fill="rgb(115, 158, 79)" height="267.78078834397155px" id="Y0lS9neuo" transform="translate(0 0)" width="172.3123335011137px"/><path d="M 24.198 232.647 L 45.442 232.647 L 40.502 132.374 L 80.516 85.944 L 40.014 117.067 L 37.05 0 L 31.123 81.748 L 0 42 L 30.135 99.296 L 24.208 232.668 Z M 24.198 232.647" fill="rgb(102, 63, 14)" height="232.66752037840268px" id="aDO4m7_GK" transform="translate(48.884 101.332)" width="80.5160385209149px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 235 334" xmlns="http://www.w3.org/2000/svg"><g d="M 116.018 0.011 C 70.504 0.014 33.609 36.909 33.606 82.423 C 33.66 93.232 35.844 103.925 40.032 113.89 C 14.67 129.806 0.099 152.732 0 176.848 C 0 223.306 52.729 260.957 117.759 260.957 C 182.789 260.957 235.518 223.306 235.529 176.848 C 235.529 151.751 219.834 127.955 192.72 111.973 C 196.415 102.555 198.35 92.539 198.429 82.423 C 198.429 60.566 189.744 39.602 174.291 24.138 C 158.831 8.683 137.867 0.001 116.007 0 Z M 116.018 0.011 M 101.601 333.989 L 106.792 214.069 L 52.355 155.851 L 109.052 197.437 L 111.322 81.012 L 120.393 151.321 L 158.948 111.245 L 122.664 171.734 L 127.899 334 L 101.59 334 Z M 101.601 333.989" fill="transparent" height="333.999998842439px" id="ujLo4K6zc" transform="translate(-0.265 0)" width="235.52935352935194px"><path d="M 116.018 0.011 C 70.504 0.014 33.609 36.909 33.606 82.423 C 33.66 93.232 35.844 103.925 40.032 113.89 C 14.67 129.806 0.099 152.732 0 176.848 C 0 223.306 52.729 260.957 117.759 260.957 C 182.789 260.957 235.518 223.306 235.529 176.848 C 235.529 151.751 219.834 127.955 192.72 111.973 C 196.415 102.555 198.35 92.539 198.429 82.423 C 198.429 60.566 189.744 39.602 174.291 24.138 C 158.831 8.683 137.867 0.001 116.007 0 Z M 116.018 0.011" fill="rgb(186, 208, 84)" height="260.95713295713307px" id="S6oODI0kj" width="235.52935352935194px"/><path d="M 49.246 252.977 L 54.438 133.058 L 0 74.839 L 56.697 116.426 L 58.968 0 L 68.039 70.309 L 106.594 30.233 L 70.309 90.722 L 75.545 252.988 L 49.235 252.988 Z M 49.246 252.977" fill="rgb(102, 63, 14)" height="252.98821905728275px" id="Tw8Sjj_0G" transform="translate(52.355 81.012)" width="106.59386859386758px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 2415 248" xmlns="http://www.w3.org/2000/svg"><path d="M 0 247.232 L 0 63.398 C 0 63.398 377.613 -85.655 700.567 73.331 C 1023.521 232.327 1187.379 60.236 1430.945 93.208 C 1624.033 119.347 1883.084 202.517 2101.701 123.019 C 2320.308 43.521 2414.722 48.492 2414.722 48.492 L 2414.722 247.513 C 1609.818 246.822 804.914 247.232 0.01 247.232 L 0.01 247.232 Z M 0 247.232" fill="rgb(77, 145, 80)" height="247.5125217765447px" id="wI9kPIaWA" transform="translate(-0.116 0.19)" width="2414.721753704364px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 1997 1354" xmlns="http://www.w3.org/2000/svg"><g d="M 1193.558 1068.594 L 1080.839 1068.594 C 1078.339 1068.589 1075.939 1069.58 1074.171 1071.348 C 1072.402 1073.117 1071.411 1075.516 1071.416 1078.017 L 1071.416 1336.604 C 1071.416 1341.841 1075.621 1346.027 1080.839 1346.027 L 1193.558 1346.027 C 1196.059 1346.032 1198.459 1345.041 1200.227 1343.273 C 1201.995 1341.505 1202.986 1339.105 1202.981 1336.604 L 1202.981 1078.017 C 1202.986 1075.516 1201.995 1073.117 1200.227 1071.348 C 1198.459 1069.58 1196.059 1068.589 1193.558 1068.594 Z M 1226.511 1066.793 L 1102.192 1066.793 C 1099.596 1066.788 1097.106 1067.817 1095.271 1069.652 C 1093.436 1071.487 1092.407 1073.978 1092.412 1076.573 L 1092.412 1344.752 C 1092.407 1347.348 1093.436 1349.838 1095.271 1351.673 C 1097.106 1353.508 1099.596 1354.537 1102.192 1354.532 L 1226.511 1354.532 C 1231.936 1354.532 1236.291 1350.177 1236.291 1344.752 L 1236.291 1076.573 C 1236.291 1071.148 1231.936 1066.793 1226.511 1066.793 Z M 1428.943 1354.429 L 829.89 1354.429 C 834.132 1242.085 1425.921 1239.101 1428.943 1354.429 Z M 1488.718 0 C 1517.813 0 1548.991 27.593 1562.919 60.123 L 1979.369 1033.13 C 1994.424 1063.933 1996.751 1085.406 1994.424 1126.928 C 1993.166 1149.246 1975.165 1151.968 1956 1151.968 L 438.507 1151.968 C 390.716 1151.968 332.527 1148.889 315.332 1091.845 C 177.667 746.311 96.07 325.468 39.42 0 L 1488.737 0 Z M 1500.488 0 C 1528.963 0 1559.823 26.411 1573.094 57.852 L 1992.116 1050.493 C 2005.387 1081.934 1990.389 1108.344 1961.932 1108.344 L 472.727 1108.344 C 405.415 1108.344 374.799 1103.821 352.162 1050.493 L 4.056 57.852 C -7.244 25.641 5.783 0 34.239 0 Z M 1472.423 30.626 C 1498.627 30.626 1527.027 54.86 1539.247 83.71 L 1644.645 332.668 L 1211.94 332.668 L 1095.279 30.645 L 1472.423 30.645 Z M 1066.86 30.626 L 1183.521 332.65 L 700.078 332.65 L 583.417 30.626 L 1066.879 30.626 Z M 557.067 30.627 L 673.728 332.65 L 224.053 332.65 L 136.487 83.692 C 126.107 54.147 138.083 30.608 164.268 30.608 L 557.048 30.608 Z M 1658.794 366.401 L 1790.378 677.228 L 1344.382 677.228 L 1224.305 366.401 Z M 1196.428 366.401 L 1316.505 677.228 L 833.062 677.228 L 712.984 366.401 Z M 686.636 366.401 L 806.713 677.228 L 344.631 677.228 L 235.309 366.401 Z M 1805.306 710.638 L 1913.276 965.64 C 1925.496 994.51 1911.718 1018.724 1885.477 1018.724 L 1476.516 1018.724 L 1357.508 710.638 L 1805.287 710.638 Z M 1329.438 710.638 L 1448.446 1018.724 L 965.002 1018.724 L 845.995 710.638 Z M 819.645 710.638 L 938.652 1018.724 L 512.422 1018.724 C 486.218 1018.724 456.016 995.204 445.617 965.64 L 355.93 710.638 L 819.664 710.638 Z" fill="transparent" height="1354.5319377636981px" id="l3Xi7HJaK" transform="translate(0 -0.255)" width="1997px"><path d="M 122.142 0 L 9.423 0 C 6.922 -0.005 4.523 0.986 2.754 2.754 C 0.986 4.523 -0.005 6.922 0 9.423 L 0 268.01 C 0 273.247 4.205 277.433 9.423 277.433 L 122.142 277.433 C 124.643 277.438 127.042 276.447 128.811 274.679 C 130.579 272.911 131.57 270.511 131.565 268.01 L 131.565 9.423 C 131.57 6.922 130.579 4.523 128.811 2.754 C 127.042 0.986 124.643 -0.005 122.142 0 Z" fill="rgb(76, 102, 130)" height="277.43340011790934px" id="k30RCP3Qt" transform="translate(1071.416 1068.594)" width="131.56501986366035px"/><path d="M 134.099 0 L 9.78 0 C 7.184 -0.005 4.694 1.024 2.859 2.859 C 1.024 4.694 -0.005 7.184 0 9.78 L 0 277.959 C -0.005 280.554 1.024 283.045 2.859 284.88 C 4.694 286.715 7.184 287.744 9.78 287.739 L 134.099 287.739 C 139.524 287.739 143.879 283.384 143.879 277.959 L 143.879 9.78 C 143.879 4.355 139.524 0 134.099 0 Z" fill="rgb(153, 181, 191)" height="287.73860280276074px" id="C4RMNYObO" transform="translate(1092.412 1066.793)" width="143.87868683313997px"/><path d="M 599.053 85.381 L 0 85.381 C 4.242 -26.963 596.031 -29.948 599.053 85.381 Z" fill="rgb(76, 102, 130)" height="85.38059391581858px" id="rxPpzoypb" transform="translate(829.89 1269.048)" width="599.0533377215233px"/><path d="M 1449.298 0 C 1478.393 0 1509.572 27.593 1523.5 60.123 L 1939.95 1033.13 C 1955.004 1063.933 1957.332 1085.406 1955.004 1126.928 C 1953.747 1149.246 1935.745 1151.968 1916.58 1151.968 L 399.087 1151.968 C 351.297 1151.968 293.107 1148.889 275.913 1091.845 C 138.247 746.311 56.65 325.468 0 0 L 1449.317 0 Z" fill="rgb(153, 181, 191)" height="1151.9678929613933px" id="R1OxIRq1i" transform="translate(39.42 0)" width="1955.7799867418053px"/><path d="M 1500.488 0 C 1528.963 0 1559.823 26.411 1573.094 57.852 L 1992.116 1050.493 C 2005.387 1081.934 1990.389 1108.344 1961.932 1108.344 L 472.727 1108.344 C 405.415 1108.344 374.799 1103.821 352.162 1050.493 L 4.056 57.852 C -7.244 25.641 5.783 0 34.239 0 Z" fill="rgb(229, 243, 249)" height="1108.3444061886676px" id="GItVzmiyZ" transform="translate(0 0)" width="1997px"/><path d="M 1339.66 0.018 C 1365.864 0.018 1394.264 24.251 1406.484 53.102 L 1511.882 302.06 L 1079.176 302.06 L 962.515 0.037 L 1339.66 0.037 Z M 934.097 0.018 L 1050.758 302.041 L 567.314 302.041 L 450.654 0.018 L 934.116 0.018 Z M 424.304 0.019 L 540.965 302.042 L 91.29 302.042 L 3.724 53.084 C -6.656 23.539 5.319 0 31.505 0 L 424.285 0 Z M 1526.031 335.793 L 1657.615 646.619 L 1211.619 646.619 L 1091.542 335.793 Z M 1063.665 335.793 L 1183.742 646.619 L 700.298 646.619 L 580.221 335.793 Z M 553.873 335.793 L 673.95 646.619 L 211.868 646.619 L 102.546 335.793 Z M 1672.543 680.029 L 1780.513 935.032 C 1792.733 963.901 1778.955 988.116 1752.713 988.116 L 1343.753 988.116 L 1224.745 680.029 L 1672.524 680.029 Z M 1196.675 680.029 L 1315.683 988.116 L 832.239 988.116 L 713.232 680.029 Z M 686.882 680.029 L 805.889 988.116 L 379.659 988.116 C 353.455 988.116 323.253 964.596 312.854 935.032 L 223.167 680.029 L 686.901 680.029 Z" fill="rgb(76, 102, 130)" height="988.1156625969834px" id="je1AUvhy7" transform="translate(132.763 30.608)" width="1785.014895096931px"/></g></svg>)
