Developing the new comparison feature after user feedback
The last round of user research on helping users to analyse their general annual grant statements, showed us that we needed to further iterate and test the way users changed their comparison options.
Half of the participants struggled to switch between comparison views, as the functionality sat on a separate page. Two-thirds of them missed the option to head there from the breadcrumb, which we thought would help with signposting. Instead, we saw users heading back to the start of the journey when they were asked to switch views, and then get lost.
The design challenge – enabling comparison on the statement page
Our analysis of the research findings suggested that locating a comparison option selector at the top of the statement would help. It would shorten the comparison journey overall. And make it more intuitive for users to switch between the different views available.
Users seemed to have the same idea; 2 research participants in an earlier round independently suggested a toggle feature within the statement, instead of the separate comparison option selection page that we’d shown them.
Our approach
Embedding the comparison option selector in the statement page raised some important questions about accessibility as well as managing users’ expectations. It also meant we’d be designing a non-standard use for GOV.UK Design System components such as radios.
We began by quickly sketching out ideas on paper in a face-to-face session, to share our thoughts on possible designs for the new comparison option selector. We also wanted to talk through how content on the statement page might be structured in future.
We collaborated to produce early design sketches on paper, but found it easier to continue the work in Lucid when we were working remotely.
After reviewing 3 options in Lucid, we decided to take 2 further, and create lo-fi prototypes in Figma for the top of the statement page, to see how it might look ‘above the fold’ on a desktop screen.
Building lo-fi prototypes in Figma helped us to get a sense of how the top of the statement page would look if we used radios (upper image) or links (lower image). We particularly wanted to see how much content would sit above the fold on a desktop screen; the triangles on the left- and right-hand edges of each image gave us a rough idea of its location.
We did this to see whether:
- it was worth developing the idea of using radios or links further
- one of the designs made better use of the space available
- one of the designs felt more familiar or obvious to users
- the content for radio labels or links could be shortened to create more space
- the print, save and download links could be moved to the bottom of the page
An accessibility expert’s view
Next, we presented the Figma screens to a member of the DfE accessibility team, to get their feedback. This was generally positive for the radios option, but the links were problematic, as users generally expect these to take them to another page.
We were advised that our chosen design needed to:
- ensure that all changes on the page took place below the comparison option selector, so they can be captured by a screen reader
- alert the user to changes on the page, by altering what they saw without scrolling down
- ensure the change would persist until the user selected another option
- make it clear that only 1 option could be selected at a time
The design community’s feedback
This was positive too, although one person did say: “Part of me understands why it was done, but another part is wrestling with using radios this way.” Radios are designed to be used when users can only select one option from a list. This generally happens when the question being asked, or the list of available options, is the only content on the page. In our design, the radios are on a page with other content.
Our final iteration of the lo-fi prototype showed it was possible to make space for the comparison option selector, and ensure users were alerted to changes onscreen when they selected a comparison option. To enable this, we'd need to ensure that radio labels were kept short, and no longer than 1 line each.
User research
We tested our prototype with 5 users, all of whom are experienced school finance professionals. None of them reported having health conditions that would affect their use of digital services, although 1 made use of assistive technology, including a larger mouse to ease a repetitive strain injury (RSI).
We wanted the prototype to give us clear answers to some important questions, including:
- would users always head to the school budget share tab first (as this usually comprises most of their GAG funding)?
- do users understand the comparison option selector?
- are the comparison options easy to distinguish from one another?
- does the comparison option selector prevent users from reviewing the statement detail or affect their awareness of content changes?
- what should the default comparison view be?
- can users still find the save, print and download CSV links?
We also used this round of research to:
- see whether the shortened journey made it easier to locate the comparison options and statement history
- check how well they understood a minimum funding guarantee calculation, once the table was also populated with variance figures
What we learned from user research
Our users clearly ‘got’ what the new comparison option selector could do for them. They understood the radios helped them to remove and add variances to the data they saw on screen. The shortened radio labels also made it easy to understand which statements were being compared, whether these were issued in the same or different academic years.
All our research participants said it would make their lives easier:
“I really like this. It shows what's gone up and what has gone down, which is what I normally do.”
“This is more user friendly than the PDF. With extra information for people new to the sector.”
“So it’s been updated. And you get two sets of comparisons. That’s good.”
In testing, users interacted freely with the new comparison option selector at the top of the statement, and quickly spotted the variance indicators that communicate each funding change in the tabs and tables below.
Next steps
This round of research completed our design work on main GAG digital statements. We'll be passing it on to developers to build, and expect it to launch later this year. Once it's live, we'll monitor feedback and conduct follow-up research with users to see how they're getting on with this feature.
We'll also be contributing our findings to the GOV.UK Design System, and submitting the comparison option selector for consideration as a new component in the DfE Design System.