Scope — Product Design, Research & Web Design · Timeline — 5 Days
https://www.figma.com/file/yzIzRa4k2EPEss5usjCUT6/Port-Finance?node-id=84%3A2370




Old 🙄
Overview
Just from the name + first impression: it’s unclear what the tab does.
Weaker hierarchy + balance between the cards.
Unclear order of the list, It’s not helpful to list down everything and let users navigate through them.

New ✨
Overview
Renaming the tab from Supply to Deposit, which makes it clearer what the tab entails and is more actionable like the other tabs borrow, lend and mint.
Cleaner hierarchy within the cards and line visualization instead of pie makes the coin/token distribution
Improved lists - broken down into two parts.
In Your Wallet ◦ Sorted by highest balance amount followed by the highest deposited amount. • Add other coins ◦ Higher distinction between the “active” state and “enabled” state. ◦ “Add” Icon prompts you to deposit into a certain coin/token.
Old / Deposit Coin Detail View

Old 🙄
Borrow-Overview
Just from the name + first impression: it’s unclear what the tab does.
Weaker hierarchy + balance between the cards.
Unclear order of the list, It’s not helpful to list down everything and let users navigate through them.

New ✨
Borrow-Overview
Renaming the tab from Supply to Deposit, which makes it clearer what the tab entails and is more actionable like the other tabs borrow, lend and mint.
Cleaner hierarchy within the cards and line visualization instead of pie makes the coin/token distribution
Improved lists - broken down into two parts.
In Your Wallet ◦ Sorted by highest balance amount followed by the highest deposited amount. • Add other coins ◦ Higher distinction between the “active” state and “enabled” state. ◦ “Add” Icon prompts you to deposit into a certain coin/token.


Coming soon 👀

