We have incorporated components from three separate design systems:
- GDS, GOV.UK Design System
- DfE Design System
- MoJ Design System
Benefits of Using Official Components
Using official components from these design systems provides several advantages:
User Centred Design: These components have undergone extensive user research and testing, ensuring they meet the needs and expectations of users.
Consistency: By using standardized components, we maintain a consistent look and feel across our service, which enhances usability and user trust.
Accessibility: The components are designed to be accessible, ensuring that our service is usable by people with a wide range of abilities.
Responsiveness: The components are built to be responsive, providing an optimal viewing experience across a variety of devices and screen sizes.
Design Systems Overview
GDS, GOV.UK Design System
The GOV.UK Design System provides styles, components, and patterns to create consistent and user friendly government services. It includes:
Styles: Guidelines for applying layout, typography, colour, error messages and images.
Components: Reusable, accessible components for forms, accordion, back link, buttons, check boxes, footer, phase banner, radios.
Patterns: Solutions for tasks service pages and step by step navigation.
Community and Accessibility: A strong community and a focus on accessibility ensure continuous improvement and relevance.
DfE Design System
The Department for Education (DfE) Design System extends the GOV.UK Design System and includes:
Styles: Specific guidelines for typography, colour, and more.
Components: Building blocks for creating consistent user interfaces, such as cards designs, header and skinny card designs.
Patterns: Solutions for common design problems and user interactions.
MoJ Design System
The Ministry of Justice (MoJ) Design System also builds on the GOV.UK Design System and provides:
Components: Reusable parts of a user interface that support filter and sidebar navigation for FABS.
By integrating components from these well-established design systems, we ensure our service is user-friendly, consistent, accessible, and responsive. This approach not only enhances the user experience but also aligns with best practices in digital service design.
List of elements we are using from design systems:
GOV.UK Design systems elements:
Prototype, set-up and Heroku - https://design-system.service.gov.uk/get-started/prototyping/
- Page templates - https://design-system.service.gov.uk/styles/page-template/
- Layouts - https://design-system.service.gov.uk/styles/layout/
- Paragraphs, links and lists - https://design-system.service.gov.uk/styles/headings/
- Accordion - https://design-system.service.gov.uk/components/accordion/
- Back link - https://design-system.service.gov.uk/components/back-link/
- Buttons - https://design-system.service.gov.uk/components/button/
- Checkbox - https://design-system.service.gov.uk/components/checkboxes/
- Error message - https://design-system.service.gov.uk/components/error-message/ and https://design-system.service.gov.uk/components/error-summary/
- Footer - https://design-system.service.gov.uk/components/footer/
- Phase banner - https://design-system.service.gov.uk/components/phase-banner/
- Radios - https://design-system.service.gov.uk/components/radios/
- Input - https://design-system.service.gov.uk/components/text-input/ and https://design-system.service.gov.uk/components/textarea/
- Service pages - https://design-system.service.gov.uk/patterns/page-not-found-pages/, https://design-system.service.gov.uk/patterns/problem-with-the-service-pages/, https://design-system.service.gov.uk/patterns/service-unavailable-pages/
- Ste-by-step navigation - https://design-system.service.gov.uk/patterns/step-by-step-navigation/
DfE design system elements
- Overall style, colour and typography - https://design.education.gov.uk/design-system/styles
- Cards - https://design.education.gov.uk/design-system/components/card
- Header - https://design.education.gov.uk/design-system/components/header
MoJ design system elements
- Side navigation - https://design-patterns.service.justice.gov.uk/components/side-navigation/
- Filter bar - https://design-patterns.service.justice.gov.uk/components/filter/
Custom elements created for the service
- Skinny Cards: Originally used exclusively on GOV.UK pages, these new cards are now being implemented across multiple services within the DfE.
- Custom Service Hub/Home Page: The GHBS home page serves as a hub for multiple services, necessitating a custom header section with a larger search bar. This feature has proven to be very useful in user testing sessions.
Custom-developed elements are WCAG compliant and mobile-friendly. Additionally, these elements have been discussed with the 'Patterns and Components' group in the DfE for further research and potential A/B testing to evaluate their performance.