Aave V2 Design Upgrade
When setting up the design and user flows back in 2019 before the release of Aave Protocol on mainnet, we did not anticipate the enormous growth of Aave and the DeFi space. Like our TVL, our ideas kept growing with new features for Aave users. The addition of these new features would require more workable space in the user interface.
The design team decided to overhaul the layout of the user interface. In V1, the main navigation was on the left side which interacts with the ‘content area’ on the right side. This seemed to work fine for V1. However, with the release of V2 and additional features such as staking, governance, yield & collateral swaps, repay with collateral, credit delegation, stable and variable borrowing, and many more to come, it was clear that V2 needed a change of layout to accommodate all these new features. Additionally, preparing for future scalability is always important, especially in a space that innovates as rapidly as DeFi.
After conducting research about dark and light mode for the UI, the design team settled on a “hybrid” combination between light and dark mode solution for the default V2 colour scheme. After the initial release of V2, more colour themes will be released and users will be able to select and set their preference. These colour schemes will be: default, dark mode, and light V1 Aave. For the fans missing the flashy purple/blue colour all over the UI, no need to worry — it will be an option for the theme!
The design team tried different approaches and decided to go for a more ‘classic’ approach with the ‘menu’ in the top/header bar. This is to accommodate for the space needed for the new features and a dropdown for sub-sections within categories.
Underneath the menu is the user information/data specifically for that view. For example, when a user is in the ‘dashboard’ they would see the ‘deposits’, ‘collateral’, ‘health factor’ and more metrics, all accompanied by nice visual representations like various pie charts.
Located under this ‘user information’ area is the ‘content/action’ area. In this area the user will need to take actions such as entering the amount to deposit or selecting which type of APR they prefer when borrowing.
This new layout adjusts for more flexibility and scalability in the future while giving users the information they need in a very clear and understandable way.
The user dashboard gets an upgrade as well. No need to switch between ‘deposits’ and ‘borrow’, everything is seamlessly connected in one overview giving the user a birds’ eye view of what is happening with their deposits and borrows. In the future, the ‘dashboard’ view will be expanded to include more metrics.
On some views, like the dashboard for example, there is now a clever way to collapse and expand the information area for the user who needs some more space if they are on smaller devices such as 10 inch screens, mobile phones, or for those who just want a less data-heavy view.
The deposit and borrow main views have been updated as well. The separation between what a user deposited and borrowed previously and what they can deposit/borrow is made clearer in the layout. On the left you will see a list of available assets to deposit/borrow and on the right in the square card you will find your current deposit/borrow positions.
Another nice upgrade in the new V2 layout is the visibility of the AAVE governance token balance. This will always be visible for the user from every view. The balance is an aggregation composed of 3 AAVE balances: AAVE in your wallet, AAVE deposited in the protocol, and AAVE that you’ve staked in the Safety Module.
In the same corner there is the dropdown for the ‘markets’. The initial V2 release includes only the default Aave Market, but additional markets will be added soon. Version 1 can be selected from the ‘markets’ dropdown and will take the user directly to the V1 interface. Switching from V1 to V2 while a user is inside the DApp will be done via the same ‘markets’ dropdown. The logic behind this is that V2 is essentially another market.
The ghost mascot you all know and love will help users onboard and navigate through the Aave Protocol! He’ll be giving hints, notifications, and important messages for users in need of a bit of help.
These are the main design updates for the initial V2 release, and more will follow in the coming weeks. The design team will constantly work to improve the UI and UX to make DeFi as accessible and seamless as possible!
DISCLAIMER: Be advised that all the data used in this blog post is not based on fact, but fiction. The images used are mock-ups and can be changed or may be different on actual implementation. In addition, the data shown for APY/APR are just for the mock-ups, so they are not real rates.
The Genesis team greatly appreciates all of your feedback! Feel free to follow Aave on Twitter or join the official Discord.
