In the past months I have been working on the AirSwap ERC-20 OTC trading feature, together with the AirSwap design team. In this case study I will highlight some of the design choices that were made during the design process.

Scope, objectives and goals

We started this project off with research. Together with Jason, at the time one of the UX designers at AirSwap, we interviewed the potential users of the OTC feature: NFT and web3 community members and managers. With those insights we've mapped out the users goals and the issues they face with their current solutions.

The (smaller) web3 communities:

1. Lack liquidity for their token

2. Have low visibility of open OTC trades

3. Lack a trusted source & have lot's of scam issues

4. Lack history of trades data

We also specified two types of users:

1. The maker, who wants to create OTC swaps and wants them to get taken.

2. The taker, who wants to find OTC swaps and take them.

From here we looked at where we can provide value and how we could solve the users problems with design, and started prototyping, testing and iterating the design.

Setting up an OTC swap

As we found out in prior research, we had solve one of the users goals which translated into the design challenge: how can we create visibility for open OTC trades on a public board. This flow starts at the 'maker' flow.

As maker of a OTC swap there are a couple of important things to define before listing a swap. The first is the choice between a private of public swap.

How it works

A 'for anyone' checked with 'publicly list' swap can be publicly seen and taken by all the 'takers'. This is for a user that wants to list a swap for anyone to be taken.

With 'publicly list' unchecked, the swap can be taken by anyone, but not seen. The maker would be able to share a swap link with only a specific group of community members for example.

The user also has the option to select 'for someone', where they can specify the counter party wallet that the swap is for. The swap would be private, and needs to be shared as a link to the taker.

Context & info

Because understanding the differences between these 3 could become confusing for new users, we decided to add some extra info in the interface. To give context on what these options exactly do.

Finding a OTC swap as a taker

One of the next challenges was to create the actual visibility of OTC swaps and a way to find the desired OTC swaps for takers.

At AirSwap our main objective is to give the user the best quote available. For this reason we integrated the OTC swaps into the core flow of finding a swap.

How it works

A user can search for a specific pair, where the system would always give back a quote based on the best rate available. Which could be a RFQ, LL or now also a OTC order.

For low liquidity tokens the system would always fall back on the available OTC swaps for that token. If the exact size matches, the user would land on the quote screen instantly. But if there is not an exact size available, the user would land on an overview of the pair and OTC swaps available close to the requested size.

If a user doesn't find a fitting quote for their size, they can 'create a swap' themselves from the OTC swaps available overview.

User tests

After finishing the high-fi prototypes, we user tested the designs and flows with the same people we interviewed. Using the user test method to give tasks to the user and observe to learn. The results were very positive. From here we kept on iterating till we had an MVP ready for desktop, mobile and developer hand-off.