NFT music marketplace: Driving a 16% transaction volume growth with engaging user flows
.svg)
Project overview
Music streaming services may be the most popular way to listen to music for millions of users worldwide, but they’re not a good deal for artists. These services pay only a fraction of a cent per stream. So, artists have to accumulate hundreds of thousands of streams to earn a mere thousand dollars for their hard work.
That’s why it’s so difficult for emerging artists to turn their passion for music into a decently paying job, all while creating authentic art instead of the art that sells. Our client, a startup based in Australia, decided to change that.
To that end, the company envisioned an NFT music marketplace where artists can sell Digital Pressings to their fans and get fairly compensated for their work. Music lovers, in turn, can support their favorite artists while building unique record collections. At the same time, all users would contribute to a more sustainable music industry that respects the environment.
However, our client needed a smooth, responsive, dynamic interface based on already prepared visuals and layouts to turn this idea into a successful marketplace. That’s why the company sought our expertise with React and eCommerce projects.
Services
Challenges
Our client came to us with an already-prepared layout for the marketplace, along with specific visuals and a color scheme. We were tasked with designing user flows that matched our client’s desired aesthetic. Some elements and interactive features required custom markup and advanced problem-solving.
At the same time, responsiveness and smooth performance were crucial for our client. So, we had to leverage React’s component-based development capabilities to build a modular frontend that gets dynamically updated without a lag and looks great on any device and screen size.
Finally, our client realized the existing UI/UX design would need some refining once the interface is built. So, we were tasked with conducting extensive user testing. We also proposed improvements to minimize time on task and increase the task success rate and system usability scale (SUS) score.
Based on our comprehensive discovery phase, we outlined the key business needs and technical requirements that guided our collaboration with the client:
Strategic business needs
01 Launch an NFT music marketplace for selling Digital Pressings of artists’ albums, EPs, and singles
02 Add a store for Smart Formats merchandise for artists
03 Ensure the album sales count towards music charts in key markets (UK, Ireland, Germany, Australia, etc.)
04 Reach a user engagement rate of at least 60% among both artists and fans
05 Secure a conversion rate for sign-ups of at least 15% within the first year
06 Achieve a monthly transaction volume growth above 10% within the first year
07 Limit the cart abandonment rate to 70%
08 Secure a net promoter score (NPS) of at least 70
Technical requirements
01 Design the user flows based on our client’s layouts and visuals and prepare wireframes and prototypes
02 Develop an interface for the NFT music marketplace based on the client’s layouts and visuals
03 Ensure the interface’s responsiveness across desktop, mobile, and tablet devices
04 Implement third-party sign-up/sign-in and email verification code support
05 Add two types of user profiles: artists and fans
06 Implement a music catalog and ensure it’s easy to navigate and search
07 Integrate the marketplace with payment processing systems and ensure support for cryptocurrency payments
08 Add a recommendation section to Digital Pressings’ pages
09 Implement a Smart Formats store for artists
10 Conduct user testing to identify sources of friction in the UI/UX and remove them
11 Reach a system usability scale (SUS) score above 85
12 Ensure a task success rate above 85% for the final version of the marketplace interface
13 Keep the average response time below 0.4 s under different request rates
14 Limit the Largest Contentful Paint (LCP) to 2 s
We’ll design your online store or marketplace to foster trust, facilitate checkout, and recover abandoned carts.
Talk to an expert.webp)
Solutions
We began the project by mapping out the information architecture and designing the user flows across the marketplace for both artists and fans. We then refined the user flows in iterations to make them as straightforward and smooth as possible.
Then, we got to building the interface itself. We opted for a combination of React and Redux to meet our client’s performance requirements and make the user experience truly smooth. The two technologies powered a fast, dynamic interface with their advanced component-based development capabilities. React and Redux also enabled us to build a fully responsive interface with device-specific user flow variations.
To streamline the frontend development process, we leveraged Storybook, a frontend workshop that enables building UI components and pages in isolation. Besides facilitating collaboration and communication with our client, Storybook also streamlined testing and documentation processes.
As for our client’s ideas for elements and animations, we used custom code to implement them whenever pre-built components wouldn’t cut it. As a result, the platform reflects the company’s brand identity — fun, youthful, and exciting — perfectly.
The NFT music marketplace comes with two user roles: artists and fans. Fans can purchase music directly from their favorite artists, build their record collections, and interact with other fans and artists via comments and reviews. Access to Digital Pressings can also be unlocked with physical objects — dubbed Smart Formats — sold by artists.
Artists, in turn, can use the platform to buy Smart Formats merchandise and create exclusive or non-exclusive Digital Pressings of their albums, EPs, and singles. Bonus content can include videos and images, along with audio files.
Following our extensive user testing and subsequent iterative refinements, the platform secured a 91 system usability scale (SUS) score, a 74 net promoter score (NPS), and an 89% task success rate. We also rigorously tested the interface’s performance, bringing the average response time to below 0.3 s and the Largest Contentful Paint (LCP) to 1.4 s.
Sign-up and sign-in
Users must create an account first to access the store’s Digital Pressings or publish their own. The registration process is seamless, as a sign-in link is automatically emailed to the entered address; no password or other information is necessary. Users can also sign in using their existing Google account.
Thanks to this simple, straightforward registration process, the conversion rate for sign-ups reached 17% within the first year of the platform’s launch.
Artist and fan profiles
The platform brings together artists and fans: artists create Digital Pressings, while fans buy and exchange them. Both user types have profiles to fill out right after sign-up. Each profile includes the user’s profile picture, first and last name, username, favorite genres, links to other social media accounts and personal websites, and a short bio and mission statement.
Artist profiles also display their released and upcoming Digital Pressings. Fan profiles, in turn, showcase the user’s Digital Pressing collection.
We created custom fields for filling out the profile to match the target audience’s expectations. Combined with carefully considering optional vs obligatory fields, it helped minimize the time on task and drive user engagement to 71%.
Music catalog
The Digital Pressing store is the platform’s core: this is where fans can browse available and upcoming releases and gain access to them. In line with our client’s wishes, we put the record’s cover front and center on each product card. We also added the optional exclusive and pre-order labels to the cards, along with a countdown for upcoming releases.
To make the browsing experience smooth, we added a genre filter to the store. Users can also sort Digital Pressings by price (highest to lowest or lowest to highest) or by date (recently added first).
We thoroughly tested the user experience for the store page, adding a couple of tweaks to improve the ease of navigation and task success rate. Our optimizations helped drive engagement to 71% and monthly transaction volume growth to 16%.
Digital Pressing pages
Every Digital Pressing has a dedicated page that showcases its contents, including the list of tracks and bonus content (tracks, images, and video content). Digital Pressing pages also include Behind the music and Credits sections so that artists can add background information about the Digital Pressing.
Every page allows fans who acquired the Smart Format key to listen to the recording and download content if authorized by the artist. The number of downloads is limited, too. Alternatively, fans can buy Digital Pressings directly via the platform using a credit card or cryptocurrency.
We ensured the Digital Pressing page streams the associated content smoothly and with minimum latency, improving user experience as a result. Fans frequently praised the seamless, intuitive access to the purchased content during the NPS surveys.
Smart Formats shop
This is where artists can browse the merchandise they can purchase from our client. Each item offers a unique access key that fans can scan using their smartphone’s NFC chip. This allows the fan to redeem their purchase, add the album or single to their record collection, and access its content via the platform.
Each Smart Format page showcases the available customization options and allows the artist to select the preferred quantity from a drop-down list. On top of that, the page contains a detailed product overview and shipping information, as well as a guide for managing fans’ digital experience.
We made the Smart Formats store easy to navigate with multiple sorting options, as well as categories and lead time filters. Thanks to the quick-to-grasp and comprehensive information on the product page, the platform’s monthly Smart Format transaction volume growth reached 14% within the first year.
Checkout and payment
The Smart Format store enables artists to pay for their orders immediately or get an invoice to be paid later. To streamline the checkout, we added an Express checkout via Google Pay, ShopPay, and Apple Pay. Alternatively, users can enter their payment details and save them for later transactions.
To speed up checkout, we added autofill for the shipping address fields. The platform automatically adds the postal code and city based on Google's address suggestions.
As for the checkout for Digital Pressings, it also comes with the Express checkout option. The integrated payment methods include credit cards and cryptocurrency.
The streamlined checkout experience allowed the platform to limit the cart abandonment rate to 65%, which is below the client’s goal.
Recommendations
Every Digital Pressing includes a recommendation section that showcases other Digital Pressings similar to the listed one. It may include other Digital Pressings from the same artist or recordings in the same or adjacent genres.
We iteratively improved the recommendation engine for this section, along with its layout and interactive elements (buttons, links). Our refinements increased the click-through rate for the recommended Digital Pressings by 19%.
Social features
To foster the community-building spirit of the platform, we implemented several social features, namely, comments, reviews, and ratings on the Digital Pressings’ pages. These features allow fans to leave their feedback and interact with the artist and other fans.
These features further drove user engagement on the platform, allowing it to reach 71% within the first year.
Tech stack
Impact
The marketplace’s responsive interface with smooth performance and user-centered flows allowed our client to reap a number of benefits, including:
We’ll build an online store that puts your value proposition front and center and removes friction from the customer journey.
Contact usTestimonials
The responsiveness, attention to detail and high-level communication from Darly Solutions was outstanding. Communication with the team was all online and was absolutely seamless. They were highly responsive, worked to tight deadlines and provided great feedback and communication throughout the entire project to ensure it remained on schedule and all quality requirements were being met. They exceeded all of our expectations, from design through to delivery.
LLC Darly Solutions's team performs well since the collaboration started. They are fluent in specific programming languages, they are also fluent in English, and they have a great response time. What is most unique and impressive about Darly Solutions is that everyone in the team is inherently communicative and understands the expertise of their respective fields. The team is very agile and can predict stress situations in which we work together to fix and maintain.
Darly Solutions' work so far inspires confidence, as they're skilled and trustworthy. The health platform is incredibly happy with their work. The team at Darly is communicative, responsive, and responsible. I’d recommend them to people looking to do more than build a simple little software.
By collaborating with Darly Solutions, there is a significant improvement in the project's quality of codes compared to their original codebase. They lead efficient project management and keep the client updated with their reports. They're a flexible team that delivers promising results. They don't just do as they're told, they actively participate in the design process, which is going to yield us a much better platform in the end.
Darly Solutions was able to develop the site with all functions running. The team was responsive throughout the engagement. They excelled at scheduling and delivered projects on the specified timeline. The whole team was a pleasure to work with. I am very glad that I entrusted them with my project, this is the best company for me!
The quality of their work is very high, and we get very good customer feedback on what our site looks like. They're very reliable and have a great overview of the technologies they're using. They meet our deadlines and are very accurate with their time estimations on a project. In addition, they're responsive and great with communication with a great command of English — it's very easy to talk to them. Moreover, we've integrated them into our development and scrum process, where we have daily stand-ups with their project manager and developers through Slack.
LLC Darly Solutions are highly skilled at UI/UX and follow very good engineering standards, and have been very professional in its approach to all the work to date (including the initial consultancy, which was the deciding factor). They have taken ownership of the work in way that demonstrates how much they value the work they are doing and consequently the work we are doing. I am gaining confidence that the decisions they make are good decisions and that this will result in a product that will exceed our initial expectations.
Darly Solutions developed the app in a quick manner, and the code quality was excellent. The professional team was committed to building a successful product. The code quality was good, and the app has been built in a little more than 1 month, which is a result I'm very happy with. They were laid back but professional at the same time.
Darly Solutions’ work helped my business tremendously. They were able to identify key areas for growth and improvement. The team was communicative and professional throughout the entire engagement. LLC Darly Solutions is a solutions-oriented vendor that drives results. They’re really professional and they know what they’re doing. The team knows how to identify my problems and solve them.
Related case study
Connect with us
.webp)
We are a tech partner that delivers ingenious digital solutions, engineering and vertical services for industry leaders powered by vetted talents.
