project
Lonely Listeners
Lonely Listeners Club is a large-scale Solana-based NFT collection by Sol Music.
It was launched in partnership with Magic Eden Launchpad in August 2022 to fund the development of Vulume, a Web3 music NFT platform featuring a Launchpad, Music Analytics Tool and more.
Project Site
↗
Year
2022
Client
Sol Music NFT
Role
UI/UX Designer
Product Manager
project
Lonely Listeners
Lonely Listeners Club is a large-scale Solana-based NFT collection by Sol Music.
It was launched in partnership with Magic Eden Launchpad in August 2022 to fund the development of Vulume, a Web3 music NFT platform featuring a Launchpad, Music Analytics Tool and more.
Year
2022
client
Sol Music NFT
role
UI/UX Designer
Product Manager
Introduction
Overview
Over four months, I collaborated with the marketing team to oversee the development of Sol Music's fourth NFT launch, The Lonely Listeners Club.
Our goals were to grow the user base and collect user data for Vulume, introduce web2 music fans to web3, acquire community funding for pre-seed fundraising, and position Sol Music as the top music NFT project on Solana.
Our agile/scrum workflow prioritized rapid deployment and user-testing, and I collaborated with marketing and development teams in 1-2 week sprints.
Development
Workflow
Branding
Logo
Type & Color
Messaging
UI/UX Design
Initiation
Task & User Flow
Sitemap
Wireframe (Lo-Fi)
Prototype (Hi-Fi)
Launch
User Feedback
NFT
Art Direction
Design
Campaign
Branding
Logo
I designed the logo and overall branding system for LLC.
The main objective of the Lonely Listeners Club (LLC) branding was to provide an identity for Vulume's user base, which was mainly North Americans and Europeans between the ages of 18-30.
Based on user data collected months before the LLC project, the branding targeted a younger audience with a fun and childish look.
Keywords
- Clean
- Cartoony
- Edgy
- Simple
Type & Color
Heading
TRASHHAND
Subtitle
Raleway Bold
Body
Inter Regular
Logo
#000000
#FFFFFF
#ff00ea
NFT
#ffeb68
#5ddfd8
#ccaeff
#f8d8a5
#ff6cc2
#ffb746
#ffdada
#6affa7
#dff1f4
#fff8da
Website
#000000
#FFFFFF
#9c9c9e
#18111c
#1f1a24
#280f3b
#5419ac
#9474ff
#979dbb
#1ed761
Messaging
I coordinated with the marketing team to establish an effective messaging system and designed promotional graphics.
The material was promoted on all the company's social media accounts and communication channels, primarily Twitter, TikTok and Discord.
.png)
.png)
UI/UX Design
Summary
I created and maintained project sites for Sol Music, including the Lonely Listeners Club (LLC) site, which provided information on NFT product launches. These sites were crucial touchpoints for users to research and gather information before purchasing an NFT on mint day.
In collaboration with the CEO, I created the LLC site backlog, and following the Agile/Scrum methodology, the sites were designed and launched in two-week sprints.
The goals for the LLC project site were to clearly outline project objectives, maintain accessibility for an international audience (AODA compliant), be modular and adaptable to meet user needs, have an identifiable music-related theme, be engaging and colorful, and maintain consistency with company branding.
The Challenge
Problem
Not enough investor interest prior to launch. Less interest = less conversion.
Affected
Artists, investors and Sol Music.
Reason
No product website was created so investors don't have clarity in what they were investing in.
Design Process
Following the 5 Step Design Thinking Model. Iterative and Agile.
01 Empathize
Research & Discovery
I gathered inspiration for the website's layout to create a playful and juvenile feel in line with the Lonely Listeners Club brand.
To avoid cluttering UI with copy, I found most information was hidden in modals rather than individual pages.
Inspiration was taken from Spotify for a music-related design, and also looked at existing NFT project sites and popular Solana apps to understand what investors were used to in the web3 space.
Spotify - Desktop APP UI
Dark theme, vibrant green accents. Large image in full width header. Categories are divided in grids; smaller grid=less important.
Header features overline text, H1, body and subtext. Table used for displaying lists.
Magic Eden - Popular Solana NFT Marketplace
Dark theme, rounded corners, purple and pink accents. Emphasis on chips, cards, and modals.
Phantom - Popular SoLana Wallet
Dark theme, rounded corners, purple and indigo accents.
DEGODS- Popular NFT Project Site Splash Image
Full page width and height. Emphasis on art and lore as a selling point of the collection.
02 DEfine
Vision
Seamless UX
Familiar and navigation for easy information access.
Ecosystem Integration
Tailor the website to fit seamlessly into the Solana ecosystem and establish credibility with the investor community.
Visually Music Related
By emulating the UI of Spotify, users can easily recognize the project's connection to the music industry.
Art Focus
A splash page with a prominent illustration highlights the project's artistic focus. Quality art boosts collector traffic and engagement with the project.
Lonely Listeners Hub
A dedicated zone for frequent project updates that are pulled from communication channels. The FAQ section is regularly updated with relevant information leading up to the mint date.
03 Ideate
Task & User Flow
The next stage in website development was creating task and user flows.
I created flow charts to outline user goals and minimize any issues.
These charts streamlined the sitemap and helped determine the necessary number of pages for the app's information architecture.
Tools
Figma
Task Flow
User Flow
03
Sitemap
After collaborating on the flowcharts, I created a sitemap that was aligned with our product vision and our users' needs.
Tools
Figma
Sitemap
04 Prototype
Wireframe (Lo-Fi)
I developed cross-platform low-fidelity wireframes that utilized modals for content display instead of separate pages.
The layout was kept simple with only blocked-in sections to establish the IA and maintain a uniform and cohesive look.
Tools
Figma
04
Prototype (Hi-Fi)
In this stage, I followed Google's Material Design 2 to improve my low-fidelity wireframe and create a high-fidelity wireframe.
The goal was to visualize the flows and use as a guide for development. I ensured each page met accessibility guidelines and had a 3:1 contrast ratio for readability.
After running a prototype and conducting user testing with a small Sol Music community group, I made necessary adjustments before proceeding with development.
Tools
Figma
Photoshop
05 Testing
Launch
I developed and launched the LLC project site, ensuring it was easy to read, engaging, accessible, and provided routing to the company's social media links.
The goal was to develop the website according to the prototype and iterate upon the design.
The site was marketed through company socials to over 50,000 potential NFT buyers.
Tools
HTML
CSS
JavaScript
Webflow
Project Site
↗
Desktop
Mobile
05
User Testing
Based on feedback from stakeholders and users, I created a backlog to address the lack of relevant content and visual inconsistencies.
All revisions were promptly addressed and resolved.
What Worked
Easy to scan.
Simple to follow.
Looks like Spotify UI.
UI design supports user’s mental model of existing dashboard tools and launchpads.
Modular design enables easy feature integration.
What Didn't
Needs more visuals and sneak peeks of the NFTs.
More motion. (Auto-play trailers were added)
Mobile splash image was weirdly cropped and static.
Issue with margins at large breakpoint.
Design will be outdated as Spotify UI gets updated and web3 design trends change.
NFT
Art Direction
As Creative Director at Sol Music Ltd., I led a small creative team consisting of two others to develop the NFTs.
A small team allowed for efficient communication with timely execution of sub-projects.
Documentation of the full creative process was maintained to ensure clear and focused communication for deliverables.
Design
The creative process began with the design of the NFT artwork, followed by the development of teaser trailers, social media content, posters, and other creative work for the "Lonely Listeners Club".
Full Collection
↗
Initial design of LLC's main character, 'OG Listener'.
'Skulled Skelly', an iteration of the 'OG Listener' design.
