Overview

The project's purpose is to simplify the trading experience by merging all different wallets into one, so users can trade all products including spot, margin, perpetual, warrant, and so on within the same wallet.
‍
Problem
The previous version of the exchange wallet had been divided into three:

1. Spot Wallet
2. Margin Wallet
3. Derivatives Wallet

Since each wallet is only responsible for corresponding kind of trade/ product, users are required to transfer their funds from one to another when doing specific trading. (Default is the spot wallet)

Crypto.com Exchange
One Exchange Project

Streamlined crypto on/off ramp experience
Before
The previous version divided the wallet into three parts, and each is specific for the corresponding type of trading/ product.
After
After the one exchange project, users can trade everything within a single wallet, and they do not need to transfer funds to different wallets for trading anymore.

My role

I am the key design representative of the project, job duties include:
‍
- Participate in ideation and discussion at the beginning of the product cycle with PMs.
- Consolidate product requirements and implement the design.
- Communicate with the development team for the accuracy of the actual implementation.
- Establish and standardise the design audit flow for the UAT.

Highlights

Although the wallet is the place where the project focuses the most, changes happened to 90% of the exchange web as well, and following are some highlights.
‍
1. All in One Wallet
This is the core area where most of the changes happened. The new role of the wallet is not only for doing transactions and seeing coin balances but a hub where users can take a look at all other assets and debts with corresponding controls and history.
2. Margin Trade
Margin trading had been merged into spot trading to act as a built-in function, while it originally is a directly separated trading type.
Before
In the previous version, margin trade is a stand-alone trading type for users. Which is using a particular wallet, and order form.
After
The one exchange project embeds the margin trading function into spot trading, which is from a separate order form to a switch toggle.
Sitemap of the wallet section. Users can view all their assets, loans, positions and transaction history within the single wallet, while before they need to switch between wallets to see them separately.
When toggled on to allow margin trading, there will be a gradient area filled to the slider, which indicates the amount the user is going to borrow for margin trade, while the non-gradient portion represents the percentage of available funds.

To borrow, the user first has to use 100% of the available funds. So he needs to drag the slider handle across the non-gradient portion and reach the gradient area, and the tooltip would show the borrowed amount simultaneously.
3. USD Bundle
USD bundle is a feature that aims for a better performance in crypto on/off ramp via introducing synthetic USD asset. As we treat the synthetic USD asset in 1:1 ratio to both USD fiat and USD stable coins, user can using it as a kind of conversion between USD fiat and cryptocurrency. (Fiat USD and USD stable coins are under the same balances, the synthetic USD asset)
‍
For details, please click here
The synthetic USD row indicates users about the bundled stable coins and USD fiat.
No matter which currency format a user had chosen for deposit/ withdrawal, they share the same USD balances. This is beneficial to users who need to transform their crypto assets into fiat form, vice versa.
4. Re-structuring of Sub-account Section
This section is originally a hub for the master account owner to manage the funds and rights of all his sub-accounts.
‍
When talking about the changes that the one exchange project had bought, redundant sub-accounts would be one of the problems, which corresponded to the number of legacy wallets the user had before. That's why a brunch of features had been built to enhance account management.
‍
When talking about the changes that the one exchange project had bought, redundant sub-accounts would be one of the problems, which corresponded to the number of legacy wallets the user had before. That's why a brunch of features had been built to enhance account management, such as merge account, and bulk assets transfer.
The account merge function enables the user to merge their account(s) from one to another, which is helpful to clear those redundant sub-accounts bought by the one exchange project.
The bulk assets transfer function allows the user to transfer multiple assets from one account to another at once, so this may save the user from tedious asset transfer works.

Some UI Updates

Besides product features, UI had been updated as well for enhancement, from padding level to usability level. Following are few examples of the UI changes.
‍
1. Side Navigation
Side navigation items had been re-arranged into two portions, globally accessible and master account access only.
Before
After
2. Table Scrolling
As an informative function, tables are inevitably to be busy with information. To improve the experience, horizontal scrolling is applied to the table instead of keeping the accordion approach.

Advantage:
1. The interaction cost is saved by scrolling the entire table instead of clicking to expand the row one by one.
2. Enhance the reading experience when users need to make a comparison between rows.
3. Facilitates the export function as all information could be packed in a single table directly without hidden level.
Before
User has to expand the row one by one when intended to see more, and it's hard for them to make comparison as information are not listed side by side.
After
What users need to do is simply scroll the table horizontally, and all information could be seen. As data is listed in a table format, visually easier to do comparisons.
Items had been grouped according to the function accessibility of the account
‍
3. Number Alignment
Given that the decimal place of coin balances is all unified, numbers would be right aligned, which makes it easy for users to compare the number's magnitudes.
Easier to compare the number after aligning to the right as the direction of the magnitude order is from right to left.

What's next?

Besides product features, UI had been updated as well for enhancement, from padding level to usability level. Following are few examples of the UI changes.
‍
1. Design Audit SOP (In progress)
As for an XL project scale like this, we have proposed a design audit workflow to stakeholders including the product management team, the development team, and the QA team aimed at a framework that could apply to the rest of crypto.com products shortly.
2. An Usability Test
As for the reason for the tight and rush product schedule, we cannot guarantee we've gained enough research and feedback before the product launch. That's why this is in high priority to prove if some of the design/ product assumptions are correct or not.
We use Jira for the design audit process and proposed a workflow to the stakeholders.
3. Accessibility Research
Different from the App's positioning, the exchange web targets advanced traders. And we got feedback that "keyboard support" is one of the considerations for a professional trader, this is going to be the topic to follow up.
One of the areas would like to investigate is the change of using the assets tab as the default instead of the open orders tab at the bottom area of the trading page.
‍
Copyright © All rights reserved.