From pixels to melodies
: image based playlist generation
Product Design
ML Integration
Personalization
Driven by combination of my two passions, music and image.
As a music enthusiast who loves exploring diverse genres, I noticed how many users of music streaming apps struggle with choosing the right playlist amidst an overwhelming number of options. This challenge in music discovery inspired me to rethink the experience. Driven by my passion for computing technologies and innovative approaches to music apps, I asked myself: Why not connect images with music? Thus, Snapmusic was born—a new way to enhance music discovery through visual storytelling, generating the perfect playlist to match any mood or moment.
Role
Product desginer
Timeline
May - July (3months)
Project
Personal Project
tools
Figma / Figjam
Adobe Photoshop
Adobe Illustrator
Overview
Problem
While music apps offer various playlists for wide preferences, the overwhelming variety often leads to decision fatigue. Users struggle to quickly find playlists that suit their context, especially when considering others' preferences.
Solution
Leveraging context awareness and visual cues to create personalized playlists
Design Process
Outcome
Key Features
Personalized Playlist Generator
Single snap can make a perfect matching playlist
No more hesitation. 'Snap and Make' enhance your experience within few seconds.
Life Journey, With Special Music
Record the moment with music
Turn your music moments into memories—post your playlists and share your Snaplist journey with friends!
Personalized Browse Options
Experience the magical coincidence
Finding the right playlist no longer to be a burdensome. As a context-based app, it knows your moments and matches you with the perfect musics.
Research 1
Research Goal
● Explore challenges and pain points users face with current music platforms.
● Investigate the specific difficulties users encounter when selecting a playlist.
● Research computing technologies to transform the concept into a functional solution.
Research Methods
● Competitive Analysis
● Quantitive Research through Survey
● Technology Exploration
After surveying 40 participants who uses music apps frequently, I found out that most users face when choosing a music playlist and gather insights that could help improve the playlist selection experience for users.
Survey Highlight
The survey revealed that participants spent significantly more time browsing for a playlist than anticipated. Just as music preferences differ, their experiences with music platforms also vary. However, users want playlists that fit their mood and activity, the too many choices leads to decision difficult. The real challenge isn’t just finding any playlist, but it’s making the right choice at the right moment without stress.
Inefficient Search Experience
On average, users spend 6.1 minutes searching for a playlist
Urgency Frustration!
Users struggle to find the perfect playlist in a rush or when selecting music for others
Limited Discovery
Music discovery is often limited to mainstream and popular playlists
Competitive Analysis
Analyzed the most selected music apps from survey to examine their strengths and weaknesses.
While each stands out in different areas, they all facing with the same core issue:
Explore Metaphors for Music Discovery
To develop a core feature for an accessible and personalized experience, I explored various metaphors to translate abstract emotions into visualized data. Through quick brainstorming sessions, sketching, and analyzing each metaphor's strengths and weaknesses, I identified the most effective approach for generating playlists that resonate with users' moods and contexts; utilizing image conveying mood and activity.
Wearable Smart Ring
Dynamic biometric data is super-personalized and hands-free input
Limited scope and lower accessibility by physical artifact
Natural Language Input
Personalization and accommodation
Familiar to use
Difficulty describing every contexts
Visual Cue (Image)
Convey emotion, activity, and personal context instinctively
Access to human factors and physical environment context
Use of explicit metaphor -> lower the awareness mismatch
Emoji Selection
Quick selection in fun and intuitive way of playful interaction
Ambiguous & different interpretation error
Challenge
Refined Question with Metaphor
How might we utilize visual cues and leverage context-based technologies to simplify music discovery and create personalized playlists?
Research 2
Understanding Computing Technology
To bring my imagination into reality, I researched computing recognition technologies and solicited to software engineers to explore how they could be applied to my concept of recognizing context from images. Through this exploration, I learned that Machine Learning and Object Recognition in computer vision can translate abstract data into actionable insights, enabling context-aware music selection and playlist generation through recommendation algorithms.
What is Computer Vision & Machine Learning?
Computer vision and machine learning, key subsets of AI, enable computers to interpret visual data and learn from experience to make accurate predictions. These technologies are central to transform images into context-aware insights for personalized experience.
How does the technology work?
Object and Emotion Recognition technologies facilitate the identification of various elements. The emotion, mood, and activity captured in the photograph with user metadata (location, time) influence to generate the music playlist.
How does the technology execution process work?
Ideation
Persona
Through analyzing user research, I developed two main user personas that best embodied target audience's needs and pain points.
Storyboard
To understand how this potential solution could assist users, I transformed the story of Eric into a storyboard.
User Flow: Create, Browse, My Page
To minimize decision fatigue while creating a more intuitive and engaging music discovery experience, Snapmusic's user flow begins with users capturing or selecting an image as an entry point following with pages for exploration and saved playlists.
Wireframe
Wireframe and Flow Design
Design Iterations
Home Design Iteration and Improvements
I started by drawing inspiration from music apps on market, displaying playlists in the Home with varying sizes of cards for visual hierarchy. After two mentorship sessions, I realized my initial designs lacked a context-based approach. I learned the importance of intuitive interface design and simplified the user flow to bring users closer to action in fewer steps.
Design Issues
⏶ The list views contribute to cognitive overload rather than simplifying the process, making it less convenient for users.
⏶ Fails to clearly highlight its unique feature, which undermines the app's value proposition making uncertain about its purpose.
Improvements
● Removed lists and simplifies navigation and focuses user attention on its feature, reducing selections to decide.
● By replacing the 'Home' page with a 'Create' page, it curates users directly to the camera interface, emphasizing the app’s core feature of creating playlists from images.
Another Iteration
During usability testing, a common question emerged: whether the app could also work with photos from the gallery. Recognizing this gap, I iterated on the app’s functionality to integrate a 'Share from Gallery' feature.
Design Concept
Style Guide
I created a comprehensive design system for unified brand consistency by organizing standardized design elements, components, and guidelines that illustrates what was used in the final design and logo design.
Design Solution
Introducing Snapmusic!
Onboarding to Snapmusic:
Onboarding steps help the app create playlists tailored specifically to user, setting the foundation for a personalized listening experience.
Personalized Recommendation
With use of user's metadata encompassing human factors to physical environment, Snapmusic present the perfectly matching personalized playlists without asking for.
Also, explore new music journey beyond routine listening with Surprise Snap playlist.
Smart Routine Playlist:
Learned from your listening habits, Snapmusic's playlist push notification blend in your routine and create magical moments.
Tune Together To Save & Share Moments
Don’t get stressed by rushed solo decision.
Invite friends, reduce the stress, and keep your shared moments saved in one place.
Lessons Learned
Takeaways
Leveraging Technology for Effective Solutions
Prior to starting the project, I had little knowledge of how AI, Machine Learning, and Computer Vision work. Through studying these technologies, I not only guided the design process effectively but also realized how my hypothetical idea could transform into reality. This experience highlighted the importance of research and knowledge in expanding creative possibilities.
Designing for Context Awareness
I learned the importance of designing for context awareness by continuously iterating on how users interact with systems in real-world scenarios. Understanding how environmental, behavioral, and situational factors influence user needs helped me refine interactions to feel more natural, intuitive, and responsive.
Next Steps
Implement Advanced Personalization
Currently, the research lacks in-depth user behavior analysis, which may lead to misunderstandings about application usage. If possible, I aim to address this by conducting usability testing to explore additional metadata, such as user preferences, social trends, and fitness activity data.
Transform SnapMusic into Reality
If I had more time, I would focus on strengthening SnapMusic’s technological foundation by collaborating with engineers to develop and refine playlist generation algorithms.