Since the approval of our Alpha designs during the RAG assessment on 18 December 2024, we've made significant progress towards the Beta release. The first quarter of the year has seen numerous changes, driven by further user testing, stakeholder engagement, and technical input. This document outlines the key design changes we've implemented.
Alpha approved designs
Design changes
Category page
In the Alpha designs, we utilised the Accordion GDS element. This allowed users to view the title and description of each buying option, with the ability to expand for more details and reveal call-to-actions. While initially effective, the addition of real-time data made the pages appear busy and distracting. With 15 buying options, there would be 15 accordion elements and 30 call-to-actions, along with their titles and descriptions. This design pattern also required more content to be written.
Upon migrating approximately 60 buying options from FAF to FABS, we faced the challenge of managing 60 call-to-actions, 60 'learn more' links, and 60 new short descriptions within the accordion design component.
To address this, we referred to DfE design guidelines, other DfE services, and GOV UK services. We identified a design element known as 'skinny cards' (unofficially named), inspired by the official DfE component 'cards'.
Use of accordion component
DfE Card Component Screenshot:
Skinny Cards Design Screenshot:
We are already using DfE cards on the home page, which fits seamlessly into our existing user experience. Users can navigate from the Home page to the Category page with one click, and from the Category page to the Buying options page with another click.
We decided to reserve all detailed content and call-to-actions for the 'Buying option details' page.
Before and after of Accordion vs Skinny cards
Highlights on the change of component:
- When using the accordion component, expanding sections can make the page significantly longer, complicating navigation for users.
- Having a large amount of content on one page can make the accordion component overwhelming for users.
- The accordion component can slow down page load times due to the extensive content and multiple elements, such as provider logos.
- Skinny cards provide a minimal and straightforward list view, which is particularly beneficial when there is a long list of options.
- Each buying option in skinny cards has a dedicated and single call to action, making it easier and quicker for end users to follow.
- Skinny cards require less content, simplifying the information presented to users.
- There is minimal extra content on the page, reducing clutter and enhancing the user experience.
Sidebar
FABS is a new service, but it primarily uses the same data from FAF, which is hosted on GOV UK. As FABS transitions to the Education domain, content and link redirection will be necessary. For the MVP, not all GOV UK guidance pages can be moved to FABS. Therefore, we are using the sidebar component to keep external links within FABS. These links are reserved for guidance and training materials hosted on other sites, such as GOV UK, Eventbrite, YouTube, DfE blog, LinkedIn, etc.
Example of Sidebar Utilisation:
Usability Feedback Page
FABS currently gathers feedback from users before they navigate to external sites to start their procurement journey. We've revised the question set on this page to obtain more meaningful answers that can guide us in improving the service, rather than receiving generic feedback.
Usability survey - before and after
