DeFi tool in L2 networks — homogenization of stablecoins

Open project in Figma

Context

📌 CURL is a DeFi tool that allows users to homogenize (combine) synthetic (derived from the main ones, like USDT, BTC, ETH) tokens and use them in L2 networks in a combined form (instead of b1USDT, b2USDT, b3USDT, etc., 1 hUSDT token appears ) for more efficient profitability and maintaining a high level of liquidity.

Problem statement

As a product designer, I was tasked with the challenge of creating a complex product from scratch. I utilized design thinking methodologies to understand the needs of the end-users and the pain points they faced. My approach involved empathy mapping, rapid prototyping, and user testing to validate my solutions.

Through this process, I was able to design a product that not only addressed the needs of the end-users but also exceeded their expectations. The final product was well received and praised for its user-friendly design and innovative features. My approach demonstrated the importance of taking a human-centered design approach when creating complex products and the impact it can have on the success of the final product.

Business tasks

— launch a new product based on knowledge about the audience of the company’s previous product – Blueshift
Blueshift - Efficient Automated Market Maker and Asset Management Protocol

— get Blueshift users to use the CURL project (they work in the same ecosystem and can be beneficial when used at the same time)
— to involve in the CA product such projects as https://curve.fi/, https://stargate.finance/transfer, https://www.pickle.finance/
— to attract additional investments from funds into the product

Key KPI

— amount of Total Value Locked (Target: at least $500,000 within a month after the release of version 1)
— conversion to staking (percentage of users who blocked tokens in the protocol after making a deposit to the pool)
— to achieve such a ratio of LTV / CAC, in which LTV will exceed CAC

Community opinion

Design discovery, definition of design tasks

During the discovery process, I studied the user experience of competitors' platforms, conducted interviews with their users and identified key needs

— transparent deposit and withdrawal process
— quick access to assets that have funds
— an easy way to switch the network in which transactions are taking place
— an unloaded interface with an emphasis on key actions that can be performed on the platform

💡 Design challenges

— create the first version of the product based on the results of the research of the Blueshift project
— work out the main scenarios, take into account the UI patterns of the platforms, the audience of which the business plans to attract to the product
— improve the user experience of the deposit and staking process (relative to the Blueshift project and other reference platforms)
— adapt the existing graphic artifacts of the project (which were used in marketing communication) for use in the interface
— create a flexible design system for the ability to quickly add new features

Design process

SWAP page and design system creation

On the SWAP page, the user can exchange synthetic tokens for 1 homogenized hX token. It should be universal for choosing different tokens and make it possible to make a reverse exchange.

In the course of communication with the developer, we determined the maximum size of the number-indicator of the number of tokens, and I provided for the extreme states of the input field.

I also added the ability to add the exchanged token to the Metamask wallet, since when exchanging it in 80% of cases there is no wallet, and many users noted that they did not understand whether the token was added after the exchange or not. In order not to do it manually, when you click on the “+ Metamask” button, the token is automatically added to the wallet.

During the creation of this page, I began to add the first elements to the design system. These were buttons, inputs, dropdowns.

Design system and product compontents

For the button component, I used the ability to change the icon from the library (swap instance), also after Figma updates, I facilitated the button component by using properties

I created a product component — input with business logic and all the edge cases.

All the design system components are available in Figma

Token pools page

On the Token Pools page, the user performs the second most important action - deposits tokens as a deposit in the pool, for which he receives a small reward in CURL tokens.

I want to elaborate on the anatomy of the Accordeon component for this page.

In a closed view, the main parameters of the pool are displayed to identify it. A table structure has been chosen for this page, as the user needs to see the maximum number of pools on one page in order to select the one in which he wants to make a deposit.

When the user clicks on the pool, the accordion expands and there is an opportunity for a deposit. I chose the accordeon element for this page because it allows you to keep the user in the context of one page and not block other actions (unlike a modal window).

I refused to use the modal window and combined the token selection into a dropdown, and rendered the amount input separately into 1 input. Thus, I reduced the way of making a deposit to 3 steps

Steps for adding a deposit to CURL

1. Select the token in which the deposit will be

2. Enter amount

3. Confirm deposit

I also suggested putting a shortened staking option on the same page (although it is also on a separate page in full form), as the business had the goal of prompting the user that staking would increase the profitability of the pool.

I used tabs, which made it possible to make the deposit, staking and withdrawal process uniform. When switching tabs, only the content changes, the structure is consistent everywhere.

When the deposit is completed, the Stake tab automatically opens and a hint appears that this additional step will increase profitability

I have also added a “max profit” badge which suggests that the selected token will show the highest profitability in this pool.

Since the description of the pools may be subject to frequent changes in the following tasks, I have made accordions components that can be flexibly configured.

Product component — Accordeon with all edge cases

Key results

• I managed to optimise all the main scenarios and clear flow for deposit, stake and withdraw operations. Consistency in UI in all the app parts. This flow was validated via series of quantitative interviews.

Overall, I designed a user-friendly and efficient DeFi tool for CURL which faces user needs and meets business goals.
As a result, platform reached 2K+ MAU with overall NPS 87%