Customisable header pattern

[robertjmccarthy]

Background

A header component exists in the MoJ Design System. This is an experimental pattern that combines a number of components.

In July 2024, a review was carried out on the header component. This review was to understand how the component was being used. In summary, the review showed that internal MoJ products have inconsistency in their headers.

What's the problem

• Internal MoJ products have inconsistency in their headers.

Why is this a problem?

• Some services have user journeys that traverse products. Inconsistent headers gives a jarring experience.
• Product teams have to take on the maintenance of their unique header.

What does good look like?

• A single header that meets the needs of product teams.
• Teams using a single header version from the MoJ Design System.
• All product headers meeting standards for accessibility and usability.
• Maintenance of product headers sitting centrally.

Why would this be good?

• Consistency for users when traversing multiple products.
• Cost saving and effort saving - ease of maintenance for product teams.

What has been done?

• Audit to highlight the variation in applying the existing header component to internal MoJ products.
• An audit of headers used across internal products has been carried out and individual items have been identified.
• A proposed header pattern created and put to MoJ colleagues for review and feedback.
• Synthesis and planning of the feedback and insights completed.
• Update provided at MoJ Design System show-and-tell (July 2024) of the work and an emerging header pattern.

Next steps

• As of September 2024, this work is paused due to the emerging header pattern being a large piece of work, and the MoJ Design System team prioritising other smaller pieces of work to deliver.
• However, the groundwork has been completed for a customisable header pattern.
• This pattern has been added to the MoJ Design System's roadmap.

[robertjmccarthy]

Reuse this experimental pattern

Below is information on what artefacts are available to anyone wanting to reuse this work.

This is an experimental pattern. It is not an official part of the MoJ Design System which means it may not meet the required quality, usability, accessibility and consistency standards.

If you reuse this work, please do add to the discussion to improve this experiment.

---

WCAG 2.2 compliant

• No accessibility testing, checks, or audits have taken place.

Documentation

• None.

Research

• Work has been carried out to audit headers across MoJ internal products, as well as gather feedback and input from a range of MoJ colleagues.
• Research carried out has been documented on a Miro board.
• No usability testing has taken place.

Figma

• As of September 2024, a version of the header pattern exists in Figma, but it's not in a position for it to be easily used.

Code

• None.