Making it easier for users to understand a funding allocation change

Background to the change

The Manage your education and skills funding (MYESF) service needs to enable all users working with allocation statements to quickly identify if their funding allocation has changed. They need to ascertain: how much is the change, which funding elements are involved and what caused the change? The variance indicator feature helps to convey this information, by showing a numerical increase or decrease in £ funding value.

As we started to research the problem space, we found there wasn’t an established component in the GOV.UK Design System that met this need. We did, however, come across a solution being used in View Your Funding (VYF) and the National Funding Formula (NFF), which are other parts of the service. We initially planned to reuse it, but quickly realised it wasn’t accessible.

In the screenshot above, we've highlighted how the variance indicator component appears in VYF and NFF.

The problem - A helpful feature, that needed to work better

Previous research told us that users welcomed this feature, but some of them also said it would be more useful if a descriptive label, such as a tooltip, appeared as you hovered over. In another research round, a user said “variance indication is beneficial, if it were clear”.

Our research also told us that icons weren’t, and still aren’t, a part of the GOV.UK Design System. As a result, they lack crucial built-in elements that make them accessible to all.

So it made sense to investigate further and update the variance indicator to improve its design and accessibility.

Our design approach

After analysing our previous research, the first step was getting the component to stand out among other content on a funding allocation statement page. We used simple CSS styling and the GOV.UK colour palette to turn the component red when it needed to show a decrease in value, and green for an increase in value. We also made the text bold to make it easier to spot.

As a team, we felt it was important to get input from other designers. We strongly felt it would help us to explore a range of possible solutions. We hoped they might also tell us if similar and accessible components were already being used in other services.

So we prototyped a first iteration, and took it to the interaction design community to get their feedback.

The screenshot above shows our first iteration of the redesign, before it was shared with the design community.

The immediate feedback, especially from Andy Jones, Head of Design at DfE, was that it looked too similar to the existing GOV.UK Design System ‘details’ component, which also features a triangle. This does a very different job, by letting users reveal more detailed information if they need it.

Andy suggested replacing the triangle with an arrow, again using CSS. Using this and other feedback, we took another look at the component. We kept the bold text, but introduced a recognisable arrow, which could be rotated to reflect the funding change being shown.

The screenshot above shows this new design in context, with the component highlighted as before.

How the new variance indicator works

Our iteration didn’t end with visual styling. We also wanted to ensure that the component was accessible to users of assistive technologies, such as screen readers.

We made the following design decisions to align the component with the GDS look and feel:

• the 'decreased' variance indicator is GOV.UK red #d4351c
• the 'increased' variance indicator is GOV.UK green #00703c
• the text font and arrow icon are bold
• the font size is 18px on a larger display
• the font size is 15px on a smaller display
• the variance icon is always an arrow

The screenshot above shows the ‘increase’ and ‘decrease’ versions of the redesigned component.

And we designed for accessibility by ensuring:

• the GBP £ value amount has a hover over tooltip label that either says 'Decreased by' or 'Increased by' depending on the variance indicator
• the arrow includes alt text to describe the icon, reading: "A red down arrow indicating a decreased value" or "A green up arrow indicating an increased value" depending on the variance state
• the icon's aria-label can be read by a screen reader to say either: "decreased by" or "increased by"

The above video snippet shows the new component being read by a screen reader.

Positive feedback from the community and users

We demo-d the redesigned component to the interaction design community, and got lots of positive feedback. One senior designer felt “this component would have a lot of uses across the service.” While another mentioned that it’s led her to learn more about patterns or components that are currently in use when displaying allocations.

We then put the component into round 5 of user testing for the MYESF Local Authority ‘parent view’. It was welcomed by all users as they navigated through the testing scenarios. One of them said:

"So it's only the one school that has got a drop... that's good to see! Immediately you can see whether it's something that's changed across the board at authority level or whether there is just a certain school affected. That just concentrates the mind about what might have changed or whether you're aware of anything at the school level that could have led to those changes. So yep, that's good. We normally have to compare with the previous statement. Seeing it here saves us that extra leg work."

Overall, the newly designed and iterated variance indicator format tested successfully and was welcomed by users, as well as the interaction design community. Roll out the design!

Next steps

While this component isn’t currently in GDS, it is in the GitHub backlog. We plan to create a short case study, and propose it as a new design component for the DfE Design System as well as GDS.

Our proposal would also help to push for a proper design category in GDS for icons, that are accessibility compliant and universally recognised across the government services that need them.

In the meantime, we hope our work has highlighted the problem space to other designers, in case they face a similar issue on other services, both in and outside of DfE.