Building a Better Trading Experience for Web3 Gamers

Unlike traditional games, the blockchain technology used in web3 gaming records ownership of weapons, land, cards and chess pieces in an open ledger, shattering the conventional model of centralized inventory storage. Investors, entrepreneurs, and early web3 gamers are betting that this open, decentralized version of ownership will boost spending, engagement, investment, and in-game employment, propelling web3 gaming into a prominent category within the $400B gaming industry. However, this new model also presents an interesting set of UI design challenges and possibilities.

A new gaming ecosystem

An important effect of blockchain-based ownership is that it enables and incentivizes a rich ecosystem of third-party service providers to form around successful games. Instead of just one centralized trading venue provided by the game publisher, multiple marketplaces can compete for customers and trading volume with richer product context, better user experiences, and different pricing structures. Players benefit when services like game asset rentals and game analytics exist independently of the game publisher, leading to a more open and dynamic game ecosystem and more fun to be had.

AQUA, a web3 gaming marketplace, is one such third-party service provider. AQUA removes the need for individual game publishers to develop their own standalone marketplaces, letting them focus instead on building great games. Central to AQUA’s marketplace is the trading user experience – how players buy gaming assets and list them for sale. In partnering with Sean Ryan and John Cahill, AQUA’s founders, our goal was to create a significantly better trading experience for AQUA’s customers, surpassing what is currently available on other marketplaces.

The design challenge 

A key concept in web3 game trading is the 'orderbook.' Unlike typical marketplaces, copies of a specific gaming asset, such as a weapon or trading card, are listed at a range of prices and in different currencies. This variability is caused by many individual humans listing assets for sale (instead of one central game publisher). At any moment in time, there can be thousands of copies of a particular asset for sale across a wide range of prices and in multiple currencies. This collection of listings is the ‘orderbook’ for that game asset.

Why multiple currencies? ETH has become a pretty standard cross-game, cross-chain currency, so there are often many listings of a particular asset in ETH. Web3 gaming blockchains also typically have their own universal currency (i.e. IMX), and individual games can have one or more game-specific currencies (i.e. GODS in Gods Unchained). Because of this mix of currencies in the orderbook, it can be cumbersome for players to purchase multiple copies of a game asset at the cheapest total price available. Existing marketplaces typically require players to first select the currency they want to spend before making any purchases and limit the player to one currency per transaction.

TheGP’s team worked with Sean and John to define a set of design goals for the AQUA trading UX:

1. Make the orderbook highly visual and understandable to players, showing price and currency distribution clearly.

2. Help players purchase multiple copies of an asset at the cheapest total price by enabling multi-currency bulk orders.

3. When listing an asset for sale, support the player in deciding the best quantity, price and currency to list in.

4. Manage the player’s expectations well during asset purchases or sales.

Our design solution

Goal #1: Make the order book highly visual and understandable to players

For some context—AQUA offers multiple game-specific marketplaces. They each include search, filter, sorting options, and a paged view of game assets currently listed for sale. The example shown above is the AQUA marketplace for Gods Unchained, a popular web3 trading card game.

Clicking on any Gods Unchained card in the search results takes you to the detail page for that card. Here the player can see detailed card information, how card price and game performance of that card have varied over time, and can access the card trading UI. 

One of the most interesting differences between traditional e-commerce marketplaces and web3 gaming marketplaces is that a specific game asset is listed for sale by many different people at different prices and in different cryptocurrencies. This means that each card in Gods Unchained can have an order book with thousands of copies of a given asset, rising in price from that card’s floor price to many multiples of that price. 

One of our design goals for the AQUA trading experience was to make that price distribution and currency mix much more visual and understandable to the player. In the example above, you can see how more and more of the orderbook is revealed as the player increases the number of cards in their order. Each bar in the graph represents a card listed for sale. The cheapest cards are on the left and the colored bars represent listings in different currencies.

When a player understands the composition of the orderbook well, they can make smarter decisions about what quantity of a given card to buy and what currencies they need to spend to get the best total price.

Goal #2: Help players purchase multiple copies of an asset at the cheapest total price

In the example above, we are using the currency toggle buttons located just below the graph to enable/disable which currencies we want to spend for this order of 80 cards. On the left, we just have ETH enabled. Cheaper listings in other currencies are skipped and the order would cost an equivalent of $10.83. As we enable IMX, GODS and USDC in the center and right images, we are now able to access cheaper listings in those currencies in real-time, so the total price for 80 cards comes down to $8.22. Multi-currency orders allow players to purchase the cheapest cards listed, not just the cheapest cards listed in one selected currency. With this feature, players typically save 20-30% per order due to the variability in floor prices between currencies.

Goal #3: When listing an asset for sale, support the player in deciding the best quantity, price and currency to list in.

In addition to buying cards, AQUA also allows players to list cards for sale at any price and currency they wish. Again, understanding the composition of the orderbook is very important for pricing your card and selecting the best currency to list them in. In the example above on the left, I list five copies of the Gods Unchained card ‘Carnage Sweep’ for sale below the current floor price. I see that the two cheapest cards for sale are currently listed in ETH, and because I want a quick sale, I list mine in ETH at a slightly lower price. In the center example, I have decided to list my five cards for sale to players who are shopping in the GODS currency. I have adjusted the listing price to just undercut the cheapest current GODS listing. In the example on the right, I was more bullish about the market price of Carnage Sweep rising over the coming days, so I listed the five cards deeper in the order book, listing them in ETH at a 40% higher price than today’s ETH floor price. Without AQUA’s unique visual listing experience, this level of sale price optimization would be difficult and time-consuming.

Goal #4: Manage the player’s expectations well during asset purchases or sales.

In most web3 purchasing experiences, crypto wallets are used for signing transactions. This is unintuitive to your average web user and involves multiple clicks on your Metamask wallet popup to ‘sign’ the transaction. Bulk orders of, say, 80 trading cards can require up to 80 signatures. To minimize the pain of this experience, we added a confirmation step with a progress bar to track the player’s signatures, showing a success state upon completion. It was important to the AQUA team to streamline the checkout experience in web3 so that it more closely resembled traditional e-commerce. 

Technology note: For implementing the orderbook graphs shown above, we adopted a relatively open-ended visualization framework, VISX. While there are many out-of-the-box frameworks for doing charts and graphs, VISX gave us the flexibility and control we needed for this application.

If you are interested in trying the AQUA trading UX for yourself here’s a link to a Gods Unchained card detail page. You can play around with the trading UX described above without needing an account or any crypto, but you will need to sign up and purchase some currency to actually buy cards.

The business impact 

This visual orderbook is just one of the features designed and built by The General Partnership for AQUA’s official company launch at NFT NYC in 2022. The AQUA leadership team aimed to demonstrate that AQUA was taking a very different approach from other web3 gaming marketplaces, prioritizing ease-of-use, accessibility, and a context-rich experience designed for the broader market of gamers (not just ‘crypto-natives’). 

“The work we did with the GP helped position AQUA as a marketplace designed for people who actually play games, and kickstarted our conversations with potential partners.” - Sean Ryan, AQUA CEO.

Since its launch, AQUA has established itself as a leading destination for web3 gamers and has cemented relationships with a growing list of technology partners including Polygon Technology, and Immutable. AQUA has also become the embedded marketplace provider for popular web3 games like Undead Blocks and Gods Unchained.