Venus Protocol / Binance

My role: Design lead
What i did: Community survey, market research, development of new branding, UI Kit development, prototyping, and clickable prototypes, testing new features, prompt response to community demands, working with materials from the marketing department, mentoring
Services: Isolated lending, prime yield, swap functionality, supply / borrow functionality, governance, market page, user's account, multichain functionality, dashboard, vault functionality, prime calculator, history page, Binance mini app
Overview:

Venus Protocol is an algorithm-based money market system on the BNB Chain. It aims to allow users to lend and borrow cryptocurrency in a decentralized and secure way.

Venus Protocol was founded by a project development team from global cryptocurrency credit card issuer Swipe, with Venus (XVS) launching in 2020. From the beginning, it aimed to bridge the gap between traditional finance and DeFi on the BNB Chain and provide users with an alternative application free from the issues they’d experienced on Ethereum.

view Website
1st
place among 53 lending protocols, in terms of TVL
2nd
place among 625 protocol on BNB chain, in terms of TVL
5th
place among 326 protocols, in terms of TVL
$2+ billion
Total Value Locked (TVL)

Intro

We were hired in 2021 as a team of professionals, after the entire previous team was dismissed, to give Venus a second life. By the time I joined, the application was in a sorry state. Its reputation had been almost entirely destroyed by the wrong actions of the first team. XVS crashed in May from $138 to $14. The protocol continued to actively lose users, most of the functionality was working incorrectly, patterns were violated, and there were many vulnerabilities in the application. We had a lot of work ahead of us.

Introduction to Design

The first thing I had to do when I arrived was to conduct a design audit. The primary task was to promptly fix what already existed. The situation was complicated by the fact that there was no communication with the previous team. It was necessary to promptly prepare some kind of foundation for making changes.

Below are several slides showing how the previous layouts looked:

The design situation

I needed to recreate the layouts so that we could make prompt changes to the layouts. I encountered the following:

  •       By that time, users had accumulated too many questions about the functionality;
  •       The established patterns did not meet the users' expectations;
  •       The functionality implemented by the team did not work properly;
  •       Absence of UI Kit;
  •       Current components  were not suitable for work;
  •       The current layouts were assembled without knowledge of design fundamentals. There was no system for margins, grid, font hierarchy, auto-layouts, etc.;
  •       The layouts contained many non-functional elements, unnecessary blocks, which raised questions from users.

User research

Firstly, I began gathering information from users to compile a preliminary list for prompt changes.

By that time, we managed to collect over 50 requests, some of which were very critical and could lead to fund liquidation

When we closed all the urgent issues, I started studying the best practices among DeFi protocols.

Fixing critical issues

After gathering user feedback, our next step was to address critical issues in the interface so that users could continue using the product smoothly.

I needed to quickly assemble a UI Kit based on old components so that I could start working with the layouts.

Next, I began working on addressing interface errors that we were able to identify through surveys.

However, such a solution only made sense in the short term because a proper rebuild of the application would require a significant amount of time. And it didn't make sense because overall, this interface contained a large number of errors and lacked scalability. Therefore, we made the decision to redesign

Extra work at the early stages

Also, at the initial stages, we completed the following tasks:

  •      Mobile layouts (prior to that, it was nearly impossible to use the application on a mobile device);
  •       We removed non-functional elements;
  •       We increased the contrast to ensure that the text was visible everywhere;
  •       We added market best practices that could be quickly implemented. For example, headings for blocks;
  •       We fixed the font hierarchy to ensure that headings were larger than the body text;
  •       We created a quick UI Kit to facilitate prompt changes.

Dapp redesign

After patching up the interface holes, we started thinking about scalability and brand development. It was obvious that fixing and maintaining the old system would be very problematic. Therefore, we decided to do a redesign.

2 won contests

Branding of Venus Protocol; New UI of Dapp

Why was a redesign needed?

After making adjustments to the old layouts, it was decided to redesign the application. There were several reasons for this

  •       The previous brand did not inspire trust among people;
  •       Incorrect functioning of many elements in the layouts, which misled users and they constantly complained;
  •       Absence of UI Kit;
  •       The previous layouts were put together without knowledge of UI basics: different margins, improperly assembled components, lack of auto-layouts, absence of grids, etc;
  •       Issues with unreadable typography and contrast errors. For example, white text on a yellow background;
  •       The presence of elements in the application that simply did not work;
  •       Just an outdated non-competitive UI.

Beginning of brand development

Before starting the redesign work, we analyzed market leaders to understand the main direction and make the brand trustworthy again after a significant downturn.

We researched market leaders such as:

  •       Aave
  •       PancakeSwap
  •       Compound
  •       Euler
  •       Atlantis Loans
  •       Solend
  •       Morpho
  •       Spark

Then we decided that we wanted to move away from the current color palette because red and orange are more associated with losses and a downward trend for users. We focused on blue and green colors and decided to move in that direction.

Moreover, we wanted the direction to lean towards financial institutions. So that users wouldn't be afraid to use our protocol.

Logo design competition

As part of the rebranding, Binance announced a competition for the best logo design for Venus.

On my part, I submitted several options for the competition.

🏆 As a result of community voting, two of my works made it to the finals, and one of them took first place and became the new logo for Venus. It also became the new face for the XVS coin.

🏆 Winning concept

Brand new

As part of the rebranding, Binance also announced a UI design contest.

In this contest, I presented my vision for the development of Dapp's visual design. An important aspect was that I moved away from red colors in favor of blue and green shades. In financial applications, this evokes calmer emotions in users compared to red and orange, which are associated with financial losses and red candles in a market downturn.

🏆 As a result, the contest was also won, and the team decided to develop the new visual for the Dapp.

New UI Kit

I created a new UI Kit for the new Venus Dapp, in which I incorporated the following principles:

  •       All layouts are strictly built on grids;
  •       All margins are multiples of 4 pixels: 4, 8, 12, 16, 20, 24, 32, and etc;
  •       All layouts are built using auto-layouts in Figma;
  •       We paid great attention to tabular data, creating a large library of components because tables and cards constitute a significant portion of the application;
  •       We don't keep a huge number of colors in the base. Only the necessary ones, but the entire library is tested for contrast;
  •       We develop all layouts for 5 resolutions: 1440px, 1280px, 840px, 640px, 375px;
  •       We maintain consistency and adhere to the rules that underlie the brand, with rare exceptions.

Isolated lending

One of the key events for the protocol was the introduction of isolated lending. The protocol began to support a much wider range of assets, allowing users to make riskier investments and earn more.

+240%

Uniq active users after IL launch

+20

Supported assets (+67%)

$0→$5 000 000

TVL Isolated lending grow 

Isolated lending model

Isolated lending in decentralized finance (DeFi) refers to a lending protocol feature that allows users to borrow or lend assets without being exposed to the risk of other assets held in the same pool.

In a traditional lending pool, borrowers and lenders contribute assets to a shared pool, and the interest rates and collateralization ratios are determined based on the overall pool metrics. This means that if one asset in the pool experiences a significant price fluctuation or defaults, it could potentially affect the entire pool, impacting all participants.

Isolated lending, on the other hand, segregates each asset into its own individual pool. This means that borrowers and lenders interact with specific pools dedicated to the asset they are dealing with. By isolating assets in this manner, the risk associated with each asset is contained within its own pool, reducing the potential for contagion and minimizing the impact of adverse events on other assets or participants.

First layouts

We tested many variations for the isolated lending model, but concluded that all assets should be visible to the user in one place to compare interest rates and make a choice in favor of a particular pool.

Testing among the community and surveys helped us develop the right model, which we scaled for the entire new functionality.

What did we refuse from?

Initially, our concept was based on risk assessment, but we soon abandoned it for several reasons:

  •       The concept of risky assets deterred users, whereas our goal was to give them the opportunity to invest in high-risk assets;
  •       The risk grading was unclear and implicit;
  •       The user's perception of the DeFi protocol changed

What else:

With the transition to isolated lending, we decided to update our landing page as it was a significant and meaningful update for both users and the team.

Venus Prime

Venus Prime intends to promote user loyalty and the overall growth of the protocol. By endorsing long-term staking, discouraging premature withdrawals, and incentivizing larger stakes, Venus Prime sets a new course in user engagement and liquidity, contributing to Venus Protocol's success.

+127%

XVS price from Prime yield launch (Nov 2023)

630

users staked >100 XVS totally 

+20% TVL 

934M (Mid. Oct. 2023) → 1.13B (Mid. Dec. 2023)

The idea of the Venus Prime

Venus Prime serves as a powerful incentive for user loyalty and contributes to the overall growth of the protocol. By encouraging long-term staking and larger stake sizes while discouraging premature withdrawals, the rewards program fosters the expansion of markets supported by the protocol. This mechanism incentivizes users to commit to the protocol and actively participate in its activities, ultimately driving increased user engagement, liquidity, and the overall success of the Venus ecosystem.

To get a Prime token, the user need to take the following steps:

  •       Users need to stake at least 1000 XVS for 90 days in a row;
  •       After these 90 days, users can mint their Prime Token;
  •       If a user decides to withdraw XVS and their balance falls below 1000, their Prime Token will be automatically revoked;
  •       The limit to the number of revocable Prime tokens is 500 on BNB chain. It can be changed with a VIP.

Why Venus Prime is needed

In this way, we motivate users to stake more XVS. In return, they receive a premium rate on many tokens, thus earning more money.

This is a kind of loyalty program for premium users who support the protocol. So far, over 630 people have become Prime users in the protocol.

Also, through the introduction of this program, we have influenced the overall TVL and the price of XVS, which has shown significant growth due to user engagement.

Changes in the interface

In terms of design, the following tasks were completed:

  •       A new visual brand was developed for premium users. Initially, we conceptualized multiple tiers, each associated with a precious metal;
  •       Motivational banners were created for users who are not yet premium users;
  •       Badges with prime interest rates were integrated into dashboard pages and pools (for Prime users and for regular users to motivate them);
  •       The Prime status component was integrated into the "Vault" and "Account" pages;
  •       The "Claim Reward" window was redesigned;
  •       A calculator was designed for calculating rewards.

Prime calculator

Additionally, a Prime calculator was designed for calculating rewards.

It allows calculating the reward depending on the selected token (USDT, USDC, ETH, BTC) and the amount of staked XVS.

You can find more details about how the rewards work here.

Swap

Venus became the first protocol to make exchanges seamless and smooth for users by integrating it into the core functionality for Supply

$19,058,915

Total amount Swaped (In the first month after the integrated swap release)

28,989

Number of transactions (In the first month after the integrated swap release)

Swap the 1st iteration

Usually, users encounter situations where they want to supply one asset, but they either have a zero balance or lack the required amount. Therefore, they turn to services like PancakeSwap to make the exchange.

The first version of our Swap was just a separate page accessed from the sidebar.

But it wasn't very convenient when users discovered they needed to swap while already in the supply process. So, we went further.

Swap the 2nd iteration

As a result, for user convenience, we integrated the swap process into the main functionality of Supply and Repay. This way, the user can directly choose in which asset to supply and make the swap during the process.

Users really liked this solution, and in turn, we saw good performance indicators.

Governance

Venus became the first protocol to make exchanges seamless and smooth for users by integrating it into the core functionality for Supply and Repay

+43%

proposals / month (JSON import feature release)

Audit of the Voting page

On the previous page of the voting, I managed to identify the following shortcomings:

  •       The inability to find the necessary proposal. The page only accommodated 4 proposals. Afterwards, I had to use the paginator;
  •       There were no clear instructions on what needed to be done to vote;
  •       There was no search by proposals and filtering by their type (active, executed, ready to execute, queue, pending, cancelled, defeated, expired)
  •       There were no clear instructions on how to create a sentence;
  •       The active proposals did not show the number of votes for, against, or abstained;
  •       There were no identifying markers for critical or fast track proposals;
  •       When creating a proposal, everything had to be copied and pasted manually. It wasn't possible to simply upload a JSON file.
  •       The status of how a user voted for a particular sentence was not visible.

An important change

An important change in the proposal creation process was the ability to upload JSON files containing proposals. In the previous version, proposals were either written manually or copied from external sources, leading to errors. We have addressed this process and provided the option to import JSON files.

As a result, the number of regular proposals has significantly increased and the number of errors significantly decreased.

Other features

In addition to the aforementioned functionalities, I also designed the interface for the following features:

  •       Multichain (the flow for changing networks);
  •       Dashboard;
  •       Supply / Borrow / Repay / Withdraw functionality v1, v2, v3;
  •       Market and market inner pages;
  •       Converting VRT page;
  •       Account health simulator;
  •       Stable borrowing rates;
  •       History page;
  •       XVS page;
  •       Mint / repay VAI functionality.

Binance app

Also, as part of my work at Venus, I designed a mini-application for Binance.

As part of this task, I designed the flow for supply, borrow, the market page, transition to the internal asset page, the account page, and the market page.

view App

Community & ambassadors

Venus is a large community-driven community that has a large number of ambassadors around the world. And each of them does a great job for the product.

Ambassadors help Venus team in several ways:

  •       Feedback collection: They gather feedback from users in their communities, providing valuable insights into user experiences, feature requests, and areas for improvement.
  •       Beta Testing: They participate in beta testing programs, helping to identify bugs, test new features, and provide feedback before product releases.
  •      User Support: Ambassadors often provide support to users within their communities, answering questions, troubleshooting issues, and providing guidance.
  •      Community Advocacy: Ambassadors act as advocates for the product within their communities, spreading awareness, and generating interest.

Make Venus great again!

Let the numbers speak for themselves. I'm glad that we're able to restore user's trust in this product and that the actions we're taking are positively impacting the outcome.