Illiquid Labs NFT
Illiquid Labs
Branding, Website
OWWCO partnered with Illiquid Labs to completely overhaul the user experience and visual design of their peer-to-peer NFT trading platform.
Brand
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.
We 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 updated by the Illiquid Labs team.
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.
A few areas for improvement that owwco identified:
Listing items for trade was quite technical, there was opportunity to guide users through a flow.
The filters in the trade listing were cumbersome to use. It 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.
Platforms like Open Sea, Rawww, and Raffle were shortlisted for analysis which uncovered insights into features, user experience, and market positioning.
Opportunities
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.
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.
I 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.
A design system was created for brand styles, UI components, and icons.
Principles
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.
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.
Component Library
The smallest UI elements are called “atoms” (i.e. icons, labels). Multiple “atoms” are assembled together to create “molecules”. Some examples of “molecules” are:
OWWCO team conducted live user tests using Zoom and Figma. These sessions allowed the team to validate (or invalidate) specific tasks, actions, and workflows.
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.
Findings Summary
A fully responsive web NFT tradining platform, a modern and scalable brand and design system, and a really happy client!
“I would 100% recommend. If someone is weighing up between going with a studio that hasn't been used before in their circle versus Owwco, it's a very, very easy choice.”
Jack
Co-founder, Illiquid Labs
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.