This page is used to record comments on suggested tweaks to the development work to update the current version of the CRM with the new Ant design system UI.
For reference, 2 miro boards have screenshots from the UI spike screens with instances of the comments mentioned in the following tables, mapped out in detail.
https://miro.com/app/board/uXjVMXK-nP0=/
https://miro.com/app/board/uXjVMW0RIZ8=/
Critical Updates - Summary of issues
Wrong branding
Status colour Red title CONFUSION Issues with button types, style and position
Status title LEGIBILITY Status colour Purple title consistency Form content alignment and spacing
Status title LEGIBILITY Font sizes
Status title LEGIBILITY Status colour Purple title consistency Missing CTA buttons
Status colour Yellow title Navigation
...
Type
...
Request
Used in 3 amigos: https://miro.com/app/board/uXjVMHU2hLQ=/
For the purpose of this meeting we did not address any of the maintenance pages.
Type | Request | Criticality | Outcome Comment | Phase | Status | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Header | Replace all instances of eKeeper Logo with finova 'f' logo |
| Should be easy, just need to be conscious that white-labellig still works |
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 2 | Header | Menu items to match UI design |
| To confirm - ticket to restyle the header already in play? |
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 3 | Text content | Replace all instances of 'eKeeper' text with 'finova Broker CRM' text |
| Would need to confirm all areas where this appears and then,
| colour | Red
|
|
| Status | |
|---|---|
|
|
|
Status colour Red title Outstanding Status colour Green title Done Status colour Purple title N/A
Buttons
Ensure buttons indicated as primary are correctly defined
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
This is a mega task, approximately 100 locations to make this change (and that isn’t counting all the places where a post it goes to multiple locations).
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Buttons
Ensure buttons indicated as secondary are correctly defined
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
| Status | |||
|---|---|---|---|
|
|
Status colour GreenRed title DoneOutstanding -
Status colour Green title Done Status colour Purple title N/A
Buttons
Ensure buttons indicated as tertiary are correctly defined
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Buttons
Ensure primary buttons are styled correctly
(text size, colour, padding)
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
This should be easier, can update bootstrap styling and see how many buttons it catches.
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Buttons
Ensure secondary buttons are styled correctly
(text size, colour, padding)
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Buttons
Ensure tertiary buttons are styled correctly
(text size, colour, padding)
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
| Status | |
|---|---|
|
|
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Buttons
Move buttons (primary and secondary) to footer where indicated
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
This is a mega job too, and has a big testing impact
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Footer
Ensure a sticky footer is present on all pages and popups
(white background with top stroke)
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
Limited places where this is required, small volume means it’s plausible to do it
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Footer
Reorder buttons in footer button group to match UI design
- ie order of button group: (secondary buttons to left then primary button to right)
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
Footer - would have to do this on many many pages
| Status | ||||
|---|---|---|---|---|
|
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Footer
Position the button group to match UI design
- ie move button group to righthand side of the footer
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Footer
Button label 'Save & Close' has now been changed to 'Save & Exit'
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
Could perform a search, then review, & replace.
Probably not mission critical, but doable
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Footer
Add 'Back' and or 'Close' buttons to indicated pages to allow user to navigate back (without using the browser back button)
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A Status colour
Limited places outlined where this is required, small volume means it’s plausible to do it
| Status | ||||
|---|---|---|---|---|
|
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Footer
Ensure 'Top' button appears on the far right-hand side of all sticky footers
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
Footer - would have to do this on many many pages
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Footer
Replace all instances of ‘eKeeper CRM V5X' text with 'finova Broker CRM’ text
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
Would need to confirm all areas where this appears and then,
| Status |
|---|
|
|
| Status | ||||
|---|---|---|---|---|
|
Status colour Red title Outstanding Status colour Green title Done -
Status colour Purple title N/A
Dashboard
'All Users' bar (circles with initials) - Decrease text size slightly
- for initials
- for names (underneath)
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
Very limited scope, easy to achieve
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Business summary
'Stages' bar (blue coloured boxes) - Decrease text size slightly
- for numbers
- for labels (underneath)
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Forms
Input fields
- Ensure all input field labels are the same font size
Status colour Green title CRITICAL Status colour Green title CRITICAL colour Green title Desired Status colour Purple title N/A
This is a pretty big task to find all the locations where this is an issue and change them - by the looks of the miro it is happening all over the place and we are unsure of whether these are all separately styled elements (would be time intensive to change) or common (would be less intensive)
| Status | |
|---|---|
|
|
|
Status Status colour Purpletitle N/A colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Forms
Input fields
- Ensure input text is the same font size as the field label
i.e. needs enlarging in many cases
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Forms
Input fields
- Ensure spacing between label and input field is sufficient and consistent
-
Status colour Green title CRITICAL -
Status colour Green title Desired Status colour Purple title Desired N/A
Limited places outlined where this is required, small volume means it’s plausible to do it
| Status | |
|---|---|
|
|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Forms
Input fields
- Ensure spacing between input field and icon is sufficient and consistent
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Forms
Bullets
- Vertically align text and bullet so as on same baseline, as shown in UI designs of Fact Find, and ensure sufficient space between bullet options
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Forms
Checkboxes
- Ensure bullet and label appear on single line and are vertically aligned on same baseline, as shown in UI designs of Fact Find, and ensure spacing between elements is correct and consistent
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
| Status | |||
|---|---|---|---|
|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Forms
Bullet & Checkbox Labels
- Where a label is long and breaks into multiple lines, ensure all lines of text left align
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Forms
Page title headers
- All should be Montserrat, Semibold 30px|38px #494A4D
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
We hope this would be very easy to do (caveat, we won’t know until we’re in there looking at it)
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Forms
Panel title headers (featured on a page)
- All should be Montserrat, Semibold 20px #494A4D
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
| Status | |
|---|---|
|
|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Forms
Popup window title headers
- All should be Montserrat, Semibold 16px #494A4D
(with 16, 24, 16, 24px padding)
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Forms
Product tables
- Table headings - vertical spacing sometimes incorrect
(ie first line and second line text overlaps making heading illegible)
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
Limited places outlined where this is required, small volume means it’s plausible to do it
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
Forms
Product tables
- Ensure table heading and column data is aligned
-
Status colour Green title CRITICAL -
Status colour Green title Desired -
Status colour Purple title N/A
| Status | ||||
|---|---|---|---|---|
|
-
Status colour Red title Outstanding -
Status colour Green title Done -
Status colour Purple title N/A
...