Development Progress Report #2 — Relay UI/UX Improvements
Since the launch of our public beta, we’ve been working hard to make ERC dEX a great place to trade tokens. Our primary focus has been on Aqueduct, our SDK that enables liquidity sharing and automated trading. We’re making great strides on that front and soon we’ll share the exciting ways that our partners are using Aqueduct to integrate with the 0x ecosystem.
We’ve also processed and analyzed the deluge of feedback from public beta users. We’ve interviewed dozens of users and learned more about what they like, what they don’t like, and what interactions are confusing or are points of friction. In today’s post, we’re going to cover some of the updates we’ve made to the ERC dEX trading platform to address user feedback.
New Onboarding Flow
Across the board, we’ve found that the initial friction of getting started on a 0x relayer is very high and results in a painful experience for users. While there are some technical hurdles that can’t be removed from dApps in general, we felt there was quite a bit we could do to lower the barrier to entry. The onboarding flow handles the following prerequisites:
- Setting up and connecting to a web3 provider
- Helping the user understand the concept of Wrapped Ether (WETH) and guides them through the process of converting ETH to WETH
- Covering the concept of ERC20 token allowances and assisting the user in setting allowances
- Advising the user on fee requirements
We’ve designed this tool as a drop-in “Widget” - we plan to open source this tool so other 0x relayers and third-party integrations who rely on the 0x liquidity pool can onboard users without re-inventing the wheel.
We encourage all ERC dEX users to run through the flow and provide us with feedback. The onboarding flow will automatically launch on your first visit to the application. You can also launch it from the help menu using the “Quick Start” option.
Navigation Menu Redesign
There are a few improvements to the navigation bar to improve initial discoverability and simplicity. Menu option labels (rather than standalone icons) eliminate guesswork on the part of new users.
ETH/WETH wrapping and the ‘Send’ functionality have been bundled into a unified wallet interface:
The “Wallet” dialog is a one-stop-shop for sending tokens, adjusting token allowances, checking balances, and wrapping/unwrapping ETH.
Pending Transaction Center
dApps in general suffer from a UX challenge — transactions submitted to the blockchain have to be mined, and this can take seconds or even minutes. 0x relayers like ERC dEX have several interactions that require transactions, including:
- Filling an order (market order)
- Canceling an order
- Setting a token allowance
- Send tokens
- Wrapping or unwrapping ETH
Up until now, we’ve handled these on a case by case basis with context-specific loading indicators. This is acceptable sometimes, but you’d often lose track of a pending transaction if you reload the page or navigate within the app.
The pending transaction center creates a unified pattern for dealing with delayed transactions. Any transaction will appear in the navigation bar under the “Pending” menu and the menu will contain contextual data about the transaction, including what the transaction was meant to do, it’s status (pending/failed/successful), and how long the transaction has been pending. Additionally, the pending transaction center maintains state between page reloads.
Trade History Price Change
The “My Trade History” panel now shows a percentage change, which represents your gain/loss on a particular trade relative to the current market price.
Share Your Feedback
Do you have ideas or suggestions? We’d love to hear from you! Get in touch with us on Slack or Telegram.
