Cover photo

Port.Finance Redesign

Scope — Product Design, Research & Web Design · Timeline — 5 Days

https://www.figma.com/file/yzIzRa4k2EPEss5usjCUT6/Port-Finance?node-id=84%3A2370

Product

Design Style & Direction

Port.Finance Visual Language
Port.Finance Visual Language

Markets

post image

Home

Dashboard Tab — Old & New
Dashboard Tab — Old & New
Guided Cards — Before and after actions have been performed
Guided Cards — Before and after actions have been performed

Deposit

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.

post image

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

post image

Borrow

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.

post image

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.

post image

Lend

Empty States

Empty States for Depositing into a coin, Deposit Card, Annual Projected Yield, Collaterals, Loans, Risk Factors and Positions.
Empty States for Depositing into a coin, Deposit Card, Annual Projected Yield, Collaterals, Loans, Risk Factors and Positions.

Landing Page

Coming soon 👀