Fact Find - UI Amends (March 2023)

CRM header - ‘Create Case’ button please remove '+' icon

• Adds nothing to the messaging

• Unnecessarily pollutes communication to the user

Summary screen (all) - please add ‘Notes’ functionality - (button and panel)

• Logical to have on this page as well as form

• Broker may refer and add notes on this page

Summary screen (all)
- Add footer for buttons
- Add ‘Save & Exit’ button
(note - no need for ‘Save' button as form pages auto saves on exit)

• Footer missing on this page

• CTA Buttons need a home on this page

Summary screen - Drawer (7.0) (Applicant Details)

- Remove the ‘Edit’ button
- Add ‘Close’ button

• Associated with removed functionality

Summary screen - Drawer (7.0, 7.1, 7.3) - Move buttons to foot of the drawer

Add ‘Close’ button to read only drawers

• Consistent with revised UI pattern

Summary screen (all) - ‘Export’… what? - please rename button label to ‘Export fact find’

• Be more specific where space allows to better communicate to user

Summary screen (all) - ‘Start Fact Find’ button - please rename to ‘Fill in fact find’

• Better description of the action associated with this button

Summary screen (all) - move ‘Export fact find’ & ‘Fill in fact find’ buttons to footer

• Consistent with revised UI pattern

Summary screen (all) - Please remove ‘:' after ‘Status’, ‘Subset’ and 'Product’ labels

• Adds nothing to the messaging

• Unnecessarily pollutes communication to the user

Summary screen - Drawers (read only data) (7.0, 7.1, 7.3) - Please remove ‘:' after labels

• Adds nothing to the clarity of the content

• Unnecessarily pollutes communication to the user

Summary screen (5.0) - Remove notification regarding ‘added applicant’

Warning Icon should match notification bar
Warning icon colour in notification updated to match page icon

• Associated with removed functionality

Summary Screen (all) - Transpose the ‘questions answered’ column and the notification message column
- change heading the ‘Questions’

• required to help achieve the correct responsive layout in the mobile version.

Summary Screen (5.1) - change the ‘no entry’ icon for unlinking a product to an ‘unlink icon’

• Better description of the action associated with this button

Summary Screen (4.1) - Change notification heading for Missing Mandatory Data from ‘Warning’ to something more meaningful

Summary Screen - super user (11.1) - ‘Pages that ‘May’ and ‘Do Not’ need to be answered

• update with new styling

Summary Screen (7.0, 7.1, 7.3) - Increase the depth of the top sticky header in the Drawer from 65px to 73px to match the page header

Change background colour of drawer head to match page header and forms version of drawer header

Summary Screen (all) - Rename header ‘Fact find Pages’ to ‘Fact find Summary’

Summary Screen (4.3) - Change notification heading for… page information updated from portal, from ‘Information’ to something more meaningful (4.3)

Forms Screen (4.0) - Show mandatory controller misaligned

• Correction of a misaligned design element

Forms Screen (all) - Show mandatory controller label shortened to ‘Show mandatory only’

Remove all instances of ‘*Mandatory’

Move ‘Show mandatory only’ text and control switch down to align with heading so that it can response under for mobile

• Better succinct communication without losing meaning

• Easier to implement on small screens

Forms Screen (all) - Progress Bar on the top of panels should be replaced with a static full width rule - colour grad

• Associated with removed functionality

Forms Screen (all) - Tick Button in footer should be replaced with a text button ‘Mark page completed’ to the right of the other 2 buttons…(previous & next).

• Better description of the action associated with this button

Forms Screen (3.1) - ‘Mark page completed’ button in the footer - also show ‘Unlock page & Mark incomplete’ variant

Text for tooltip changed to be more explict

Add notification at top of all form pages to show when page is locked

• Better description of the action associated with this button

Forms Screen (all) - ‘Save and close' button in footer should be replaced with 'Save & Exit fact find’

• Better description of the action associated with this button

Forms Screen (all) - Add new button to footer labelled ‘Save fact find’

Add details in footer for ‘Saved’ + timestamp (1.0, 1.1, 1.2, 4.1)

• Missing from design although was required for Case and Product pages

• Added as user would find useful

• Added for consistency

Forms Screen - super user (10.0) - ‘Pages that ‘May’ and ‘Do Not’ need to be answered
- remove ‘key’ and add explanation on hover
- update with new styling
- change notification heading from ‘warning’ to something more meaningful

• Key not required and is only partial

• Tooltip is better solution

Forms Screen (9.0, 9.1, 9.2) - ‘Add another source of income' change to remove word 'another’

• Better description of the action associated with this button

• Button label does not need to change once the first item is added

Forms Screen - Drawer (All) - Move buttons to foot of the drawer

• Consistent with revised UI pattern

Forms Screen (8.1) - Add new icon and tooltip for use when a form field in the Fact Find is pre-populated with data from a linked illustration and read only.

• Product team request

• Added to form page ‘Property to Purchase’ - field ‘Property valuation’

Forms Screen - ‘Notes’ (4.0) - add ability to add multiple note, each with a date / time stamp that are either associated with a page and appears on that page as a read only note in a system panel that is present on all pages, or doesn’t relate to a page and appear only in the drawer as a general note.

User is able to click on a note in the drawer and edit it.

A ‘add note’ tertiary button on the page opens the drawer when clicked that has a ‘add note’ sticky form section at the foot of the drawer, or if the user has the drawer open and is viewing notes and opts to add a new note with the button in the drawer footer.. then the ‘add note’ sticky form section at the foot of the drawer appears (nice if it animated in - rising up out of the sticky footer)

• Proposed functionality updated to meet the needs of users interviewed

Forms Screens (all) - Realign multi-lined label text so that it hangs from the top line (not centred)

• Line up of content to aid in readability

Forms Screens (all) - Please remove ':' after form labels

• Adds nothing to the messaging

• Unnecessarily pollutes communication to the user

Forms Screen (all, 6.1) - Please range right labels (excluding mandatory indicator)

• Line up of content to aid in readability

Forms Screen (all) - Add new navigation item in left nav under the heading of ‘Fact Find’ labelled - ‘Summary View’ that links to the summary page

• Required to allow the user to navigate back to the summary page without using the breadcrumbs as a primary navigation method.

Forms Screen - detail the Postcode lookup process (underneath 1.2)

Designs based on current functionality

Forms Screen (11.0, 11.1) - Increase the depth of the top sticky header in Drawer from 65px to 73px to match the page header.

Forms Screen - Sources of Income (9.0, 9.1, 9.2, 9.3)
- Amend table to fit width of container 808px
- Add guide to how tables response down to mobile
- Add edit drawer to view row data in full and then opt to edit or delete
- Move tertiary button ‘Add source of income’ into panel so as to be consistent with links in other panels (eg add dependent)

Page Header (all) - Add missing functionality to header - System settings, edit user details, raise a ticket

Help - support Portal, Notifications, Settings, Edit user details & logout - Remove avatar job title & and replace with name - add icon for user management

Mobile - Burger Menu - Width of menu to remain constant across all width variations and to appear on the screen - not slide

• Ease of use for user on the go

• Required for customer portal

Mobile - Burger Menu should not be the full screen width and the page should be covered by a tint that compels the user to interact with the burger menu only

• Ease of use for user on the go

• Required for customer portal

Mobile - Burger Menu increase text size of menu items

• Ease of use for user on the go

• Required for customer portal

Mobile - Reduce dominance of ‘Next’ & ‘Previous’ page buttons

• Replaced with icons and succinct labels on mobile

Mobile - Illustrate right hand drawer design for read only data & additional form input functionality (eg 'link to another product)

• Illustrated on forms page (375px)

Mobile - Summary page - left hand page listing - on screen sizes that don’t allow space for this navigation it is to be replaced. Remove the carousel UI pattern currently in the designs and replace with a left hand drawer which is activated from a CTA in the page footer labelled ‘Page Index’

Note:

• Index page content is scrollable

Mobile - Replace CTA’s in footer

- With Icons and labels
- With floating buttons for 'Save' and 'Save & Exit'

Increased visibility over the expanding footer approach and likely easier to implement

Mobile/Tablet - Replace hover tooltips with click to view tooltip

Illustrated on form page (375px).

Note:

• Click to view

• arrow indicator should align with icon

• Dismissed on page reload/refresh

Mobile/Tablet - Illustrate confirmation ‘Modal’ in situ

Mobile/Tablet - Illustrate ‘Search’ function in situ

Mobile/Tablet - Illustrate 'Notes' panel in situ

Right hand drawer as used in the desktop version

Mobile/Tablet - Illustrate 'Export' modal

• Illustrated on forms page (375px)

Mobile - Wrap ‘Status’ & ‘Last…Update’ so all is visible without interaction