Import
Filter
Sync
Powerful. intuitive. engaging.
Overview
Emotion meets data.
Table of Contents
Background
Research Findings
The Opportunity
Competition Analysis
Prioritizations Matrix
User Flow
Ideation
Lo-fi Prototyping
Hi-fi Prototype
Typography & Palette
Final Design
Takeaways
In a hurry?
Click here to
skip to final design.
Background
Stemming from a personal frustration with my enormous music library of 311 playlists (and growing), my collection was becoming harder and harder to manage every week.
Unable to find a worthy solution, I sought my own. Conducting a survey, 61 listeners responded and confirmed I was not the only one.
Analysis revealed a critical gap amounting to about 25% of the respondents were discerning users with large collections – they are active curators who share similar organizational struggles.
Project
UI/UX Case Study
Roles
UI/UX Design, User Research,
Graphic Design, Branding
Timeline
3 months
Collaborators
None
The problem
Frustrations of managing enormous libraries of music, which by nature are fuelled by emotions – not logic.
Context
Setting The Scene
Curation Overload
The Meticulous Curator
Their passion for music has led to libraries averaging 126 playlists per user, with some reaching up to 500.
Discerning listeners average 13.5x more playlists than the typical user.
average of 9.3 playlists for
non-discerning listeners
This sheer volume, combined with this specific niche's desire for detailed and vast organization (self-rated taste diversity averaging 6.7/10), creates an array of significant pain points typical music library tools fail to solve.
Among those, the following are the most prevalent in this niche.
Managing Scale is Painful
60% of this niche identify managing large libraries as their #1 challenge.
This is twice the rate (30%) seen in the overall survey population, proving scale breaks existing methods.
Control is Lacking
The other 40% of the discerning listener group citied its top challenge as limited customization options –
Thus many demanding granular control that current platforms cannot offer.
The Opportunity
Open to Options
The critical pain points above reveal a clear market gap and a strong demand for a solution built for the curator, not just the listener.
Respondents' willingness to use external tools clearly highlighted the desire for improvement.
Within this niche, 2/3 of users express explicit interest to use a 3rd party tool.
(regardless of their streaming platform of choice)
This overwhelming willingness to look beyond native apps underscores the severity of their unmet needs and the readiness for an innovative external solution.
One size
does not fit all
A tailored design is needed for those who tailor their music.
Current music library platforms clearly fail the "meticulous curator".
Their large and diverse libraries are overwhelming existing tools, leaving users frustrated by a lack of control and efficient management options.
A solution is needed to specifically address this significant niche, to empower and transform the burden of curation into a seamless and powerful experience.
This is the gap of users is who I chose to focus this project on.
Defining the target
Narrowing Down
To devise a solution for our curators, the target must be defined.
Setting the scene with a guiding question, and empathizing with who they are and the lives they lead.
HMW?
How might we empower curators to manage their large and diverse music libraries?
User Personas
Pain points – So tell me, where does it hurt?
Understanding the needs and challenges of discerning users with large libraries frames the design to ensure an effective, satisfying tool for managing vast music collections.
Adventurous
Abbie
22 years old
Student in STEM
Part time TA
Lives on campus
+ 3h listening a day
Curious and open minded, she enjoys exploring novel experiences. Experimenting with novelty which push her boundaries excites her the most.
Motivations
Reflecting her tendencies, Abbie explores genres, challenges her taste, and values organic discovery.
Music serves as a creative outlet; her tight schedule means she primarily listens passively, actively curating only when time permits.
Frustrations
1
Growing Pains
As a heavy listener with an extremely diverse taste, routinely exploring new music causes playlists pile up. Frustration grows daily as her library grows.
2
No Time? Algo will do.
Struggling to find her music, she often settles for suggested algorithmic mixes. However this negatively impacts her experience as it lacks personal significance.
3
A cluttered library is a cluttered mind.
Desiring to clean up her music, she cannot. Her streaming platform has poor optimization for organizing large libraries.
Moody
Colin
29 years old
Fitness Influencer &
Entrepreneur
Downtown Toronto
+ 5h listening a day
Leading a dynamic lifestyle, days vary from intense workouts to business meetings, requiring a versatile and adaptive approach to music selection.
Motivations
Colin seeks fresh music for diverse activities, including event hosting and content creation.
His goal is seamless mood switching and dynamic, adaptive playlist customization to complement his multifaceted lifestyle and shift throughout his day.
Frustrations
1
What song was that again?
Colin's extensive lifestyle leads to an equally extensive music library, often overwhelming to browse due to the sheer number of songs in each playlist.
2
Will it blend?
Struggling to blend different types of music efficiently, his cumbersome playlists feel too segmented and isolated from each other.
3
DJ Colin
Frequently hosting events and creating content, he acts as DJ. Struggling to extract new music from his library and avoid stale tracks is a big pain point.
Competition Analysis
Learning From Precedence
Before sketching out ideas, studying deployed projects is essential to survey current offerings, identify downfalls, and note opportunities for improvement.
Based on survey data showing high streaming platform usage (~95%), analysis strictly focused on projects with streaming API integration (mainly Spotify), ensuring insights were directly relevant to how curators primarily interact with their libraries.
4 Approaches
Deployed Products
Playlist Builder
Music Organizer
AI Playlist Prompter
Library Analysis
Moodplaylist
Playlist Builder
Minimal project, with a minimal use case. Fun for the novelty, but does not have a real reason to retain users.
Pros
+ Simple & convenient
+ Emotionally driven
+ Minimal # of interactions
Cons
– Very minimal control
– Forced to pick 5 artists
– Superfluous UI
Takeaways
• Interaction potential
• Streamlined user flow
• Concise
Organize Your Music
Library Organizer
Extremely powerful product. Although it has the powerful function like a Excel spreadsheet, it also inherits the form and feel of one too.
Pros
+ Omnipotent perspective
+ Powerful control
+ Data galore
Cons
– Little UX consideration
– No Emotional Value
– Functional but no form
Takeaways
• Exact granular control
• Data representation
• Inherit value in product
Playlistable
AI Playlist Prompter
Send a prompt, receive a playlist based on your library. Works quickly but how is this fundamentally different than native platform suggestions?
Pros
+ Convenient, fast
+ Efficient intent to result
+ User friendly
Cons
– Lacking human touch
– Minimal manual control
– Auto curation is mediocre
Takeaways
• Powerful to leverage LLMs
• Minimal user flow
• Very efficient
Obscurify
Library Analysis
Yes, its not a builder or organizer – But it expands possibilities of what an API request based product can achieve.
Pros
+ Presents charming data
+ Easy to digest
+ Inherent value
Cons
– Fully automated analysis
– Shallow conclusions
– Mediocre UI fit and finish
Takeaways
• Whimsical data filtering
• Digestable
• Unique approach
Develop
Approaching The Problem
Sculpting an approach
Preliminary Groundwork
(For clarity purposes in this case study – the development process is presented linearly).
With a clear understanding of the areas of pain and affected users, we can now focus on solutions.
The initial phase involves defining essential user needs, then composing a structure for those needed features.
prioritizations Matrix
Optimizing for Impact
Features are the structural components of this solution. An extensive process was conducted referencing our niche's pain points, comparing typical organizational tools, and lastly analyzing the competition – setting the grounds to construct a shortlist of tailor fit and impactful implementations.
From the shortlist, they were plotted (as seen below) to determine the most valuable features to move forward with.
Impact versus feasibility
6 Prioritized Features
User Flow
Path of Least Resistance
Developing this flow to be concise and efficient is absolutely paramount to the this project, especially for our target group who are essentially seeking large amounts of data (hundreds of playlists) to be simplified and distilled into a bite sized snapshot of varying groups.
4 Guiding Principles
Project Structure
seamless & easy to use
designed for large libraries
agile library structuring
granularity for precision
At every decision made, I asked
– Does this move fit the ethos?
To distill large and complex music library filtering into an engaging, seamless, and intuitive experience.
Ideating with intent
A Context Driven Solution
Now, with all the groundwork laid out – Its time to start sketching ideas informed by the research.
Starting from these ideas, they will lead into low fidelity prototypes, and then finally, execution.
The Process
Sorting and Organizing
What is the most important component of sorting data? You guessed it, filters!
Studying how the structural logic of how data filters operate, I took the abstract variables and visualized them. The "Anatomy of a Filter" (in the first sketch) is based on this article sums it up nicely.
This logic was then translated for music categorization.
Visualizing Logic
The Components
Identifiers
Semantic or Numerical Data
(ex. Genres vs BPM Tempo)
Relative
Logic of filtering order. Translating this into visuals (ergo UI) was the key decision in this phase (see bottom right). The position of the identifier is relative from each other, effecting its influence on the data.
Value
This component applies strictly to numerical data. Semantic data types cannot be ordered by value as it does not naturally contain one.
With the components of a filter broken down into its primary elements, organizing this process visually in the context of interaction for the project focus group (the curators) was the next move.
Anatomy of a Filter
Key Decision – Relative data, visually represented in physical position
The Dilemma
An issue emerged: semantic data, like genres, cannot be numerically ordered.
This challenged visualizing such filters beyond mere lists, requiring innovation or sacrifice of semantic representation.
Lacking an immediate solution, I first sketched intuitive ideas and explored how numerical data is visualized for insight.
Attempting to Visualize Numerical & Semantic Data
Initial sketches explored diverse visualization methods, drawing from competitive analysis and other UI contexts.
Acknowledging countless representation options, the key was finding a guiding intent and reason beyond mere aesthetics.
Stepping back prompted a small revelation, shifting focus back to semantic representation.
A Pivotal Breakthrough
Through developing numerical representation, I realized that although these were values with a innate logical order – it was still a threshold gradient of the identifier.
Applying this line of logic to semantic data, I reframed the perspective.
Instead of representing the logical order of the semantic category itself, lets take the threshold of relevance within that category. As an example: representing the similarity of a collection of music to a genre – ex. How relevant is this playlist to rock music?
This crucial pivot not only allows valuable insight to be drawn, but blending of different categories.
The sketch on the left shows the first couple ideas in a visual representation of this thought.
assembling The Pieces
A Puzzling Process
At this current point in time, the structural basis of the logic had been laid out. What was missing still was the interaction design for that said logic, and how everything comes together.
To continue developing the project I decided to start chiseling away an approach to see how things fit together – playing with the design, learning what works and what did not.
connecting ideas together
Filter types and Relative filters
Fun fact – these notes are actually written directly on my wall in my room.
A moment of inspiration hit and I needed to write big, from floor to celling.
Lo-Fi – Round 1
Iteration 1
Takeaways
The initial prototype, while functional, fell far short of the vision. It felt clunky, complicated, and lacked visual hierarchy, leaving focus unclear. Moreover, the bubble diagram visualization itself offered no inherent purpose or true value beyond simple representation.
Lastly, the filtering systems took a direction of
skeuomorphism, mimicking real studio audio equipment
with tactile knobs and sliders.
Although novel and interesting, there was no real intent behind it other than aesthetics and familiarity, which did not construct a case substantial to enough for the curators to use.
Return to The Sketchbook
Second times the charm
Iterating on the prototype clarified design priorities.
A key decision from this process shifted filter design from emotionally charged concepts to functional skeuomorphism, recognizing resonating visuals riskes compromising functionality.
Prioritizing this functional clarity over emotional resonance proved valuable and would remain core, although the skeuomorphic execution needed reconsideration.
This led to the thought: why not apply this clear functional intent to the main library view as well?
Rethinking Representation
Prioritizing functional value and clarity over aesthetic convention, I revisited the critical gap's root:
Enormous libraries packed with hundreds of playlists of varying sizes.
This led to the "eureka" insight – a functional metric to reframe this complexity and view libraries in a new light. Playlist length is the useful and novel metric for this niche that has never been visualized.
This became the core design intent, guiding the final visualization concept for the main library.
A Lightbulb moment
Applying the same principle – I experimented with methods to represent semantic data again, in a meaningful way that had true value to offer.
Revisiting this mechanism after tackling the main library view flipped the perspective for me.
If something like playlist length could be visualized in a familiar and simple format, why couldn't genres, i.e semantic data, be simply visualized as well? (Based on relevancy of course).
Implementing the new ideas
Putting it all together again
Now, with true design intent and valuable approaches ready to be tested and fit together – prototypes were drafted out for the second time.
Lo-Fi – Round 2
Iteration 2
Takeaways
As the first draft with these major pivots, I did not expect much.
However, this first prototype did illustrate to me how important it would be to clarify, simplify, and focus. The user is already presented substantial amounts of data from their library. Reassessing this iteration, I employed Hick's Law as a guiding basis for the next version.
The winning strategy here would be to demand usefulness through emphasizing importance, and minimizing distractions in the UI.
Iterations – 3, 4, & 5
These drafts acknowledged the data visualization component were to be front and centre – but at what proportion and position?
How might the current components be emphasized correctly and in the right order, to maximize user usefulness and minimize data overload?
Focusing on these questions led to iteration 6.
Final Iteration – #6
Finally, a potential prototype emerged from this process.
This prototype had the most clarity and alignment with the root intent.
Focusing on our natural instinct (in the western world) to read left to right – I used this principle to lead your eyes with the main component, and composed/layered all other secondary elements around it – supporting in the foreground and background, rather than competing for attention.
Completing the User Flow
Extrapolating off iteration 6's main library screen, I developed the rest of the screens with the same design language.
1. Import Library
2. Main Library View
3. Filter Main Library
4. Adjust Filter
5. Select to Sync
6. Sync to Platform
At every decision made, I asked
– Does this move fit the ethos?
To distill large and complex music library filtering into an engaging, seamless, and intuitive experience.
Execution
Final Design
Design System Specifications
A Consistent Feel
Reframing user libraries inherently required innovation and a degree of unfamiliarity.
To ground this new experience in recognizable patterns, I strategically applied Jakob's Law through typography and color.
Typography balanced novelty with familiarity: ubiquitous Helvetica Neue offered recognition, while NB International provided technical flair for details. Deliberate gaps in the type scale (omitting 36px/85px) amplified hierarchy and reinforced design intent through focused emphasis.
As the majority of the research states Spotify listeners as the overwhelming majority – The color strategy mirrored this, referencing the familiar Spotify palette, adopting a dark aesthetic evolved with emphasized green/blue hues for distinct brand identity and visual familiarity.
Hi-Fi Prototype
Version A or B?
Now, with the established design system ensuring alignment with design intent – the lo-fi prototypes had color and typography implemented. Along prototyping, a second version came about while layering elements through production.
Ultimately, version B was selected for its edge in visual hierarchical clarity and stronger alignment with the ethos.
Version A
Version B
Final Components
Key Highlight
Semantic vs. Numerical Filtration
Blending Genres
Discovering and developing a visual representation for semantic data not only increases engagement and functionality of the design, but also becomes an innovative approach to blending data that may not have been intuitively considered before.
Engaging Metric Interaction
By placing user functionality at the forefront, the design becomes extremely lean. Nothing hinders the focus of the project.
Reimagining typical numerical metric interaction through this project led to a pioneering approach to music library interaction.
Final Design
Import your Library and filter by desired
Select desired playlists and place them in a New Library View
Not precise enough? Add another filter!
(or as many as you please)
Library to genre relevance
Curate the genre threshold to select
Genre Visualization
Designed to organize semantic data based on relevancy, this filter visualize your library genre composition at a glance.
Choose multiple genres
Select threshold
Ready? Time to drag & merge
More than 1 Genre?
No problem
As the relevancy logic is on a gradient from most to least, blending multiple categories is just as easy.
Ready to listen to your newly curated library?
Select Views and Sync back to Spotify
Reflection
Time for introspection
Overall
As my first ever extensive case study, I deepened my understanding of the digital iteration process. Coming from an architectural background, I found
more similarities than differences between the two fields. The glaring main differences are mainly in terminology and a certain esoteric processes.
As a whole in design thinking and approach to problem solving – it is extremely familiar.
next Steps
From the get go, this case study project was intended to have a MVP built.
While my engineering skills are no where near my design proficiency, I have done several trials with AI powered IDE's and full stack tools like Lovable and Bolt – they all seem to have potential but lack strong attention over the span of a full project. ]
If time allows, it will be incredibly exciting to design-engineer a MVP in the near future for this project.
Lessons Learned
I had a lot of fun developing this project. But, as this was a personally driven and directed project, it was easy to go overboard on details and pursue perfection – that is something to be wary about in the future.
Testing ideas as soon as possible by any means possible is the best approach. Having a MVP in front of users eyes for immediate feedback generates a tailwind for the iterative design processes.
Considerations
In the future, conducting usability tests would be helpful to lead further iterations. Static mockups can provide decent feedback for the high level flow.
However, as the core innovation and complexity lies in the interaction, such as the filtering mechanisms these intricate micro interactions which nudge and provide feedback to the user are core to the design – a basic clickable/static mockup will not be sufficient gather confidently pivotal insight. It could even lead to superficial or misleading results.
As it is not a typical user flow, I will need to develop functional primary features to gather detailed and actionable feedback.
Thank you for taking the time to read my in depth case study!
labor of love and passion <3