After leadership buy-in, I worked within a small team cross-functionally and closely with my design manager through multiple design iterations. By exploring various approaches, I landed on low-fidelity wireframes visualizing the creative connections behind music.
Explore every creator behind a track and the connections
between songs, collaborators, samples, and covers.
Agenda
What This Case Study Covers
Introduction
Project context, the challenge, and my role as Lead Product Designer
Approach
Research insights, hypothesis, design principles and prototype
Solution
Ideation & iteration, AI workflow to test motions, testing insights, and final prototype
Impact
Targeted metrics and how we measured success
Reflections
Lessons learned and takeaways from the project
Introduction
Setting the Stage
The Approach
From Research to Prototype
Research & Insights
To create a solution for the challenge, I worked with UXR to conduct a comprehensive research study with 75-minute interviews across 14 participants aged 18-38 (Gen-Z and younger millennials)—a mixture of high, medium, and low mobile consumption users, all with moderate or high discovery propensity—on the topic of their discovery journey.
Key Insights
Click to cycle through insights
01
Curiosity can trigger users to switch from passive to active discovery and has the potential to enable more active discovery journeys.
02
"I wanna research the track, the artist, and their songs. That's how I found a few different artists... and then I go down a rabbit hole because of their collaborators and keep going."
03
"Trying to connect the dots to see if I know any other bands' names to sort of relate it back to other stuff that I've listened to previously. ... I can then talk to my friends about little discoveries and connections that I've made within the music that we like."
04
Users expressed a strong desire to understand the creative connections behind their favorite music—who wrote it, who produced it, and how artists are linked. Discovery moments often happen serendipitously, but users want more control and depth when they choose to explore.
Hypothesis
By introducing SongDNA, I aimed to strengthen track-to-track connections, artist-to-artist connections, driving deeper music discovery and increased listening hours. This immersive discovery experience shifts users from passive listening patterns to active exploration.
Design Principles
Immersive & Interactive
Create a knowledge ocean where users can deeply explore the creators, collaborators, and samples behind every track, enabling a rabbit-hole experience that encourages them to keep digging deeper.
Clarity
Present complex data and connections in a clear, digestible way—avoiding information overload for fans.
Holistic
Design a flexible pattern that can be applied across different formats and surfaces, enabling scalable discovery experiences.
Concept Video
The Solution
Bringing SongDNA to Life
Ideation & Iteration
Tap on final designs to view annotations
Track View
Why this didn't work:
- Lacked the immersive and exploratory feel needed for rabbit-hole discovery
- Added 1 extra tap for users to click into the discovery journey
Old Exploration
Track Center View
Why this didn't work:
- Lacked the immersive and exploratory feel needed for rabbit-hole discovery
- Added 1 extra tap for users to click into the discovery journey
Old Exploration
Grouped View
Early exploration:
- Initial design concepts exploring different visual approaches
- Helped inform the direction toward a more immersive solution
Old Exploration
Sample UI
→
Model heading:
escape SongDNA logo, share
- Provide users with intuitive controls to exit the view, and share what they find with their friends
Track entity list:
Cover art, Name, Artist name, Curation, Play
- Provide users with a clear, glanceable summary of each track and artist
Immersive map:
Contributors
- Immersive and interactive way to explore the full creative ecosystem behind a track
Tracklist:
Sample and related tracks
- List of tracks including samples, interpolations, original tracks, covers
Final Design
Track View
Artist View
Why this didn't work:
- While grouping collaborators helped organize the information architecture, it compromised the immersive and interactive experience needed for users to immediately dive into rabbit-hole exploration
Old Exploration
Artist View
→
Model heading:
- Display artist name with collaboration count and song connections
Artist entity list:
- Display artist name with collaboration count and song connections
Collaborator map:
- Visual grid showing all artists this person has collaborated with
- Enables rabbit-hole exploration from artist to artist
Tracks from the artist:
- Complete list of tracks from this artist
Final Design
Artist View
Track View / Artist View Focus State
Why this didn't work:
- The bottom sheet breaks the model of keeping users in one place to keep rabbit-holing the experience
- On the bottom page, users don't know where to navigate towards the next destination
Old Exploration
Bottom Sheet
→
Immersive map (Focus state):
Contributors focus state
- Users often got stuck on the screen without seeing full credits
- Focus state reveals details on tap without extra navigation
- Encourages rabbit-holing into artist view
Final Design
Focus State
Model heading:
- Display artist name with collaboration count and song connections
Artist entity list:
- Display artist name with collaboration count and song connections
Collaborator map:
- Visual grid showing all artists this person has collaborated with
- Enables rabbit-hole exploration from artist to artist
Tracks from the artist:
- Complete list of tracks from this artist
Final Design
Artist View
Design the Focus State in Code
The design process here required a different approach. While Figma served as my foundation, it has its limitations for prototyping complex motion and interactions and doesn't demonstrate ideas in an engaging way to senior leadership. So me and the brand designer embraced new design-engineering workflows—including AI-powered tools like Cursor and Claude for rapid prototyping in code. This allowed us to test motion and interactive prototypes that truly represented the final experience, staying true to the design principles of immersion, interactivity, and clarity.
Collaboration View
Why this didn't work:
- Does not feel like a celebration moment of collaboration between two artists
- Through user research, users are confused about the x icon under the artist profile—they think it is more intuitive to tap on the artist profile image to navigate to the artist view
Old Exploration
Collaboration View
→
Model heading:
- Provide users with intuitive controls to exit the view and share
Collaboration header:
- Shows the connection between two artists and their shared work
Shared tracks list:
- Complete list of tracks where both artists collaborated
- Each track shows the specific roles of both artists
Final Design
Collaboration View
Final Designs
Track View
Track View w/ Focus State
Artist View
Artist View w/ Focus State
Collaboration View
Low Fidelity
High Fidelity
Track View
Model heading:
escape SongDNA logo, share
- Provide users with intuitive controls to exit the view, and share what they find with their friends
- This provides a sense of control, transparency, and efficiency when exploring content
Track entity list:
Cover art, Name, Artist name, Curation, Play
- Provide users with a clear, glanceable summary of each track and artist to identify what they're engaging with
- They need playback controls and the ability to add tracks to a curation for personalized listening
Immersive map:
Contributors
- Provide users with an immersive and interactive way to explore the full creative ecosystem behind a track
- The map enables context-rich discovery through visual exploration, making the creative lineage engaging and intuitive
Tracklist:
Sample and related tracks
- Provide users with list of tracks including samples, interpolations, original tracks, covers to complete the storytelling of the track
Track View w/ Focus State
Immersive map (Focus state):
Contributors focus state
- I worked with UXR and tested a lot through user insights and found out users often get stuck on the screen and won't be able to get to the artist view and see the full credits of the roles from a contributor
- To avoid any 2-step tapping to see more details that break the design principles of Interactive and enable a rabbit-hole experience, I invented this view called Focus state
- When user centers on an artist and taps the profile, they're able to find all the roles and in-depth details of artist stats, encouraging users to keep going with rabbit-holing and tap into the artist view
Artist View
Model heading:
- Display artist name with collaboration count and song connections
Artist entity list:
- Display artist name with collaboration count and song connections
Immersive map:
Collaborators
- Visual grid showing all artists this person has collaborated with
- Enables rabbit-hole exploration from artist to artist
Track from the artist:
- Complete list of tracks from this artist
Artist View w/ Focus State
Collaborator map (Focus state):
Artist focus state
- Similar to the Track View focus state, users can tap on a collaborator to reveal detailed artist information
- Enables deeper rabbit-hole exploration from artist to artist without extra navigation
Collaboration View
Model heading:
- Provide users with intuitive controls to exit the view and share
Collaboration header:
- Shows the connection between two artists and their shared work
Shared tracks list:
- Complete list of tracks where both artists collaborated
- Each track shows the specific roles of both artists
User Testing
Final Prototype
The user researcher and I have done multiple rounds of user testing and iterated on the designs. In the end, we tested with a coded prototype using real data. A 3-4 day diary, unmoderated usability study (26th-30th Nov 2025) with 10 music fanatics aged 18-38 (Gen-Z and younger millennials) to understand their first interactions with SongDNA.
Click to cycle through findings
Core Finding 01
SongDNA is highly praised for its utility and depth of discovery, acting like a detailed blueprint of a song's creation. There is a wow-factor for music lovers. The feature is considered highly useful by all participants and delightful by most (8 out of 10).
Core Finding 02
Users called it "pretty cool, pretty slick," considered it "unmatched as a discovery tool," and "the best of the discovery features."
Core Finding 03
Users instinctively scrolled or quickly discovered the map's horizontal scroll capability.
Core Finding 04
The bubble map felt 'new' and appealing to users experiencing these insights into collaborators for the first time. They followed their personal interests in specific roles like producers and songwriters.
Accessibility
Designed with accessibility in mind, ensuring the experience is inclusive for all users.
Localization
Adapted the experience for multiple markets, ensuring cultural relevance and language support across regions.
Branding
Created a distinctive visual identity for SongDNA that complements Spotify's brand while standing on its own.
Expanding to Desktop and Other Formats
Extended the mobile experience to desktop, optimizing for larger screens and different interaction patterns. Also explored reusing this DNA model to apply to video format, podcast format and audiobook format.
Launch
SongDNA will roll out globally this year spring.
Beta Launch
Rolled out to select markets to gather real-world feedback and validate my assumptions at scale.
Industry Review
Received positive feedback from industry experts and press, validating my design approach.
S4A Preview
Showcased SongDNA to artists and their teams, gathering valuable feedback from creators.
User Launch
Full rollout to all Spotify users, bringing the SongDNA experience to millions worldwide.
Targeted Metrics
Measuring Success
+32%
Artist Discovery
+18%
Session Duration
0.1%
MAU
SongDNA will successfully shift users from passive listening patterns to active exploration, creating deeper connections between fans and the artists they love.
Reflections
Lessons Learned
Integrating AI Tools into the Design Workflow
Not every design process follows the traditional linear Double Diamond anymore. With AI tools integrated into the design workflow, we can no longer simply rely on conventional processes—we should lean into prototypes. AI makes high-fidelity prototyping far more accessible and less time-consuming than it used to be, allowing designers to validate ideas faster, iterate with real interactions sooner, and bridge the gap between concept and reality with greater confidence.
Motion Design is Communication
Traditional design tools had limitations when testing complex interactions like the bubble map and focus state. By embracing design-engineering workflows and tools like Cursor to validate concepts with data and authentic motion—leading to more accurate user feedback and faster alignment. This taught me that for complex features, motion itself is a form of communication—not just polish.
Navigating Ambiguity in 0-to-1
Starting from scratch meant there were no existing patterns to follow. I had to define the product direction through research, experimentation, and constant iteration—often without clear answers. Embracing this ambiguity and staying adaptable was key to shaping SongDNA from concept to MVP.
Feel Empowered to Innovate
This project reminded me to stay true to design roots while pushing boundaries. SongDNA started as a bold idea—creating a "knowledge graph" for music discovery. By staying curious, advocating for the vision, leaning in user research, and not settling for safe solutions, I was able to create something genuinely new that users love.