Focusing on usability and accessibility with new interface updates

Posted on Thu 27 October 2022
Written by Flexi-Grant

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.

The Design System
The Design System

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.


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.

Design system colours
Design system colours

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.

Flexigrant navigation dropdown
New account dropdown menu
Flexi-Grant main navigation for reviewers
Main navigation changes, as seen by a reviewer
Main navigation on a small screen
The main navigation hides on a small screen and can be expanded
Main navigation expanded
The main navigation can be expanded on a small screen

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.

Sidebar collapsed
The side bar is initially collapsed on small screens
Sidebar expanded
The sidebar can be expanded on small screens to show the full menu

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
New application header
New application header

Application navigation

The navigation options within an application form have been updated to align with the Design System.

New application navigation
New application navigation

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.

Application form required fields
Application form required fields

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.

Layout of a question
Layout of a question

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.

Replacement impersonate feature
Replacement impersonate feature

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.

Impersonate banner
Impersonate banner

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