# Port.Finance Redesign 

By [Kunj](https://paragraph.com/@kunj) · 2021-12-30

---

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

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

Product
-------

### Design Style & Direction

![Port.Finance Visual Language](https://storage.googleapis.com/papyrus_images/9d2ec540ec6f7499395ad1a97449c9b3e3d3b751f4570d10529ffd5c20dbdf07.png)

Port.Finance Visual Language

### Markets

![](https://storage.googleapis.com/papyrus_images/2c034a93a84d35ebe6f4ceed61e7c417f41bfa1d603cfbea5355d94dc21a28bf.png)

### Home

![Dashboard Tab — Old & New](https://storage.googleapis.com/papyrus_images/54e11193551a9d6711b1958cdb9fb605fed56ae0e6e785e31f582a664460ace3.png)

Dashboard Tab — Old & New

![Guided Cards — Before and after actions have been performed](https://storage.googleapis.com/papyrus_images/e4e44db68219b4ffda5ae90f6c2f2c35a11c1b420a0d624baf27678648e2294d.png)

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.
    

![](https://storage.googleapis.com/papyrus_images/828eb456b39234e575a112da404e73b0a3a737bd05719bdae27b22b63e8b5631.png)

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

![](https://storage.googleapis.com/papyrus_images/318ee780649ee05ace10f9130a39601c8393e261af2e406b63b76129fb8eda37.png)

### 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.
    

![](https://storage.googleapis.com/papyrus_images/365a8e4712cd5aacbfda75cb719e3c18e1dce153860b269f4b4e3dd6c09de7c1.png)

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.
    

![](https://storage.googleapis.com/papyrus_images/56d590b58376c308608df21988ee5aa823fea03d902b7deb54b27caedc12618a.png)

### Lend

### Empty States

![Empty States for Depositing into a coin, Deposit Card, Annual Projected Yield, Collaterals, Loans, Risk Factors and Positions.](https://storage.googleapis.com/papyrus_images/ef49c8ac202a6331a25fcaf88ecf3627fc5b904b76f494b6ee675a5ef11071c8.png)

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

Landing Page
------------

Coming soon 👀

---

*Originally published on [Kunj](https://paragraph.com/@kunj/port-finance-redesign)*