Seth Jenks

Chia Offer Builder

UI/UX

How do you create an intuitive interface for a new way of trading digital assets?

Offer Builder in the Seedling Wallet, with Offering and Requesting columns for XCH, tokens, NFTs, and fees.

The challenge

We needed an interface allowing any combination of assets to be traded for any other combination of assets that was also future-proof and intuitive to use.

A proposal, not a payment

In the Chia Wallet, there were two different interfaces for offers — one for XCH trades and another for token trading. With NFTs soon to be added to the mix, neither of the existing interfaces would work.

I took a first principles approach with Offer Builder. Offers are different from transactions in that you are only creating a proposal for a transaction. This needs to be evident in the interface design. The solution we came up with needed to be intuitive, instructive, and durable.

The problem Chia Offers solves

Counterparty risk is a common concern in transactions, involving the potential for attackers to take your assets. Traditional finance relies on trusted intermediaries like escrow services, which hold assets until transaction conditions are met. However, on the internet, an attacker may also control the escrow service. This common attack leads to significant asset losses.

Blockchain, specifically the Chia blockchain, addresses this issue effectively. Using a UTXO-style architecture and aggregatable BLS signatures, Chia enables users to propose transactions ("Offers") that others can accept. The blockchain executes these zero-trust transactions, delivering assets to respective wallets. This allows individuals and institutions to conduct counterparty risk-free transactions.

Creating an offer as quickly as possible was my north star for this feature.

Early concept for NFT offers, with a dense token-style trading layout.
Early concepts for NFT offers were based on token trading interfaces and seemed overly complex. The established interface pattern broke when trying to trade multiple NFTs or groups of assets for groups of other assets.
Two-column offer concept, one side for assets you own and one for assets you want.
An offer sets the conditions for both sides of a transaction, so I chose to create two columns. One for items you own and want to trade, and another for items you would like to trade for.
Offer builder with XCH, tokens, and NFTs visible at the top level instead of inside a menu.
This new paradigm for trading is unfamiliar, so it’s essential we make the user think as little as possible. Hiding asset types under a dropdown menu might be more minimal looking, but it complicates the mental decision-making needed to create a trade. Placing all asset categories at the top level allows users to immediately see their options and construct an offer.
Offer Builder with an OR operator between two possible requested assets.
The Offer Builder interface allows for multiple assets to be traded and could include logic. In this case an OR operator (in black) could execute the trade if either of the conditions are met.
Year
2023
Timeframe
6 weeks
Tools
Figma
A wall of earlier offer interface iterations.
Offers went through dozens and dozens of iterations before we came to the conclusion that the current way of thinking about offers wouldn’t work with NFT or multi-asset offers.
Offer Builder with a seven-day expiration on the offer.
The most recent offers interface (as of Chia Wallet 2.1.1) allows offers to expire after a period of time.
The original offers interface beside the updated Offer Builder.
The original offers interface and the updated Offer Builder.