Key is a DeFi protocol that serves as a liquidity solution for GMX stakers.
Contributed to the Key project in its later phase, taking on three main roles:
Improvement
A new page design
Rebranding
1. Improvement
1-1. Modal
Problem 1
The user journey for non-LP holders was too long and complicated.
Problem 2
The overall readability of the flow was low.
Problem 3
Users experienced delays when selecting the [Stake] button.
① Distinguishing UI/UX for LP holders and Non-LP holders.
Hypothesis: By simplifying the user journey—removing unnecessary buttons for each user type and adding a direct link for Non-LP holders to purchase LP—we could create a more streamlined experience.
② 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: Establishing a clear button hierarchy and reflecting it in the UI would reduce confusion about each button’s purpose and importance.
1-2. Modal Transaction Confirmation Popup
Problem
Users cannot easily confirm which token was transacted or the transaction amount.
In Web 3.0, even after completing the input, transactions often take time to process. As a result, users rely heavily on checking their transaction history.
However, there was no direct way to navigate to the Transaction History page after completing a transaction.
Hypothesis: On the transaction completion screen, users want to confirm that they entered the correct amount for the appropriate token and view an overall summary of the transaction.
Because the project was confidential, external usability testing was not possible. Instead, we conducted an internal A/B test, comparing the original and improved versions.
All team members responded positively to the improved design, noting better readability and a clearer button hierarchy. As a result, task completion time was reduced 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
Users can quickly enter their desired buy or sell amount by selecting from preset percentage options.
Amount input 2.
Typing directly
