SPOTIFY
CASE STUDY
Overview
is a worldwide streaming music service that gives over 422 million monthly active users access to millions of digital content, including music, podcast, and videos.
The GOAL of this case study was to comprehend the UX research design process, enhance user flows through UX analysis, and incorporate trendy yet intuitive design elements.
-
UX research
-
Interface Design
-
Prototyping
Role
Timeline
5 weeks
Platform
iOS Mobile App
Problem
From my 4 years of personal experience, I noticed the complexity and inefficiency of user flow within the app. Its user interface is not always intuitive when it comes to organizing music and playlists. Also, visual elements are outdated and the app does not support any customization. With the growing streaming service market, there are needs that must be met to compete against other streaming services and survive in the market.
Redesign and improve functionalities that encourage more intuitive usability and incorporate trendy design elements.
Solution
My
User Experience Design Process
-
Usability Testing
-
Primary/Secondary Research
-
User interviews
-
Experience Map
-
User Personas
-
Competitive Analysis
-
Problem Statement
-
Affinity Mapping
-
Sketches
-
User flows
-
Wireframes
-
Hi-fi Prototype
-
Paper prototypes
01 Empathize
Experience Map
An experience map visually illustrates a user's actions, goals, pain points, and observations. I chose this method of mapping to better understand users' behaviors and interactions with the app and essentially find pain points.
Duration
10 min
Participants
10
During the experiment, I recorded their actions or any noticeable behaviors while they were navigating the app. I differentiated the experiences into five different elements and categorized them into three goals: playlist, artist page, and visual.
User Interviews
User interviews allow researchers to dive deeper into users' preferences, thoughts, and feelings. It gives an opportunity to fully comprehend issues or needs prior to designing solutions.
5 users
3 Qs
Lack of sorting/searching methods for songs and playlists
Unnecessary/confusing navigation
Adding songs takes too much time
What would be a reason not to use Spotify?
I wish there is an option
to have an option to switch between
a dark and light mode
looks old
Very simple, plain
What do you think of the design or user interface of Spotify?
What would your dream function for Spotify be?
Spotify Assistant like Google Assistant
Customization
Better sorting method
Having a "play next" button as Apply Music does
Key Insights
User research helped me gain a thorough understanding of what users think and feel about the app. I was able to exactly pinpoint which area users were struggling with and why they were experiencing inconvenience. conducting different types of research allowed me to connect responses and draw more detailed answers. From the research,
I figured out that users were mostly struggling with
unintuitive user flows
inefficient
functions
boring
design
02 Define
Competitive Analysis
A competitive analysis helps researchers discover competitors' strengths and weaknesses relative to one another. Through this method, researchers are able to identify usability issues and develop a market strategy.
Apple Music
.png)
Spotify
Why
Apple Music?
-
Better queue options
-
Music videos connected to the app
-
More sorting features
-
new "release date"
-
-
lossless streaming
-
spatial audio with Dolby atmos
-
Visualizer
-
GIF artwork
-
Simple home layout
-
Counts for streaming, follower, playlist
-
Compatibility across different platforms
-
Clustering technology to build mixes
-
Limited number of songs in new suggested playlists
-
Require iOS update
-
No real-time song suggestion
-
Limited song recommendation engines
-
No free version
-
Only dark mode available
-
Limited queue songs options
-
Low audio quality
-
No customization for a song cover
-
Unable to import songs from local files
-
No visual effects
-
Difficult to find all the released songs at once
2nd most used
music streaming service
high-profile exclusives
seamless integration
with iOS system
Key Insights
Key Insights
After thoroughly comparing the two apps, I realized that both apps lack visual elements and customizable options. It was clear that Apple Music offers better sound quality and works better in the Apple ecosystem. Meanwhile, Spotify provides a more powerful recommendation engine for creating mixes. However, I believe Spotify needs to improve on sorting features and organizing songs and have additional features to make it more personalized to attract users.
Pain Points
Songs from one artist cannot be added consecutively.
Unable to navigate songs that have been released on a single page.
An artist & a current song panel lack visual elements.
Goals
Making playlist creation more efficient and automatic.
Displaying all the released songs on a single page.
Making an artist and a current song panel more customizable and visually appealing.
Liked songs are only sorted by recently added order.
Sorting liked songs by year.
No option to reorder queue songs.
Adding an option to queue songs through play last or next.
User Personas
Creating user personas help designers be empathetic and understanding of the end users' perspective, needs, and expectation.
Adrian, the music lover college kid
targeting goal 1
Jessica, the artsy architect
targeting goal 3
Tony, the quiet gym guy
targeting goal 2 & 5
Joanna, the vintage coffee lover
targeting goal 4
Key Insights
Key Insights
"Who am I redesigning Spotify for?"
Based on
Behavior
Creating four different user personas helped me comprehend users with different needs & expectations and shape redesign strategy.
Design Strategy
Different Age group
Diverse
customer journey
Target Audience
-
All genders
-
Age 15 - 45
-
Any profession
Marketing Goals
-
Personalized experience
-
Easier navigation
-
Customization exclusivity
Channels
-
iOS system
-
Android & Web will be considered in the future
Tasks/Design
-
Address all 5 pain points
-
seamless transition to having additional features
03 Ideate
Task flow & Sketches
Making playlist creation more efficient and automatic
For goal 1, I designed three possible solutions for the different tasks within viewing songs when searched and one for the task of swiping the panels. In the sketch, a diagram with multiple flows indicates that a decision will be made after analyzing the usability of all possible solutions drawn as a sketch. The reason behind this is that I wanted to explore possible solutions and choose a solution that fits the user's needs the best. My goal was to implement a feature that would be easily noticed by users and blend in well with other existing features.
Final decision-making process
In the diagram on the left, yellow signifies the explanations of why those solutions are beneficial and need to be implemented. Red indicates why it should not be implemented.
After analyzing and considering the options, I decided to proceed with the second solution (placing a block under the popular song section). I assumed that it will be easier to discover and add more visually inclusive elements along with existing albums and playlists on Spotify.
Displaying all the released songs on a single page
For goal 2, I sketched three possible solutions that lead to one ending page. The most important aspect of this design is to make the feature visible and easy enough for users to discover the new feature. Also, I had to consider the existing visual elements and the theme of the page to seamlessly incorporate the new feature into the app.
Final decision-making process
After analyzing the solutions, I decided to proceed with the third solution (creating a playlist in the featuring category). lacing a block under the popular song section). Including a new playlist that displays all the released songs on a single page and placing it in the featuring category will make it easier for users to discover and it will fit well with the existing elements without having to add too many buttons. I named the playlist "Song Library" because the name 'library' represents a collection of songs.
Making an artist and a current song panel more customizable and visually appealing.
Goal 3 includes two different sub-goals, one for an artist panel and another for a song panel. First, for the song panel, I focused on the display selection among an album cover, GIF artwork, and music video. Both solution drafts for the task of customizing the song cover provide users to pick and customize the song panel according to their preferences.
In the middle, the idea of featuring lyrics on the song panel stemmed from karaoke-style videos on Youtube. Adding the lyrics feature option on the top right corner will easily be visible to users and users will be able to choose the option based on their display preferences.
For customizing the artist cover, I sketched two different solutions to compare which one would be more visually appealing and create a more fun interactive experience. In each solution, either card-swiping or grow/shrink motion is expected to be implemented.
Final decision-making process
As a final decision for the artist panel, I chose to design the first solution (card swiping motion) because of its fun, creative interactive experience. Because Spotify is mostly structured with a lot of vertical scrolling motion, I thought it would be innovative to add an additional motion that has not been featured. The same goes with the song panel, artworks will be displayed on vertically swipeable sorting cards. Users will be able to select a preferred cover art by clicking a select button under the artworks.
Sorting liked songs by year
For goal 4, there were two possible solutions to address the pain point. I realized Spotify provides very limited sorting features so I wanted to incorporate another sorting method to address users' needs. The left solution with block panels will give easier navigation than the right solution which instead aims to give a more interactive motion.
Final decision-making process
For the sorting method, I decided to go with the block panel solution because of its easy usability and discovery. Because years will be organized in chronological order, it will make more sense to have a vertical scrolling than a horizontal card swiping motion.
Adding an option to queue songs through play last or next
For goal 5, I made two possible layouts to address the pain point. The first option (left) features button-like options that are more visible and more to scroll downward. The second option (right) includes 4-5 main items and a list of other options. Items that are added to the layout are the same, including the new feature 'play next' button.
Final decision-making process
As a final decision, I decided to proceed with the second solution since the layout makes it easier for users to distinguish between the main and minor buttons. Also, the two queue options will be layout on the same y-axis, which creates a more logical flow.
04 Prototype
Hi-Fi Designs
BEFORE
AFTER
Blur mesh
Loading page
Personalized message
glassmorphism
Home screen
Inner shadow
buttons
Search page
Your library page
Main pages
Efficient Playlist Creation
AFTER
BEFORE
Load more
.png)
Song Library
Song Library Page
Organized by
released year
Customizable Cover Panel
BEFORE
.png){kind=small}
AFTER
.png){kind=small}
BEFORE
AFTER
Lyrics Integration
Lyrics display on song cover
Glass panel
'Play Next' Queue Option
Glass panel
Play next
BEFORE
AFTER
Sorting Liked Songs by Year
%202.png)
Slide left to open the panel
The Results
05 Test & Feedback
Feedback Capture Grid
It allows participants to contribute useful critiques and ideas to improve my prototype and gather their feedback into 4 quadrants:
Likes, Criticism, Questions, Ideas.
Process
-
All 10 interviewees who previously participated in the experiment were asked to test the prototype.
-
During the 1:1 session, each user was asked to provide 2 or more comments for each quadrant.
-
After all the sessions, I summarized their feedback and organized shared comments into each grid.
-
The mesh gradient background makes Spotify look more trendy & vibrant.
-
Being able to customize the song/album cover makes Spotify more personal & exclusive.
-
The glass panel gives more depth to the interface.
-
Easier navigation through new sorting & search methods.
-
Is there a reason why the music video is part of the song cover customization?
-
Will we be able to import any photos to edit the artist/song cover?
-
Is the new sorting method applicable for other playlists besides the liked song playlist?
-
A share feature among Spotify users.
-
Info about a song's genre.
-
Micro-interaction icons.
-
More interactive prototyping workflows & transitions - swiping, animated interactions, etc
-
The sorting icon is too small.
-
Still a lot of unnecessary content to scroll through.
-
The transition from the lyrics panel to the display mode on the song cover is not smooth.
Reflection
"UX without users isn't UX" - Hoa Loranger
Challenges
-
Designing and matching with Spotify's UI elements
-
Managing and organizing all the data and information in an "easy-on-eye"/ visual way
-
Coming up with solutions that are logical for users, not me
-
Ensuring images and elements are high resolution
-
Keeping the same constraints for my UX research participants during the user observation/interview phase
-
Differentiating UX mapping methods and appropriately applying them
-
Finding unbiased participants with various experience levels in using Spotify
-
limitations to conducting different types of UX research methods (eye tracking, click streaming analysis)
-
Gathering various insights and viewpoints
What I learned
-
The difference between attitudinal and behavioral research methods
-
Learned to emphasize more on easy, useable prototypes than fanciful prototypes
-
Learned how to utilize and incorporate Lucidchart to organize and manage my research data
-
Learned not to overwhelm yourself with too many ideas
-
Learned to be more accepting of feedback and that not every design process can be done perfectly
-
Learned to use other designers' case studies as inspiration
-
Learned to ask "Why?" for every design decision to see if it was designed from the user's perspective
Mistakes
-
Not recording the users' behaviors during the research phase - failed to remember concrete details
-
Got sidetracked by adding additional ideas which were not part of the plan
-
Using multiple software to document findings - difficult to navigate and overview all the data
-
Low-resolution/unstructured sketches
Next steps
-
Make Spotify more interactive by redesigning existing functions
-
Remodel Spotify's yearly "Wrapped" to quarterly "Wrapped"
-
Implement voice recognition with AI to improve its usability
-
Redesign podcast channels on Spotify
-
Level up the prototyping workflows by adding more interactive and animated transitions & animations
