Risedle's Swap Design Process
2023
Background (Problem)
Well, as an overview, Risedle is a new startup in the DeFi sector that is currently developing its latest product called Risedle Exchanges –– as a meta-aggregator. In the early development phase, Risedle's value proposition is to provide the best price rates for every exchange made by traders by aggregating various other exchanges.
One of Risedle's focuses during the development of this product is the "Experience." How can we provide a comfortable and impressive trading experience for DeFi users? Therefore, we tried to analyze what we can improve in terms of the interaction experience.
We tried to make a list of some key activities in an exchange:
Observation & analysis (examining detailed metrics of an asset)
Transactions/trading (buying and selling assets)
Monitoring the portfolio (tracking performance over the last few days, etc.)
In the end, we decided on a scope that we wanted to redesign, which is the Swapping process, as trading is quite crucial for the business process (Risedle derives profit from trading fees).
After determining this scope, I attempted to conduct desk research on several competitors/other similar applications regarding their swap interfaces and swap patterns. These platforms included:
Uniswap.org
Matcha.xyz
1Inch.io
SushiSwap
Zerion
Based on this brief research, I identified a common issue. These platforms lacked keyboard interaction friendliness. To navigate the swap feature, users had to switch back and forth between the keyboard and mouse, which, in my opinion, was inefficient. Users also had to go through multiple steps to perform a token swap. Additionally, most similar platforms had a nearly identical swap token interface and swap flow. Considering these issues, I contemplated improving the swap flow and interface to make it more efficient and distinct from other similar platforms.
Brainstorm
During the design process, I was inspired by a feature that helps users find or access a feature through keyboard shortcuts, which can significantly expedite the search process. This feature is present in Figma (Ctrl / Command+P), which I frequently use to quickly access plugins (without having to go through the command palette, where you used to have to scan through the entire list of installed plugins), and in Notion (Ctrl / Command + P), which I often use to search for keywords within documents.
Propossed Solution
The image above is the Risedle swap flow that utilizes the command center feature. It is evident that Risedle's swap flow is simpler and more efficient because users only use keyboard shortcuts to perform swaps, thereby streamlining and simplifying the token swapping process for users.
In contrast to the swap flow of Uniswap, where users have to find the tokens they want to swap through the explore token feature first, and users have to make more effort to find their swap tokens. They have to switch between using the keyboard and the mouse, which seems less efficient. For example, after clicking on the token they want to swap, they then have to switch to input the amount to be swapped and have to click on the target token to be swapped. This can also be found in the swap flows of other platforms like 1inch, Matcha Swap, etc.
From the comparison I conducted, it can be concluded that Risedle’s swap flow using the command center has several advantages:
The time required for users to complete a swap is shorter with the command center.
Users don’t need to make extra effort to switch from mouse clicking to using the keyboard because token swaps through Risedle’s command center feature can be done using only the keyboard.
In the keyboard shortcut (with the shortcut Ctrl / Command K) that I developed, users can search for and access various features within Risedle Exchange (with the shortcut Ctrl / Command + K). One of these features is token swapping, which can be done simply by typing the keyword 'Swap' or the token name you wish to swap.
Next, details of the token to be swapped will appear. Within this process, there are several keyboard shortcuts available in this card, including:
Max Amount (Alt + M)
This keyboard shortcut is used to input the total balance in your wallet of the token you want to swap.
Transaction detail ( Alt +D)
Within the transaction details, users can find information such as the expected output, minimum received input price, and slippage amount.
Konfigure ( Alt +K)
This keyboard shortcut is used to bring up a pop-up menu that contains options for setting the slippage amount and choosing the Dex aggregator.
Set Dex ( Alt +W)
Users can select their own Dex aggregator even though Risedle Exchange already offers the best price for a Dex aggregator.
Set Slippage Amout ( Alt +A)
Users can choose or input the slippage amount to be used in the swap process.
Challenge & Edge Case
When designing this feature to be keyboard-friendly, there were several challenges that emerged:
1.
Comprehensive Keyboard Accessibility: To truly make it keyboard-friendly, we had to ensure that all menus or interactions within the swap modal could be accessed using keyboard shortcuts. For example, being able to change the slippage amount and switch the DEX should be easily achievable via keyboard shortcuts.
2.
Shortcut Conflicts: Defining shortcut combinations required careful consideration of other shortcuts at the OS or browser level. For instance, we couldn’t use “CMD + T” because it would conflict with the browser’s “New Tab” shortcut.
To address these challenges and make the feature keyboard-friendly, we needed to map out a comprehensive set of keyboard shortcuts that are intuitive, non-conflicting, and cover all essential functions within the swap modal. Additionally, clear documentation and user guidance on these shortcuts would be crucial to ensure users can take full advantage of the feature’s keyboard accessibility.
2023
Crafted By OSHA