WrapETH


Product
Designer



WrapETH is a fee-free decentralized exchange.

My task was to design the UX pattern and UI for atomic swap of one token pair (wETH and ETH)


  Backstory



An atomic swap is a self-enforcing hash timelock contract (HTCL) contract that creates automated execution of paired digital assets exchange once predetermined rules are met. The concept of atomic swap was introduced the first time in 2013 by Tier Nolan as a basic principle for cross-chain cryptocurrency swaps. Today, it is becoming more popular among crypto natives with the key projects such as Uniswap, Kyberswap and 1Inch exchange. Uniswap alone has a total trade volume of almost 1billion USD and more than 50,000 unique users.

In light of Decentralized Autonomous Organization (DAO) popularity, there is an increased usage of a specific token pair like Ether (ETH) and Wrapped Ether (wETH) in the DAO operation for voting and staking. Raidguild, a decentralized design cooperative, plans to launch a web app for this specific purpose.





  Challenge



Although atomic swap is considered a novel product for many, most crypto native users are familiar with it. This means that the design must take into account the psychological prerequisite of the users as they could develop preference for UX patterns merely because they are familiar with the current pattern and not because it is the most optimized one. With this understanding in mind, I start dissecting what matters most to users of WrapETH and sketch wireframes that could elevate the barrier and increase usability.



  The Wireframe




The aim is to design the platform that enables users to ‘wrap’ and ‘unwrap’ tokens as effortlessly as possible. I have experimented on this by drafting several design patterns. The goal to discover the pattern which allows the shortest path to achieve the task (for example, with the least number of clicks) while making the atomic swap interface become more intuitive.




  Prototype



After several iterations, the final design introduces several UX improvements to the interface as followed.



Micro onboarding flow

In order to make the interface more intuitive, users need to grasp the big picture quickly - what is the goal and how to reach it. Therefore, a micro onboarding flow has been integrated into the application to help clarify every step of the action. I chose to explicitly use the word ‘step’ to imply the order of actions.

Step 1: Select the token to wrap/unwrap
Step 2: Enter the amount
Step 3: The amount you’ll receive









An (almost) Homograph problem

The spelling of ‘ETH’ and ‘WETH’ are almost identical. Users will experience time and fund lost by simply selecting wrong tokens to swap. In order to make sure that users are able to differentiate between two tokens at the first glance, the small underline under the ‘w’ is added together with the reduction of text size.









To dropdown or not to dropdown

This has been a tough decision because most users are familiar with dropdown list simply because most atomic swap applications are using them. But for one token pair atomic swap, the use of dropdown is an overkill. Instead of dropdown, the toggle UI is used so that all choices are revealed and users can accomplish the task with one click.









Form label utility

Adding an auto-display ‘max’ amount of token available in users’ wallet enables them to complete the task with less time. Users can stay inside the app from start to finish and do not need to leave to manually check the amount in their wallet.