Sound.xyz
Listening experience for music NFT collectors
In 2022, I joined Sound.xyz as an in-house product designer tasked with redesigning the entire user experience. One of my key projects involved revamping the song page to enhance the end-to-end experience of listening and purchasing music NFTs.
White working at Sound.xyz, I also took the lead in developing design systems, assisting the company in establishing a robust visual and UX framework.
Time
Aug 2022 – Sept 2022 (2 months)
Updates until Jan 2023
Role
Product Designer
Team
2 Designers
1 Project manager
3 Software Engineers
Tools
Figma
Figjam
Linear
Discipline
UX/UI Design
UX Research
Interaction Design
Design Systems
Business Impact
Growth in NFT sales within 3 months
Total Collectors within 3 months
NFTs minted by end of 2022
Paid to artists by end of 2022
Collectors reached by end of 2022
What is a song page on Sound.xyz?
Sound.xyz tackles streaming revenue challenges for musicians. It offers NFT-based song releases with open and limited editions, listening parties, and fan engagement.
On each song page, fans can listen to the song, purchase these NFTs and inscribe public comments to show support and engage with artists and fans.
Sound.xyz received feedbacks that users had difficulties purchasing NFTs on the song page due to confusion in different drop phases.
Drop Phase Cycle
What are the drop phases on Sound? When a song gets released for NFT sale, that's called a public sale. However, before the public sale, more phases happen to the song.
Before the song officially comes out, the song is introduced on its separate song page as pre-launch. The countdown goes on for the public sale.
The artist can choose to release the song just to a small exclusive community before the public launch and that's called presale.
With the original design, most users got confused on pre-sale stage because, the page looks completely different with a slightly different purchase component.
When users access a song page on pre-sale stage, they have a confusing experience with changed contents and a different purchase component. The drop phase education is also not effective.
Below is the difference in the design of the presale page and a normal song page. The original design of the presale song page was more concerned with making this stage look more exclusive with the presale access and highlighting the presale user education chunk.
However, for users, they got confused when some song pages look like the one on the left and some others like the one on the right. There were no clear visual queues of what song drop phase the song is in.
Users have difficulty understanding the benefits of purchasing a song on Sound.xyz due to ineffective information hierarchy.
Purchase Component
The purchase component is too big making the page look more like a fundraising platform.
Behind the Music and Rewards
The "Behind the Music" and "Rewards" sections are the key selling points on top of the music itself but they are partially hidden with inner box scrolling.
Layout Hierarchy
How might we effectively inform users about song lifecycle phases and maximize user engagement and NFT purchase?
Insights from other products
I conducted an audit of 5+ traditional music platforms (such as Spotify, Apple Music, SoundCloud, etc.) and 10+ NFT/Music NFT platforms (including Royals, Serenade, Foundation, etc.), analyzing their listening experience flow, NFT purchasing, NFT release phases, audience engagement, and more.
Integrating the listening experience, artist-fan engagement, and purchase process into a single page required finding the right balance.
My goal was to create an immersive listening experience that naturally informs about the drop phases and guides users towards making a purchase.
Revised Information Hierarchy
Combine the purchase component with drop phase education and ensure its continuous accessibility through scrolling
Make the purchase component much smaller so the page looks more of a listening platform rather than a marketplace or a fundraising page
Vertical arrangement of information by the level of importance (song introduction, audience, song details)
Revised Layout
Through multiple user testing sessions with different versions of the layout, I ended up with this final mid-fidelity design.
An immersive top-listening section and a vertical arrangement for song info, audience, rewards, and song details
The purchase component follows along with the scroll to promote the purchase all time.
Updated Drop Phase Cycle
Once I had a brief idea about the song page's hierarchy and a new layout, the team and I discussed the drop phase in specifics and I learned that there were going to add free sales, and public sales with open edition and secondary sale phases shortly. So I updated the drop phase map to visualize how the drop phase/purchase component should be designed.
Purchase & Drop Phase Component
I explored several ways to represent the drop phases in a visually intuitive way and tested them out with the team and some users.
One interesting insight was that when they were interacting with the ones designed horizontally, they just thought there were three different purchase choices they could make in the present.
However, when they were presented with vertical layouts, they immediately understood the sense of time recognizing that there were past or upcoming phases.
Because many of them weren't familiar with the vertical slideshow interaction, the winner was the accordion. However, as I designed more versions of the accordion and tested it with more users, I realized that when all the phases were opened, they got very confused because of the amount of information there was.
So I tweaked it to become a collapsible panel to avoid that issue, and users were happy with the design.
Multiple States
All possible states were considered for engineering handoff
Had to go through multiple stakeholder meetings to figure out all the edge cases
Users can explore the album and the golden egg edition while visually connecting with other collectors' comments displayed along the soundwave. The platform fosters a community by incorporating collectors and comment bubbles within the album-themed section, encouraging interaction. Hovering over the artist's name reveals a brief info bubble with a convenient link to the artist profile, enhancing the browsing experience.
The page is divided into two sections for optimal user interaction. The details section on the left includes elements like Behind the Music, Audience, Contract Details, and More from the Artist. The activity section, accessed through a second tab, consolidates song-related activities like collections, playlists, and likes. This layout allows users to conveniently access and engage with both informational and interactive components of the page.
I combined the NFT Purchase component with drop phase education into a single, unified component. This consolidation ensures a clear understanding of the current stage and available purchase options. The component remains fixed while scrolling, allowing easy access to minting opportunities. Small tooltips were implemented to provide clear explanations of each concept, aiding user education.
Scenario 1: Public sale, open edition
The song is an open edition and has a public sale.
Scenario 2: Public sale ended, open edition
Users can collect or sell their NFT if they own any.
Scenario 3: Public sale ended, limited edition
Users can buy the NFT on the secondary market place.
Scenario 4: Pre-sale, upcoming public sale
A countdown is added before the release.
Scenario 5: Upcoming pre-sale and public sale
A countdown is added before the release.
I have made significant improvements to the listening section, featuring an easy-to-navigate soundwave accompanied by profiles and comment bubbles.
Design Specifications
What I gained from this project
Designing for diverse drop types and phases, as well as incorporating user-generated content like album cover themes, behind the music information, and collectors' comments, demanded meticulous analysis and iteration.
I developed comprehensive specifications to address all possible scenarios, deepening my understanding of complex user interactions. This experience emphasized the significance of accommodating edge cases while ensuring a seamless user experience.
Previous
Elevating the Premium and Generation experience
Next
