Key is a DeFi protocol that serves as a liquidity solution for GMX stakers.
I joined the Key project in the latter part and took on the following three roles:
Improvement
A new page design
Rebranding
1. Improvement
1-1. Modal
Problem 1
There was a problem with the User Journey for Non-LP holders, as it was long and complicated.
Problem 2
The readability was low.
Problem 3
There was a delay when users selected the [Stake] button.
① Distinguishing UI/UX for LP holders and Non-LP holders.
Hypothesis: Simplifying the User Journey by providing without unnecessary buttons for each user and including a link to purchase LP for Non-LP Holder users will lead to a more straightforward experience.
This hypothesis was formulated and incorporated into the design.
② Method of dividing the sections/areas.
Hypothesis: By using containers to separate the text and numbers instead of relying solely on lines, the readability will be improved.
This hypothesis was formulated and incorporated into the design.
③ Button hierarchy
Hypothesis: Setting a clear button hierarchy and representing it in the UI can reduce the likelihood of confusing the purpose or importance of each button.
This hypothesis was considered and reflected in the design.
1-2. Modal Transaction Confirmation Popup
Problem
It is not possible to confirm which token and how much was transacted.
In Web 3.0, even though the transaction input is completed, it often takes a long time for the transaction to be fully processed. Therefore, users rely on checking the transaction history. However, there is currently no direct way for users to navigate to the Transaction History page after completing a transaction.
Hypothesis: On the transaction completion screen, users would like to verify if they have entered the correct amount for the appropriate token and would want to see the overall summary.
This hypothesis was considered and reflected in the design.
It was a project that was kept confidential within the company, making it difficult to conduct UT with external users. Therefore, we conducted an A/B test with only internal team members, comparing the original version with the improved version.
All team members responded positively to the improved version, stating that the readability had improved. They also mentioned that the button hierarchy was clearer, which resulted in a reduction of the time taken to perform actions compared to the previous version 🚀🌙
2. Designing a new page
Trade
Trade page is a dedicated section within the Key app that allows users to trade GMXkey in an order book format.
Amount input 1.
Selecting a percentage
You can easily input the desired Buy/Sell amount by selecting it from the percentage options.
Amount input 2.
Typing directly
