Flexi-Grant has begun a journey of transition towards what is known as a Progressive Web App (PWA). A hybrid platform that takes the best of web design technology and merges it with familiar design and layout concepts found in mobile and tablet applications.
Fundamental to this journey is a good starting point. A foundation with heavy focus on consistency, usability and accessibility.
Flexi-Grant v4.0 features many enhancements to our user experience and accessibility. We know that change can be worrisome, but rest assured that Flexi-Grant still operates as it did before. We have added many improvements to the interface including under-the-hood accessibility updates, but fundamentally have not changed how you interact with it.
So what has actually changed?
Design System Introduction
Those familiar with brand guidelines will be familiar with the idea of a Design System. A set of rules and guidelines that dictate how things should, look, feel and operate.
Flexi-Grant’s new Design System focuses on Usability, Accessibility and Modernisation. Based around Google’s tried and tested Material Design, we take influence from the wealth of experience and feedback already implemented by Google and use it to ensure our designs are familiar and understandable. We take inspiration from many interfaces you see day to day, such as menus and interface layouts already in use by Google and other systems.
We want to make sure that Flexi-Grant is still familiar. The changes we have implemented are primarily cosmetic, keeping Flexi-Grant’s functionality as it was, but adding a fresh modern feel to the interface. Familiarity between old and new is key to ensuring people can adapt quickly to the design changes.
Typography
We moved from using the fonts such as Myriad Pro and Arial to Open Sans, a more modern font. We also moved away from offering custom fonts as part of theming options as it was having a detrimental effect on our ability to ensure accessibility compliance.
The primary reason for this is consistent legibility and accessibility. Open Sans is a modern, multi-lingual font that is available in a wide range of font weights. This allows us to use creative typography beyond the limits of older fonts.
Colour usage
Through the Design System we defined a range of complimentary colours and their usage within Flexi-Grant. We ensure that colours all comply with WCAG guidelines and that each colour represents a message or purpose. For example, use of reds that define a critical decision or danger, informational blues and positive greens. Have a look at colour theory if this interests you.
Changes to Interface and Layout
Flexi-Grant has introduced a number of structural changes that for the most part do not change day to day usage. The changes take advantage of modern larger screens, as well as continuing support for smaller laptop screens.
Wider Interface
Flexi-Grant previously had a fixed width of 1280px and did not scale in size beyond that for larger screens. The vast majority of modern desktop/laptop screen resolutions range from 1366px to 1920px, with around 5-6% using 1280px or lower.
The interface will now scale in width to accommodate the full width of the screen it is viewed on allowing for maximised use of the available space. We still offer support down to 1280px and have introduced some additional supportive functionality for users at 1280px resolution.
Replacement header / navigation
As part of the modernisation of Flexi-Grant’s design, we have made changes to the main header and navigation, bringing it inline with modern product design.
The redesign restructured the navigation to remove the sub-navigation options and relocate them to a new account navigation menu that groups options related to the current user or impersonating users.
As part of this restructure, the options have been rearranged as follows:
- Admin: This option is now located on the main menu bar. It was previously on the sub-navigation.
- Bookmarks: This feature has been removed as it was not in wide use.
- Inbox: This is now an icon on the main menu, illustrated by an envelope.
- Help: This is now an icon on the main menu, illustrated by a question mark.
- Downloads: This is now an icon on the main menu, illustrated by a download arrow.
- My account: This is now located in the account dropdown, found by clicking the user avatar.
- Cookie and privacy policy: This was previously located in the footer and is now located in the account dropdown, found by clicking the user avatar.
- Impersonate: This was previously to the right of the main navigation and is now located in the account dropdown, found by clicking the user avatar.
- Client specific privacy policy: This was previously located in the footer and is now located in the account dropdown, found by clicking the user avatar.
Specific changes have been added for users with screens 1280px or smaller. As space is at a premium, the main navigation will collapse into an expandable menu, illustrated in the following screenshots.
Replacement footer
The Flexi-Grant footer will now only appear when logged out. Whilst logged in the options are hidden and can be found in the account dropdown. For the most part a footer was considered unnecessary and only remains whilst logged out to give access to privacy tools.
Sidebar navigation changes
The sidebar navigation remains largely unchanged, except for small screens of 1280px or below.
Due to space being at a premium, we have introduced a collapsing side navigation on small screens. This collapsing side navigation will begin collapsed and can be expanded when required.
Application form changes
Completing a large application form is difficult for users at the best of times. We focused on reducing cognitive load for users, whilst ensuring that changes introduced minimal disruption.
Application form header
We optimised the application form header to improve visibility of the following:
- Available options
- Submit button
- Session timer
- Progress bar
Application navigation
The navigation options within an application form have been updated to align with the Design System.
Application questions
Changes to questions are primarily centred around providing clear guidance. Changes have been implemented to required fields and labels/guidance.
Required fields
Required field stars were previously located to the right of questions. Their position was not consistent and introduced eye movement to determine what questions were required. We have now moved the required stars to the left of the question.
Labels and guidance text
Emphasis has been placed on differentiating a question and associated guidance. Questions now appear in a much bolder font with the optional guidance below using regular text. Good questions should be short and to the point, it should not use long examples explaining what you are asking for. Guidance is used for the purpose of explaining the question and providing examples where required.
Impersonate User Feature Redesign
The optional Impersonate User feature has been completely overhauled. The revised version of this tool allows for a more fluid user experience, with improved searching for individuals or user roles.
When impersonating a user, you will now see a highly visible banner informing that you are in ‘impersonation mode’.
To stop impersonating, the Stop Impersonating button provides an easy way to stop impersonation without having to manually revert to the original user.
Accessibility Changes
Core to making Flexi-Grant usable by users from all backgrounds is accessibility. Flexi-Grant is to be inclusive of all users, we don’t treat those with special needs as after thoughts.
As part of the suite of UI updates, we implemented many changes and updates related to WCAG AA accessibility compliance. These were primarily concerned with accessible fonts, colour contrast and assistive device coding.
Changes are as follows
- Overall replacements of fonts and font sizes to comply with WCAG font/legibility guidelines. Font sizes were increased from 14pt to 16px in most places. Exceptions remain for supplementary guidance text
- Overhaul of colours used to ensure contrast compliance with WCAG AA/AAA guidelines. All colours comply with at least 4.5:1 contrast ratio, including themed content
- Implemented ARIA tags in new account dropdown
- Implemented ARIA tags in expandable side navigation (on small screens)
- Restructured many forms to position the label above the input, for reduced cognitive load
- Input / label relationships improved in numerous locations across the interface
- Implemented jump to content menu, accessible to keyboard only users