Changing our information architecture and navigation UI

User needs

As a project lead trying find trust details in FIAT
I need to understand the layout and how things are grouped
So that I don't miss things or waste time on the wrong page

What we did

Information architecture

Firstly, we needed to better understand FIAT's existing ‘information architecture’, which describes how its content is structured. The Nielsen Norman Group has more on information architecture.

We chose to create ‘sitemap’, so we could better visualize content grouping and page relationships. Avoiding wireframes and visual distractions at this stage made it clear where improvements to things like page titles could be made – particularly ‘Overview’ and “Details”.

We already had an idea of the priorities that to come this quarter. A second sitemap helped us to plan a hierarchy of parent pages (level 1) and their children (level 2). We included work we knew was coming so we could make a guess at where that might sit. This helped us see how existing content could be re-positioned.

Next, a FIAT IA map would live alongside the service map, with each informing the other. The “FIAT Service design and IA map” Lucid board would become the starting point for any new feature or epic, and the last place to be updated after a piece of UCD work.

Feedback from users

The previous solution was designed and built roughly 18 months ago as of December 2024. FIAT has come a long way since then and as we look to add in more data, feedback about spacing and readability is becoming more consistent and frequent.

Feedback often falls into one of four buckets:

1. I like using it, but I want more columns of data
2. I sometimes experience brain fog, and I find it difficult to remember information across pages
3. I love how information is broken down into smaller chunks
4. I hate scrolling!

Other user feedback included comments like:

• "I'm scrolling down to find that academies in trust, [..] because this bit [side menu] still ends up above the screen [..] but I'm not sure if I was on a smaller screen I'd necessarily know to Scroll down.”
• "I forget to scroll and then I get really frustrated because I can't find the information."
• “I find this really clear, I like how spaced out it is”

Feedback from the team and community

We then spent some time with the FIAT team and wider UCD Communities, asking between us which aspects of the current design we felt were working well, and which were becoming a hindrance. This “design crit” uncovered a few additional opportunities for improvement, such as:

• Sidebar will become very long and difficult to follow as we add new features and groupings
• Sidebar narrows the body area, making tables smaller and limiting space for bespoke designs (e.g. graphs for financial information)
• Lots of interactive elements fighting for attention The sidebar takes time to cycle through when navigating by keyboard
• Narrow tables add vertical scrolling and content within rows of a table can drop to two or three lines
• The phase banner and feedback link “break up the flow” of information at the top of each page - especially when using a screen reader
• There are many duplicate links asking for feedback, suggestions or requests for when help is needed

Wireframing

Next we sketched and wireframed ideas in Lucid. We didn't need the higher fidelity, as we wanted to focus on the information hierarchy. This would only involve the shell, or “Navigation UI”, that sits outside of the main area of a page. Once we had enough to experiment with, we mocked it up in the FIAT prototype kit.

We considered components and patterns from design systems outside of DfE, including GOV.UK (for “Service navigation”) and MoJ (for “Sub navigation”). We felt comfortable experimenting with what MoJ had to offer, as we were already drawing from that library elsewhere in the product.

We also thought about how new items like the breadcrumb trail would fit in with a navigation change. This was originally brought in so that users could navigate back to 'home'- and nowhere else. But with a tiered IA, we could now include breadcrumbs for Level 1 and Level 2 pages.

As it's traditional for website-based designs and more appropriate for those with screen readers, we also moved it above the H1. Given we had raised the breadcrumbs, we also lowered the phase banner and the feedback call to action. We experimented with grouping this type of link into one area of the RSD footer, which was already appropriately named. This also meant we could remove some redundant links.

Our final challenge of focus was toward pages that had multiple sub-pages (level 2) and multiple tables within those. Our best test example was the “In the trust” sub-page, under “Academies”, as it already had 4 tables of data.

Other wireframed improvements were:

• An expanded container - Removing the sidebar meant the page container could become full-width (to DfE standards) and allow full-width tables
• Full width tables - Wider tables would make information easier to read, especially where it previously spanned two lines. It will also allow us to add more columns and new data in the future.
• Less vertical scrolling - Removing duplicate links (e.g. “there is a problem with this page”) along with making tables wider, reduced vertical scrolling in most cases
• Clearer navigation - Primary and secondary levels of navigation help to make content grouping clearer and are easier to navigate, as all options follow each other horizontally

User testing and build

Following some sessions with SMEs and usability sessions to test and click around the prototype, we proceeded to build the changes into the live product.

• “This feels like a better use of space”
• “I like it all at the top rather than at the side”
• “It looks more neat like this”
• “Tables seem quite clear”

Communication was vital between the UCD and technical teams, as we decided not to mock every page in the new shell to save on time and resources given our other deadlines.

Instead, we made our decisions against the IA map and an unwritten rule was born - “information is either in a table, or a summary list”. This, along with our new IA, will help to ensure that FIAT pages remain consistent, and ensures efficiency by re-using current components and patterns. The user should significantly benefit too, as hopefully no other bespoke design will be needed for future priorities.

FIAT's current layout and navigation grew from feedback and input from stakeholders during discovery. This helped us to create a product that they understood and were able to use. Since then, things have changed and new features have been added. We need to make sure users can still find what they need.