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

## App / Navigation

> Menu / Maximised state / Walkthrough (State 1)

Views of 'State 1'
'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'
'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'
'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'
'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:

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:

Proposed:

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.

--