Spinamp

Innovating intuitive

Web3 music discovery and purchase experiences

Innovating intuitive

Web3 music discovery and purchase experiences

Innovating intuitive

Web3 music discovery and purchase experiences

Innovating intuitive

Web3 music discovery and purchase experiences

Music

Web3

Monetization

Collecting

Music

Web3

Monetization

Collecting

Music

Web3

Monetization

Collecting

Music

Web3

Monetization

Collecting

ROLE

Product Designer

Product Designer

TIMELINE

From May 2023
to June 2024

From May 2023 to June 2024

TEAM

The Spinamp team began with around five dedicated developers (both front-end and back-end) and a Project Manager. As the year progressed, our team evolved to meet the dynamic needs of our platform.

The Spinamp team began with around five dedicated developers (both front-end and back-end) and a Project Manager. As the year progressed, our team evolved to meet the dynamic needs of our platform.

BRAND

Spinamp is not just another music platform. It is an innovative technology that unified blockchain-based music. It offers a swift, intuitive way to explore, curate, share, listen to, and collect an ever-growing library of Web3 music. The interface seamlessly connects enthusiasts with artists across multiple networks, simplifying the discovery,  and enjoyment, making the discovery and purchase of music NFTs a breeze.

Before you dive it,

Hit play to experience the vibe while you read

Those are the songs I've personally collected.

Hope you will enjoy them.

Before you dive it,

Hit play to experience the vibe while you read

Those are the songs I've personally collected.

Hope you will enjoy them.

Before you dive it,

Hit play to experience the vibe while you read

Those are the songs I've personally collected.

Hope you will enjoy them.

Before you dive it,

Hit play to experience the vibe while you read

Those are the songs I've personally collected.

Hope you will enjoy them.

Users

Supercollectors

Serial collectors and investors from the Web3 world who love music. They collect both rare and common editions and are potentially interested in financial returns as well.

Serial collectors and investors from the Web3 world who love music. They collect both rare and common editions and are potentially interested in financial returns as well.

Music Artists

Web3 musicians who choose to put their music on-chain to increase their income and see their music valorised and rewarded.

Web3 musicians who choose to put their music on-chain to increase their income and see their music valorised and rewarded.

Web3 Music lovers

Users from the blockchain world, accustomed to using cryptocurrencies, who love music and the possibilities that blockchain offers them.

Chapters

Chapters

Jump straight to the topic you are interested or keep scrolling

Jump straight to the topic you are interested or keep scrolling

Design system

Design system

When I joined the team, I noticed a lack of a cohesive design system. One of my initial tasks, alongside designing new features, was to establish a design system based on the current design, proposing minor improvements (touch area dimensions, spacing, etc.).

When I joined the team, I noticed a lack of a cohesive design system. One of my initial tasks, alongside designing new features, was to establish a design system based on the current design, proposing minor improvements (touch area dimensions, spacing, etc.).

Efficient Workflow Design

With a ready design system, the initial wireframing and consistency of new functions accelerated dramatically. This made it easy to preview results, evaluate them, and discuss development timelines with developers, determining whether new components were necessary or if existing ones could be utilised. 

We also designed many custom icons, often music-themed, to enhance brand recognition. 

We also designed many custom icons, often music-themed, to enhance brand recognition. 

Primitives & Themes

A beloved feature of our app is the presence of themes. Everyone loves a good theme, right? Being able to preview and prevent any potential theme-related disasters is a must. Thanks to Figma variables, switching between themes is as easy as a double click thus it makes the whole prototyping a breeze.

Default theme

In our big June release, we gave the default theme a fabulous makeover. Every release is a chance to redesign and improve various components and pages, keeping things fresh and exciting.

In our big June release, we gave the default theme a fabulous makeover. Every release is a chance to redesign and improve various components and pages, keeping things fresh and exciting.

Overall, we took the opportunity with each release to redesign and improve various components and pages. 

Overall, we took the opportunity with each release to redesign and improve various components and pages. 

Information Architecture

I also visualised all our product pages through an information architecture to evaluate potential improvements or group pages that are currently distant but potentially semantically closer. 

Collect on mobile and purchase flow

Collect on mobile and purchase flow

One of the trickiest missions last year was nailing the mobile collection and improving the overall purchase flow. We had to consider numerous scenarios and issues, but we just love good UX challenges that make us grow and improve further.

One of the trickiest missions last year was nailing the mobile collection and improving the overall purchase flow. We had to consider numerous scenarios and issues, but we just love good UX challenges that make us grow and improve further.

Passkey signup

Firstly, we decided to facilitate registration by implementing a Passkey login. This ensured that future purchase experiences wouldn't require connections to external apps or systems that often present interruptions, disrupting the buying experience. 

Firstly, we decided to facilitate registration by implementing a Passkey login. This ensured that future purchase experiences wouldn't require connections to external apps or systems that often present interruptions, disrupting the buying experience. 

Moreover, registration on Spinamp isn't mandatory but should be presented as something to encourage for a more complete experience.


Only after this design process, with all its challenges outside the normal "email registration" schemes, did we move on to designing the mobile collection experience. 

Moreover, registration on Spinamp isn't mandatory but should be presented as something to encourage for a more complete experience.


Only after this design process, with all its challenges outside the normal "email registration" schemes, did we move on to designing the mobile collection experience. 

Flowchart

The first step was to design a flowchart that gave us a perspective of what we were facing and what the main differences would be between mobile and desktop design, considering all the technological differences. Once this flow was validated, we converted it to a more hybrid flow that included high-quality wireframes. 

Collect modal

Meanwhile, for various reasons including development timelines and UX considerations, the UI of the modals and purchase screens evolved to clearly divide different information, clustered by category. 

Wireflow

Obviously, I had to consider all possible issues: sold-out NFTs, insufficient funds to complete the purchase, unavailable or excessive quantities, and other problems, and include them in the design file. 

Obviously, I had to consider all possible issues: sold-out NFTs, insufficient funds to complete the purchase, unavailable or excessive quantities, and other problems, and include them in the design file. 

Enhanced Payment System

Our system became more powerful as it allows users to pay with our in-app wallet whilst effortlessly transferring assets to their own storage wallet. This seamless integration enhances user control and flexibility in managing their digital assets.

Wallet page

With the introduction of Passkey, we were able to develop an integrated wallet. We seized this opportunity to implement a wallet page, allowing users to manage their crypto and utilise transfer capabilities.

With the introduction of Passkey, we were able to develop an integrated wallet. We seized this opportunity to implement a wallet page, allowing users to manage their crypto and utilise transfer capabilities.

Results

Thanks to this functionality, we managed to reduce song purchase times to less than 15 seconds, whereas previously, if everything went well, it took at least a minute due to having to exit the app. 

Thanks to this functionality, we managed to reduce song purchase times to less than 15 seconds, whereas previously, if everything went well, it took at least a minute due to having to exit the app. 

Collect on mobile and purchase flow

Collect on mobile and purchase flow

Brief

The goal was to find a more engaging and active way to discover new songs and artists, creating a potential feed capable of including all ongoing news dedicated to you, making it satisfying to use on both mobile and the web. 

The goal was to find a more engaging and active way to discover new songs and artists, creating a potential feed capable of including all ongoing news dedicated to you, making it satisfying to use on both mobile and the web. 

Final result

After a marathon of defining the product, UX, and finally UI of how this feed was supposed to look. Initially thought of as the top part of our explore page, similar to a large banner, it instead became a dedicated tab in our app. 

After a marathon of defining the product, UX, and finally UI of how this feed was supposed to look. Initially thought of as the top part of our explore page, similar to a large banner, it instead became a dedicated tab in our app. 

The idea was to present songs, artists, playlists, and other content one by one, encouraging interaction with the card. Your interaction with a card (for example, following an artist) or with a specific refill card will impact the generation of your feed. 

The idea was to present songs, artists, playlists, and other content one by one, encouraging interaction with the card. Your interaction with a card (for example, following an artist) or with a specific refill card will impact the generation of your feed. 

Upcoming songs

It was also intended to become a hub for upcoming or just-released songs, inviting people to get notified for songs not yet available for collection. 

It was also intended to become a hub for upcoming or just-released songs, inviting people to get notified for songs not yet available for collection. 

Interaction

The number of possible interactions with a song is multiple, but we didn't want to overload the UI. We, therefore, opted for a dynamic UI that allows most interactions only after you've added a song to your favorites. Then, a popup lets you add the song to playlists, follow the artist, buy the song, or share it—all without stopping the music.

Next steps

Based on user metrics, we refined the onboarding experience to encourage users to play songs immediately upon launching the product and improving the customization. We also enhanced the visual design of the artist cards to create a more engaging experience.

(The image does not show the complete new flow)

Based on user metrics, we refined the onboarding experience to encourage users to play songs immediately upon launching the product and improving the customization. We also enhanced the visual design of the artist cards to create a more engaging experience.

(The image does not show the complete new flow)

Launching video

Launching video

Collaborative playlists

Collaborative playlists

Our mission was to let people build the perfect playlist together. Users can add songs, upvote them, and suggest new ones.

Our mission was to let people build the perfect playlist together. Users can add songs, upvote them, and suggest new ones.

The flow is designed to make collaboration easy, whether you're adding a song or managing collaboration modes.

At the same time, users should be able to listen to a song, evaluate it, recommend it, or vote for it to make it stand out in the suggested section and be considered by the creator. 

The flow is designed to make collaboration easy, whether you're adding a song or managing collaboration modes.

At the same time, users should be able to listen to a song, evaluate it, recommend it, or vote for it to make it stand out in the suggested section and be considered by the creator. 

From a UX perspective, I wanted the addition and suggestion of songs to be simple, natural, quick, and fun

Multiple possibilities

The main UI challenge was to deal with different views - that of the playlist creator, collaborators, and users - without overwhelming the playlist view. We saw this as a golden opportunity to make things better. All interactions with a song and the playlist, and the various responsibilities, had to be clear. 

Daniele is an awesome designer to work with. He genuinely embodies our users, creating thoughtful designs with passion for our product. He has a strong sense of ownership and gets work out fast whenever needed.

Aidan Musnitzky

Founder & CEO of Spinamp

2024

Final considerations

Final considerations

UX Challenges

Even if it sounds cliché, the main goal was to converge the complexity of blockchain technology into a simple, clear, and fun experience, on par with other music platforms. All while encouraging a satisfying experience of listening and interacting with music and artists to promote purchases naturally as a form of support rather than a "market". I tried to make the technological aspect invisible, both through the use of clear, simple, and fun terminology, harnessing the power of blockchain and crypto in service of music, not the other way around. I wanted my work to be, humbly, inspiring for the sector, to facilitate adoption and, above all, to use good UX design to foster the connection between artists and listeners. The challenge was, of course, primarily to understand the complexity and potential of the technology in question and turn them into opportunities for end users 

UI Challenges

By giving users the ability to customise their theme and having an interface full of cover artwork, I had to shift my thinking. I couldn't rely on colors anymore, so I started focusing on spacing, functions, and contrasts.  This was a great lesson that made me think outside the box—or should I say, outside the color wheel. Even the fonts of different themes presented very different kerning and widths, further constraining me to prevent problems due to this length. 

Contact

Let's get this project started!

Prefer to talk?

You can also find me on:

Contact

Let's get this project started!

Prefer to talk?

You can also find me on:

© 2024 Daniele Franchi - VAT/Partita IVA: IT02441280449. All rights reserved
© 2024 Daniele Franchi - VAT/Partita IVA: IT02441280449. All rights reserved
© 2024 Daniele Franchi
VAT/Partita IVA: IT02441280449.
All rights reserved