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. Learn more about Illiquid Labs by reading their lite paper.
‍
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. User’s were able to connect their wallet, explore trade listings, and send NFT’s to specific addresses using the Airdropper.
A few areas for improvement that UX Cabin identified:
• Listing your item for trade was quite technical, there was opportunity to guide users through a flow.
• The filters in the trade listing were cumbersome to useIt was difficult to understand what users wanted to trade for (NFTs or Crypto).
• The existing details for NFTs were limited, which made it difficult to submit a counteroffer.
‍
‍
‍
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. Additional colors were defined for buttons, statuses, empty states, and other interactive elements.
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. The illustrations would remain in the current style and be drawn by the Illiquid Labs team.
‍
‍
‍
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 UX Cabin team was able to continue designing the full set of features without being slowed down by the visual design explorations.
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. This would ensure that the team wasn’t deviating from the established guidelines.
‍
Brand Styles
The logo, color palette, and typography are the most basic elements that communicate the Illiquid Labs brand identity.
‍
‍
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”. Some examples of “molecules” are:
- Buttons & Selectors
- Inputs
- Icons
‍
Molecules are put together to create more complex components called “organisms” (ie, cards). The idea is that you have a series of building blocks that grow in complexity.
‍
‍
Principles
Components are “special” in that they contain a “master” and an “instance”. If the master component is updated or changed, every single instance of that component being used across the designs will be automatically updated. This saves a lot of time!Some examples of more complex components (called “organisms”) are:
- Top Navigation.
- NFT Cards
- The Filter SidebarModals for Editing Listings
‍
‍
‍
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 and shared their screens over Zoom.
- The Think-Aloud Protocol, which asks participants to think out loud while completing tasks, 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.
Tasks
- Create your accountView your NFT collection associated with your wallet
- Find 1 tradable offer for Bored Ape Yacht Club.
- Make an offer on the Bored Ape Yacht Club listing.
- Find your outstanding trade offerCreate a new NFT trade offer for 3 of your Crypto Punks.
- Find your current trade listing and accept the counteroffer
‍
‍
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 and appreciated the ability to communicate in-app.
- 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 so that users can make more informed decisions about what are “even trades”.
- 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 (who declined, assets offered, etc.) 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!
