︎

Helen Miao





A Social Spotify



Overview
To make Spotify a more connected and interactive app for friends, I redesigned Spotify to include a social feature. Users are able to post and share music, interact with friends’ posts, view live listening, and more easily access profiles.
Type
UI/UX, Mobile Application Design

Tools
Figma

Background

In Spring 2023, my Interaction Design 1 classmates and I were tasked with identifying an area of Spotify that could be improved on or an additional feature that would be useful or entertaining for users. 

To gain more insight, we conducted user interviews with current Spotify users on their usage, likes, dislikes, etc.

With this information, we brainstormed “How Might We...” questions. Here are the topics I wanted to focus on:





Persona

I created a persona, Claire, that would serve as an example for a user that would benefit from these features regarding social aspects, discovery within certain regions, and importing music between different platforms.



I created three different refine statements for Claire:
      1. As someone who has a long commute and is constantly listening to music, Claire wants to more easily explore what her friends are listening to so she can connect with them more as well as try out new genres.
      2. As someone has just moved to a very large city, Claire wants to learn more about what people in NYC are listening to and what kinds of music events (concerts, house shows, etc.) are happening, so she can meet people with similar music tastes.
      3. As someone with another account on Apple Music, Claire wants to be able to import old playlists into Spotify.



Sketching

To begin translating my ideas into an interface design, I sketched a workflow for each of my refine statements.




Testing Workflows

To assess my preliminary ideas, I tested my workflows with users:




Lo-fi Wireframes


I decided to stick with designing a social feature for Spotify. Here are the low-fidelity wireframes:



Hi-fi Wireframes V1


First iteration of hi-fidelity wireframes:



Design Improvements


To align my designs more with the current Spotify design, I ensured consistency with color usage, typography, and how certain elements and icons are designed and used, like for chips and search bars.

I made sure to have the current Spotify app screenshots next to me while I designed:


In addition, I kept frames with all icons I created and used, as well as components:

          

Hi-fi Wireframes V2


Second iteration of hi-fidelity wireframes:




Hi-fi Prototype

︎ Click here to interact with the prototype yourself!


@ 2024 by Helen Miao   ☀ Boston, MA & San Jose, CA

︎       ︎       ︎