Background
The purpose of the project is to streamline the trading experience by consolidating multiple wallets into a single platform. This enables users to trade a diverse range of products, such as spot, margin, perpetual, warrant, and more, all within a unified wallet. By providing a centralized platform, users can access and manage their various trading activities more efficiently and conveniently.
Problem
In the previous version of the exchange wallet, it was divided into three separate wallets:
1. Spot Wallet
2. Margin Wallet
3. Derivatives Wallet
Each wallet was assigned for specific types of trades or products. As a result, users were required to transfer funds from one wallet to another when engaging in specific types of trading. The default wallet for users was the spot wallet.
Before
In the previous version, the wallet was divided into three distinct parts, with each part dedicated to a specific type of trading or product.
After
After the completion of the exchange project, users will have the convenience of trading everything within a single wallet. They will no longer be required to transfer funds between different wallets for trading purposes.
My role
The key design representative of the project, job duties include:
1. Participating in ideation and discussions at the beginning of the product cycle with project managers (PMs).
2. Consolidating product requirements and implementing the design.
3. Establishing and standardizing the design audit flow for User Acceptance Testing (UAT).
Product Highlights
Although the wallet consolidation is the primary focus of the project, it's important to note that significant updates have been made to approximately 90% of the exchange website beyond just the merging of the wallets.
1. All in One Wallet
The core area of the project has indeed undergone significant changes. The wallet now serves as much more than a platform for transactions and viewing coin balances. It has evolved into a central hub that provides users with access to and management of all their assets, debts, controls, and transaction histories across a wide range of financial instruments.
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.
2. Margin Trade
Margin trading has been integrated into spot trading as a built-in function, whereas it was previously treated as a separate trading type. This integration means that users can now engage in margin trading directly within the spot trading interface without needing to switch between different sections or platforms.
Before
In the previous version, margin trading was indeed a standalone trading type for users.
After
In the one exchange project, the margin trading function has been embedded into spot trading, transitioning from a separate order form to a switch toggle within the same interface.
when the margin trading toggle is enabled, a gradient area is displayed within the slider interface. This gradient area represents the amount the user is going to borrow for margin trading, while the non-gradient portion represents the percentage of available funds.To initiate borrowing, the user must first utilize 100% of the available funds. They can achieve this by dragging the slider handle across the non-gradient portion until it reaches the gradient area. As the user adjusts the slider, a tooltip will simultaneously display the borrowed amount, providing real-time feedback on the amount being borrowed.
3. USD Bundle
The USD Bundle is a feature introduced to improve the performance of the crypto on/off ramp by introducing a synthetic USD asset. This synthetic USD asset is designed to be treated at a 1:1 ratio with both USD fiat and USD stablecoins. It serves as a bridge between traditional USD fiat and cryptocurrencies, allowing users to convert between the two seamlessly.
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
Initially, the section was designed as a central hub for the master account owner to manage the funds and permissions of all their sub-accounts. However, with the changes brought by the One Exchange project, the issue of redundant sub-accounts surfaced. These redundant sub-accounts corresponded to the number of legacy wallets each user had, causing complexities in account management.
Before
The previous version of the sub-account section did not include much-advanced information but more or less provided basic CRUD and funding transfer functions.
After
Look for streamlining, we removed superfluous information, merged sub-sections into one, and renamed the whole section to "Account Management" for a better understanding. Adding back useful data such as balance and account health to each sub-account row for better monitoring.
When discussing the changes brought about by the One Exchange project, one of the challenges that emerged was the issue of redundant sub-accounts, which corresponded to the number of legacy wallets each user had. To tackle this problem, a range of features were developed to enhance account management. These include functionalities like merging accounts and bulk asset transfers. These features aim to streamline the management process and provide users with more control over their accounts and assets.
The account merge function within the One Exchange project allows users to merge their accounts from one to another. This feature is particularly helpful in clearing redundant sub-accounts that may have been created as a result of the project.
The bulk asset transfer function enables users to transfer multiple assets from one account to another simultaneously, saving them from the tedious task of transferring assets individually.
UI Updates
In addition to product features, the UI has also undergone updates to enhance the overall user experience. The changes span from adjusting padding levels to improving usability. Here are a few examples of the UI changes that have been implemented:
1. Side Navigation
The side navigation items have undergone a reorganization into two distinct sections: "Globally Accessible" and "Master Account Access Only." This restructuring has been implemented to enhance user navigation and create a clear differentiation between features and options that are accessible to all users and those that are exclusively reserved for the master account holder.
Before
After
Items had been grouped according to the function accessibility of the account
2. Table Scrolling
To enhance the user experience, horizontal scrolling has been implemented for tables instead of using an accordion approach. This decision offers several advantages:
1. Reduced Interaction Cost:
Scrolling the entire table saves users the effort of clicking to expand each row individually, resulting in a more efficient interaction.
2. Improved Reading Experience:
Horizontal scrolling enables users to easily compare information between rows, enhancing the readability and comprehension of the data.
3. Simplified Export Functionality:
By presenting all information in a single table without hidden levels, the export function becomes more straightforward, allowing users to export the complete dataset without any omissions.
Overall, the adoption of horizontal scrolling for tables aims to optimize the information density and usability of the UI.
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.
3. Number Alignment
To facilitate easy comparison of number magnitudes, a standardization of decimal places for coin balances has been implemented, resulting in right-aligned numbers. This formatting change ensures a visually consistent presentation of data, enabling users to compare balances more easily and comprehend the relative magnitudes of different values.
Items had been grouped according to the function accessibility of the account
