---
# System prepended metadata

title: UI Review (3.01)
tags: [UX, UI]

---

# UI Review (3.01)
###### tags: `UX`, `UI`
3Fi. v1. UI Review

## App / Deposits / Collateral - 3Fi Token

> WALKTHROUGH

Existing '**Action Options**':
![](https://i.imgur.com/mpUm6Hc.jpg)

Proposed '**Action Options**':
![](https://i.imgur.com/GC5RRXI.jpg)

Amends:
* Some of the following may be resolved by ([UI_Review_2.01](https://hackmd.io/@3Fi-4-DeFi/UI_Review_201)) ...meaning, by widening the drawer to 4 columns, the increase in width may provide enough space to resolve the below amends.
* Alignment: The '**Secondary tabs**' should all be on one line, no wrapping. 
* Alighment: The '**Help text**' below the '**Secondary tabs**' should not exceed 4 lines. 
* In the '**Walkthrough**' state, the '**Connect Wallet**' button should be raised to a common height below the '**Help text**' as shown in 'Proposed Action Options'. 
    * Note: 
        * Regardless of how many lines the '**Help test**' is, the '**Connect Wallet**' button should remain at the same height so that when the user 'flicks' between '**Secondary tabs**', the button does not move. Movement would cause distraction of the users attention on the content that is important. Keeping this button static would avoid this. Further:
        * I recommend raising the '**Connect Wallet**' button to the proposed position as it makes it easier for users to access and reduces the risk of users 'missing' the button altogether. 
* The title of the drawer needs updating:
    * From: '**3Fi Collateral - Curve Base**'
    * To: '**3Fi Collateral - Bent base**' (small 'b' in 'base' please)
