CRM - UI Update Spike

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 CONFUSION
Issues with button types, style and position LEGIBILITY consistency
Form content alignment and spacing LEGIBILITY
Font sizes LEGIBILITY consistency
Missing CTA buttons Navigation

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

	Type	Request	Criticality	Outcome Comment	Phase	Status
1	Header	Replace all instances of eKeeper Logo with finova 'f' logo	CRITICAL Desired N/A	Should be easy, just need to be conscious that white-labellig still works	it's in!	Outstanding Done N/A
2	Header	Menu items to match UI design - Change text colour to Finova Blue 700 (#5782C2) 100%, - Link state (hover, down, etc)... ie down state text is bolder - Response menu - navigation items into burger menu - breakpoints as Fact Find - Add spacing between 'Create Case' button & ? icon - Remove '+' icon from 'Create Case' button - Replace avatar (coloured circle) with burger menu	CRITICAL Desired N/A	To confirm - ticket to restyle the header already in play?	it's in!	Outstanding Done N/A
3	Text content	Replace all instances of 'eKeeper' text with 'finova Broker CRM' text	CRITICAL Desired N/A	Would need to confirm all areas where this appears and then, it's in!	it's in?	Outstanding Done N/A
4	Buttons	Ensure buttons indicated as primary are correctly defined		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).	ooft
5	Buttons	Ensure buttons indicated as secondary are correctly defined			ooft
6	Buttons	Ensure buttons indicated as tertiary are correctly defined			ooft
7	Buttons	Ensure primary buttons are styled correctly (text size, colour, padding)		This should be easier, can update bootstrap styling and see how many buttons it catches.	it's in?
8	Buttons	Ensure secondary buttons are styled correctly (text size, colour, padding)			it's in?
9	Buttons	Ensure tertiary buttons are styled correctly (text size, colour, padding)			it's in?
10	Buttons	Move buttons (primary and secondary) to footer where indicated		This is a mega job too, and has a big testing impact	ooft x2
11	Footer	Ensure a sticky footer is present on all pages and popups (white background with top stroke)		Limited places where this is required, small volume means it’s plausible to do it	it's in?
12	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)		Footer - would have to do this on many many pages	ooft
13	Footer	Position the button group to match UI design - ie move button group to righthand side of the footer		Footer - would have to do this on many many pages	ooft
14	Footer	Button label 'Save & Close' has now been changed to 'Save & Exit'		Could perform a search, then review, & replace. Probably not mission critical, but doable	it's in?
15	Footer	Add 'Back' and or 'Close' buttons to indicated pages to allow user to navigate back (without using the browser back button)		Limited places outlined where this is required, small volume means it’s plausible to do it	it's in!
16	Footer	Ensure 'Top' button appears on the far right-hand side of all sticky footers		Footer - would have to do this on many many pages	ooft
17	Footer	Replace all instances of ‘eKeeper CRM V5X' text with 'finova Broker CRM’ text		Would need to confirm all areas where this appears and then, it's in!	it's in?
18	Dashboard	'All Users' bar (circles with initials) - Decrease text size slightly - for initials - for names (underneath)		Very limited scope, easy to achieve	it's in!
19	Business summary	'Stages' bar (blue coloured boxes) - Decrease text size slightly - for numbers - for labels (underneath)		Very limited scope, easy to achieve	it's in!
20	Forms	Input fields - Ensure all input field labels are the same font size		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)	ooft
21	Forms	Input fields - Ensure input text is the same font size as the field label i.e. needs enlarging in many cases			ooft
22	Forms	Input fields - Ensure spacing between label and input field is sufficient and consistent		Limited places outlined where this is required, small volume means it’s plausible to do it	it's in?
23	Forms	Input fields - Ensure spacing between input field and icon is sufficient and consistent			it's in?
24	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			it's in?
25	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			it's in?
26	Forms	Bullet & Checkbox Labels - Where a label is long and breaks into multiple lines, ensure all lines of text left align			it's in?
27	Forms	Page title headers - All should be Montserrat, Semibold 30px\|38px #494A4D		We hope this would be very easy to do (caveat, we won’t know until we’re in there looking at it)	it's in? :)
28	Forms	Panel title headers (featured on a page) - All should be Montserrat, Semibold 20px #494A4D			it's in? :)
29	Forms	Popup window title headers - All should be Montserrat, Semibold 16px #494A4D (with 16, 24, 16, 24px padding)			it's in? :)
30	Forms	Product tables - Table headings - vertical spacing sometimes incorrect (ie first line and second line text overlaps making heading illegible)		Limited places outlined where this is required, small volume means it’s plausible to do it	it's in!
31	Forms	Product tables - Ensure table heading and column data is aligned			it's in!

Desired Updates - Summary of issues

Colour correction consistency
Tab styling and alignment LEGIBILITY
Icons consistency
TinyMC styling LEGIBILITY
Enhanced Input field to label alignment consistency
Breadcrumbs consistency
Page specific tweaks

	Type	Request	Criticality	Outcome Comment	Phase	Status

	Type	Request	Criticality	Outcome Comment	Phase	Status
1	Business summary	Pagination controller - Change colour to Finova Blue 700 (#5782C2) 100%
2	Forms	Tabs - Alignment issue on smaller screens
3	Forms	Tabs - Standardise all tabs to the style used on 'Edit existing customer' page but without the italic font - ie change to regular font
4	Forms	Icons - Can all icons associated with an input field be moved to the right of the field
5	Forms	Icons - Update icons to Font Awesome icons
6	Forms	TinyMC interface Remove bevels from buttons
7	Forms	Input field & label alignment as the UI design - Right align input field labels - Left align associated input fields
8	Settings Forms	Breadcrumbs - Change 'Home' to 'Dashboard'
9	Settings Forms	Breadcrumbs - Delete background tint
10	Settings Forms	'Edit Existing Simple Task' page - Place icon in to container that holds colour (suggest 48px x 48px)
11	Settings Forms	'Edit Existing Simple Task' page - Place new icon container in centre of table cell
12	Settings Forms	'Maintain Birthday Communications' page - Delete background tints
13	Settings Forms	'Edit Search View' page - Make text in 'Available fields' font=regular - Make text in 'Currently Selected Fields' font=Semi-bold
14	Settings Forms	'Page List: Burrow Fact Find' page & 'Page List: Generic Fact Find' page - Align diagram left
15	Settings Forms	‘Edit SMS Template’ page - Add space between listed items
16	Settings Forms	‘Edit SMS Template’ page - Move actions, associated with listed items, to right of item text on same baseline

UX

CRM - UI Update Spike

Critical Updates - Summary of issues

Desired Updates - Summary of issues

Related content