---
# System prepended metadata

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

---

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

## App / Navigation

> Menu / Maximised state / Walkthrough (State 1)

Views of 'State 1'
![](https://i.imgur.com/Qx3GRp2.jpg)
'State 1' amends:

* To ensure alignment of menu titles and sliders remain accurate, please reintroduce the '**Dashboard**' and '**Money Apps**' menu lables and sliders as shown in the proposed. 
* Please indicate each of these labels and sliders as being '**inactive**' by utilising the colour: secondary dark steel (#4A4D58).

> Menu / Minimised state / Walkthrough (State 2)

Views of 'State 2'
![](https://i.imgur.com/a7gKvNz.jpg)
'State 2' amends:

* To ensure alignment of menu sliders remain accurate, please reintroduce the '**Dashboard**' and '**Money Apps**' menu sliders as shown in the proposed. 
* Please indicate each of these sliders as being '**inactive**' by utilising the colour: secondary dark steel (#4A4D58).

> Menu / Rollover state / Walkthrough (State 3)

Views of 'State 3'
![](https://i.imgur.com/RFajADW.jpg)
'State 3' amends:
 
* On rollover, the minimised state should expand as shown in the proposal above. This expansion should occur over a minimum of 0.3 seconds, but idealy; 0.45 or 0.6 seconds with an ease out. 
* In comparing the existing and proposed, the following visual amends also need to be applied or confirmed:
    * Confirm the menu titles are: **Mabry Pro, Regular, Size 12, letter spacing at 0%**
    * To ensure alignment of menu titles and sliders remain accurate, please reintroduce the '**Dashboard**' and '**Money Apps**' menu lables and sliders as shown in the proposed. 
    * Please indicate each of these labels and sliders as being '**inactive**' by utilising the colour: secondary dark steel (#4A4D58).
    * Please keep the '**Cheveron**' stationary in the '**Minimised**' position as shown in proposed. 
        * If selected, please rotate the cheveron 180 degrees during the '**ease out**' towards the end of its transition from '**Rollover**' to '**Maximised**'. 
        * Note: This transition should occur at minimum over 0.6 seconds, but ideally over 0.9 seconds with an ease out.
    * Please review the edge of the drawer as it does not extend the full height of the screen as shown in '**existing**'. 
    * Note: The width of this glass edge should reduce from: 9px (7+2) when '**Maximised** to 5px (3+2) when '**Minimised**' or in the '**Rollover**' state.
    * **BUG** During transition, the edge of the glass currently dissapears,
    * **BUG** On rollover, there are instances where the rollover state expands to the width of the expanded state without a selection having been made.
    * During **transitions between rollover and maximised**:
        * The spacing (height) between menu labels and their respective sliders should increase to acommodate the content requirements of the information displayed in the maximised state. 
        * As the above note is implemented, transition applicable menu labels and sliders to their '**Open**' state as shown in the State 1 and State 4 designs.

> Menu / Minimised state / Connected (State 2)
**Visually; same as walkthrough**

> Menu / Rollover state / Connected (State 3)
**Visually; same as walkthrough**

> Menu / Maximised state / Connected (State 4)

Views of 'State 4'
![](https://i.imgur.com/qC9e8LI.jpg)
'State 4' amends:

* To ensure alignment of menu titles and sliders remain accurate, please reintroduce the '**Dashboard**' and '**Money Apps**' menu lables and sliders as shown in the proposed. 
* Please indicate each of these labels and sliders as being '**inactive**' by utilising the colour: secondary dark steel (#4A4D58).

## Emissions

Existing vs. Proposed:
![](https://i.imgur.com/2Wi1j6w.jpg)

Amends:
* Please remove the '$' reference and replace it with the 'Frax' icon as shown in the proposed.
* The '**More ->**' link is supposed to point users to '**Emissions / Collateral / Details**' ...however I note that this destination has NOT been implemented currently. 
* I will provide a separate review file to address this destination. 

## Page Header

Existing:
![](https://i.imgur.com/Ezqbxpl.jpg)

Proposed:
![](https://i.imgur.com/hXwTxLh.png)

Amends:
* It looks like there is some sort of glass with a blur currently in the header. 
* This is not desired, please remove both glass and blur. 
* The header as per the proposed designs is intended to be seemingly invisible with only a keyline to mark its boundary.

--