Powerful. intuitive. engaging.
Overview
Emotion meets data.
Table of Contents
Background
The Opportunity
Defining The Target
Competition Analysis
Prioritizations Matrix
User Flow
Ideation
Lo-fi Prototyping
Typography & Palette
Hi-fi Prototype
Final Design
Takeaways
In a hurry?
Click here to
skip to final design.
Background
Starting from a frustration with my enormous music library of +311 playlists, my collection was becoming harder and harder to manage.
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.
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.
average of 9.3 playlists for
non-discerning listeners
Their extremely high volume combined with a detailed and vast organization (self-rated taste diversity averaging 6.7/10), creates a significant list of pain points typical music library tools fail to solve.
Among those, the following are the most prevalent in this niche:
60% of discerning users say managing scale is their biggest challenge
Double the typical rate of 30% – proving scale breaks existing methods.
40% of the same niche group say limited customization is their top challenge
They want more granular control than platforms currently provide.
The Opportunity
Open to Options
These critical pain points reveal a clear market gap for a solution built for the curator, not just the listener.
Respondents' willingness to use external tools clearly highlighted the desire for improvement.
(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.
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 the project was focused 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
Michael
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
Michael seeks fresh music for diverse activities, including event hosting and content creation.
His goal is seamless mood switching and adaptive playlist customization to complement his multi-faceted lifestyle throughout his day.
Frustrations
1
What song was that again?
His 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 Michael
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 ideating, studying adjacent projects is essential to survey current offerings, identify downfalls, and note opportunities for improvement.
Shown in survey data: High streaming platform usage (~95%), competition analysis strictly focused on projects with streaming API integration (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
An extensive process was conducted referencing our niche's pain points, comparing typical organizational tools, and analyzing the competition – setting the grounds to construct a shortlist of tailor fit and impactful implementations.
Shortlisted and plotted (as seen below) to determine the most valuable features to implement.
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.
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).
This logic was then translated in interaction design 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.
A Key Decision – Relative data, visually represented in physical position
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.
The Dilemma
Semantic data, like genres, cannot be numerically ordered.
This challenged visualizing semantic filters beyond mere lists, requiring innovation to be engaging and truly useful.
I first sketched intuitive ideas and explored how numerical data is visualized for insight.
Visualizing Numerical & Semantic Data
Initial sketches explored diverse visualization methods, referencing competitor's UI and engaging interaction design.
The key was finding a guiding intent and reason beyond mere aesthetics.
After a brief reflection, it prompted a small revelation: shifting focus back to semantic representation.
A Pivotal Breakthrough
Through ideating, 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 leveraging the logical order of semantic categories, lets take the threshold of relevance within each 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 a innovative feature: blending of different categories.
The sketch on the left shows the first initial ideas of this pivot.
assembling The Pieces
A Puzzling Process
At this current point in time, the project's structural 'logic' had been laid out. What was missing was the interaction design for that said logic, and how everything comes together.
I decided to start chiseling away an wireframe to see how things fit together – playing with the design to learn from.
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. Specifically, the bubble diagram visualization itself offered no inherent purpose or true value.
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 skeuomorphism to pure lean function, recognizing emotionally resonating interfaces risks compromising functionality.
This led to the thought: Why not apply this lean, clear, and function driven direction to the main library view as well?
Rethinking Representation
Prioritizing functional value, I revisited the root of this project:
Enormous libraries packed with hundreds of playlists of varying sizes.
Eureka! 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 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 playlist length could be visualized in a familiar and simple format, why couldn't genres, i.e semantic data, be simply visualized as well?
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 initial wireframe illustrated to me the importance of clarity, simplification, and focus. Our users are already presented substantial amounts of library data.
So, I employed Hick's Law as a guiding basis for the next version.
The winning strategy is 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
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.
Atypical designs although novel and innovative, pressure users to learn a processes they are unfamiliar with, increasing product success risk as well as research/development resources.
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.