Case Study
Illiquid Labs NFT Marketplace
A beautiful, one-of-a-kind NFT marketplace for peer-to-peer trading, raffles, and loans.
Platform
- Responsive Website
- Desktop, Tablet, & Mobile
Deliverables
- UX Research & Testing
- UX/UI Design
Industry
- Web3
- NFTs & Crypto
Timeline
- Start: June 2022
- End: August 2022
Summary
UX Cabin partnered with Illiquid Labs to completely overhaul the user experience and visual design of their peer-to-peer NFT trading platform.
Background
The NFT ecosystem on Terra and Cosmos is in its infancy, which means that there's potential for innovation and growth. Illiquid Labs set out to create a toolbox for safe exchange, management, and analysis of illiquid assets. Catering to the needs of both builders and users would help drive the adoption of $LUNA.
Objectives
- Make NFTs accessible to a wider audience with a flexible and easy-to-use platform
- Become a one-stop-shop for all things NFT
- Update the visual language of the brand to be modern, clean, and fun
Existing Platform
Illiquid Labs had a proof of concept version of their peer-to-peer trader running. Users were able to connect their wallet, explore trade listings, and send NFTs to specific addresses using the Airdropper. A few areas for improvement that UX Cabin identified: listing items for trade was quite technical, the filters were cumbersome, and existing NFT details were limited.
Competitor Research
Platforms like Open Sea, Rawww, and Raffle were shortlisted for analysis which uncovered insights into features, user experience, and market positioning.
Takeaways
- Existing applications focus on specific use cases
- Existing applications have features that are limited and don't offer much flexibility
- Existing applications cater to an audience with a high level of technical understanding
Opportunities
- Become a one-stop-shop for all things NFT
- Give users more control over their NFT listings and offers (send, receive, counter, etc.)
- Guide the user through important and technical workflows (such as listing an item on the marketplace)
Design
The Illiquid Labs brand was fun and retro, but it was limited. The color palette contained only primary colors and the typography had limited weights. The evolution of the brand was anchored around the existing 8-bit logo and artwork to keep the feel of "web3" while also making it feel modern and fresh.
Brand
The UX Cabin team expanded the color palette with primary, secondary, and neutral brand colors that would give Illiquid Labs more opportunity for expression. Inter was chosen as the typeface due to its modern look, the number of weights it offers, and its contrast to the pixelated look of the logo.
Product Design
The early phase of the design process relied on low-fidelity wireframes and prototypes to validate decisions. Updates to the brand's visual language were happening in tandem with these early explorations.
The wireframes were updated to be high-fidelity to give the Illiquid Labs engineering team a headstart for high-level implementation. The final delivery consisted of each feature being broken down into desktop, tablet, and mobile.
Principles
- The product should look and feel like it belongs in the web3 space
- Empower the user to make the right decision with clear and focused design
- Create a flexible but familiar user experience across desktop, tablet, and mobile
Design System
A design system was created for brand styles, UI components, and icons. Each element was built to take full advantage of auto-layout, variants, and properties within Figma.
Brand Styles
The logo, color palette, and typography are the most basic elements that communicate the Illiquid Labs brand identity.
UI Component Library
The design system was modeled after Brad Frost's "Atomic Design". The smallest UI elements are called "atoms" (i.e. icons, labels). Multiple "atoms" are assembled together to create "molecules". Molecules are put together to create more complex components called "organisms" (ie, cards).
Usability Testing
The UX Cabin team conducted live user tests using Zoom and Figma. These sessions allowed the team to validate (or invalidate) specific tasks, actions, and workflows.
Goals
- Validate the most important actions within the platform
- Learn what users expect from an application like Illiquid Labs
- Identify confusing or frustrating areas of the experience
- Recommend future areas to explore and problems to solve
Methodology
- Qualitative research was conducted in one round over a 3 week period
- Usability testing sessions were moderated over Zoom
- Participants completed 7 tasks in 45-minute individual sessions
- Participants interacted with low-fidelity prototypes within Figma
- The Think-Aloud Protocol was used to understand their perception of the product
- Task success rates were calculated using a usability analysis approach
- Each session concluded with post-test questions for additional feedback
Findings Summary
- Participants found the newly designed interaction flows for listing items and submitting counter offers to be intuitive
- Participants responded positively to the concept of private peer-to-peer NFT trades
- Participants were not easily able to determine where they could view their outstanding trade offers
Key Recommendations
- Provide additional information about the NFT that people offer on the site for trade
- Display incoming offers on the Trade page (in addition to the Dashboard view)
- Add the ability to create a trade offer or loan offer directly from the NFT collection page
- Bring more clarity to the details of a counteroffer when viewing your listed items
Final Results
A fully responsive web NFT trading platform, a modern and scalable brand and design system, and a really happy client!
