RiffChain is a web3 platform where musicians share their works and fans support them with cryptocurrency. Fans can contribute directly or by purchasing concert tickets that convert into digital support, while musicians are ranked based on total crypto received. This digital currency holds real purchasing power, empowering artists to fund new projects and events, and offering exclusive rewards to fans, thus redefining music patronage in the digital age.
-
Date:
March 21, 2023
-
Services:
Product
-
Client:
Daisy Yuan
-
Tags:
Branding, UI, Web3
Understanding the Problem
Our client envisioned a media-based ranking platform where creators could share their music, videos, or visual art and receive crypto-based support from fans. However, unlike most crypto-native platforms, RiffChain needed to be deeply accessible — not just for seasoned web3 users, but for anyone familiar with social content and fan interaction.
This meant that our design had to strike a delicate balance: convey the exciting, decentralized mechanics of blockchain, while still offering the familiarity and emotional engagement of a modern music or content platform.
Building the Visual Language
We started with the product website — a crucial touchpoint for both creators and fans. From the outset, we knew it couldn’t look like just another crypto dashboard. We created a visually immersive experience that integrated motion and subtle 3D effects, allowing users to feel the dynamic energy of a live ranking platform.
To keep the aesthetic grounded, we used gradients and soft-glow effects associated with the web3 visual language, but kept navigation and microinteractions anchored in familiar patterns from music streaming and fan economy apps.
Designing the Ranking Ecosystem
While the main product was the site, we also collaborated on a dedicated ranking platform and mobile app. Here, the user experience had to be crystal-clear. Fans could vote for creators, track leaderboard positions, and earn platform tokens — all without needing prior crypto knowledge.
We introduced a layered interface system, where casual users could engage without wallet setup, while advanced users could go deeper into web3 mechanics. This way, the platform could onboard a wider audience without alienating either side.
Solving the Web2 to Web3 Transition
The real challenge wasn’t just in building features — it was in solving user mindset transitions. Web3 often feels cold, complicated, and gated. We countered this with warm interface copywriting, contextual tooltips, and progressive disclosure — giving users just enough information when they needed it, never before.
More importantly, we embedded familiarity into every aspect of the journey: from onboarding flows modeled after fan apps, to video players and comment sections that feel like platforms users already trust.
Crafting with Motion and Media
Our motion design team contributed animated transitions that not only delighted users but also served functional clarity. From live leaderboard shifts to confirmation animations when voting or supporting artists, each micro-moment was carefully considered.
We also embedded video into the core site experience — showing behind-the-scenes footage of artists, animated explainers of how the platform works, and dynamic banners that change based on current rankings.
Final Thoughts
Working on RiffChain wasn’t just about creating a web3 music platform. It was about designing a cultural shift — turning complex, blockchain-driven mechanics into a smooth, emotionally resonant experience for real fans and real creators.
Our team handled everything from concept exploration and visual identity to detailed front-end development with live animations and media integrations. The result: a platform that introduces web2 users to the power of web3 without overwhelming them.