Service: Track a query
Phase: Beta
Department: Ministry of Justice

Use the Notification Badge to notify users of something like an unread message.

Service: GOV.UK Pay
Phase: Beta
Department: Cabinet Office

Inform users of upcoming downtime.

Service: Track a query
Phase: Beta
Department: Ministry of Justice

Service: Track a query
Phase: Beta
Department: MOJ

Service: Claim for Crown court defence
Phase: Live
Department: Legal Aid Agency

Use the Password Reveal component to let users check their password safely.

Use the button group component to group buttons together in a row or collapsible menu.

Let users navigate and search your service.

The header for HMPPS staff facing services.

This is a version of the services header from GOV.UK used in Notify and Verify

Elements used in the header:

• HMPPS logo and service name
• Username, Links to users settings page
• Sign out link
• Primary navigation

Switcher is part of another component.

This pattern is now live in the Design System
https://moj-design-system.herokuapp.com/patterns/upload-files

Service: Track a query
Phase: Beta
Department: MOJ

Help users get help from within the digital service.

What

Suggest things as a user types.

Why

This is being used in several services across MoJ, so we should unite and standardise.

Anything else

If you’re using this in a prototype or production service please put links to the service/prototype and associated repos here.
Please also include a video/animation of the typeahead working.

Use the Multi Select component to let users select multiple items in a list.

Use the Identity Bar component to give users context of where they are within a service such as viewing a case.

Service: Prison NOMIS
Department: HM Prison and Probation Service

Service: Child Arrangements Information Tool
Phase: Beta
Department: Central Digital

Comparing multiple options on a table

Use when

• a user needs to compare similarities and differences between different options
• you're comparing more than two things – for example, multiple services across multiple criteria

The Design System includes a table component. However, this component isn’t flexible enough to compare multiple options.

Compare child arrangements

GIVEN a parent
WHEN I search for information about child arrangements
I NEED to understand the available dispute resolution options and what’s involved
SO THAT I can make an informed decision on what is appropriate for my family

Hypothesis:
Currently, users aren't allowed to compare all options across different criteria in one single page. If users are able to have an overview of all their options, they're less likely to choose court as their pathway to sort out child arrangements.

Example:

Next steps

The User Centred Policy Desing (UCPD) Cross-Justice Delivery Team has included the research of this pattern in their backlog for Q2 2019 as part of ongoing user testing for the C100.

• User Researcher: Huu Anh Chu
• Product Manager: Sinead Krzyzyk
• Delivery Manager: Tracy Bortier

More information

• Previous iterations and videos on Google Drive
• Show The Thing

We now have primary nav and sub nav (which is horizontal). This ticket is when there's a need for sidebar navigation.

Old ticket for general navigation: #4

What

Add guidance to the ‘Prototyping’ page in the MOJ Design System to explain:

• how to check what version of the MOJ Frontend you currently have installed
• what the latest version is
• how to upgrade to the latest version

Why

The page currently has instructions on how to set up MOJ Frontend, but not how to update it when new versions are released.

Anything else

‘Prototyping’ on MOJ Design System

Service: Claim for Crown court defence
Phase: Live
Department: Legal Aid Agency

Use terms and conditions to tell users what they're agreeing to when they use your service.

Service: Prison NOMIS
Department: HM Prison and Probation Service

What

Proposal to create an instant support section on every screen. It would be a component that allows the user to instantly leave the application they are on and takes them to a blank google homepage (or other site) that would hide what they have been doing from someone who may be overlooking. At the moment there are a number of victim support websites who offer this functionality and it is seen as a way of safeguarding users. Without going too much into solution mode, I suggest a secondary button is used telling the user exactly what and where they would be taken in a place on screen that is highlighted but doesn't impact the application. For example, in a right hand column. I would also propose that when the user is taken away from the site that the browsers back button be disabled. Something which has been done elsewhere.

Why

It should be added to the design system as it would to provide security and reassurance to vulnerable users when completing applications.
The creation of this is based on assumptions of a user needs - though it is used in most support services websites such as rape crisis for example.
It does not exist in the backlog.

Anything else

This proposal is brand new and needs a lot of work. I think it could prove to be a useful and valuable pattern specific for MOJ but could be used in other departments too.
Link to a proposed design (though content is needed and is specific to CICA service): https://apply-for-compensation-proto.herokuapp.com/concepts/instant-support. Username: apply. Password: userneeds.
Screenshot attached too.

Use the banner to display a prominent message and related actions to take.

Service: Claim for Crown court defence
Phase: Live
Department: Legal Aid Agency

Managing user accounts/profiles

Manage your account

Manage provider

Experimental

Service: Claim for Crown court defence
Phase: Experimental
Department: Legal Aid Agency

Provider details

Service: GOV.UK Performance
Phase: Beta
Department: Cabinet Office

Service: Track a query
Phase: Beta
Department: Ministry of Justice

See alphagov/govuk-design-system-backlog#154

Service: Prisoner money intelligence
Phase: Beta
Department: HM Prison and Probation Service

"Print" and "Export"

Use the Rich Text Editor component to let users format their input in a textarea.

From the HMPPS library: https://moj-pattern-library.herokuapp.com/#/components/warning-text

Service: Claim for Crown court defence
Phase: Live
Department: Legal Aid Agency

Currency notation on form fields

Help users to enter an amount of money in a specified currency.

Why

Anything else

• The issue on the GOV Design System backlog

Service: Prison NOMIS
Department: HM Prison and Probation Service

Use the cookie policy to tell users how their information is collected.

Service: Track a query
Phase: Beta
Department: Ministry of Justice

Service: GOV.UK Notify
Phase: Live
Department: Cabinet Office

Any websites published since September 2018 need to meet accessibility standards and publish an accessibility statement.

MOJ will need to publish accessibility statements for each service, which will be linked from the service footer.

Service: Prison NOMIS
Department: HM Prison and Probation Service

Service: Prison NOMIS
Department: HM Prison and Probation Service

Use the privacy policy to tell users how their data is used.

Service: Claim for Crown court defence
Phase: Live
Department: Legal Aid Agency

Add or remove multiple items to or from a list

Use when

• a user needs to add to a list of things
• the form fields are in a set, for example, defendant details, supplier details, travel expenses

This is an alternative pattern to adding items to a tabular list via a circular interaction.

Add defandant details

GIVEN a provider (advocate or litigator)
WHEN I enter a claim for Crown court fees
I NEED to provide all defendant details related to the case
AND their representation order details

Example:

Add supplier details

GIVEN a provider (litigator)
WHEN I create my account
I NEED to enter all my firm's office locations
SO THAT they can be used in claims for Crown court fees

Example:

Add miscellaneous fees (Advocates)

GIVEN a provider (advocate)
WHEN I enter a claim for Crown court fees
I NEED to be able to enter multiple fees

Example:

Add miscellaneous fees (Litigators)

GIVEN a provider (litigator)
WHEN I enter a claim for Crown court fees
I NEED to be able to enter multiple fees

Example:

Use the Timeline component to show a linear record of what’s happened.

What

When users are logged in to a service we display their name.

Why

We need a standard way to show this so that it's familiar across all services.

Service: Track a query
Phase: Beta
Department: Ministry of Justice

Service: Prisoner money intelligence
Phase: Live
Department: Ministry of Justice

Service: Manage Offenders in Custody
Phase: Alpha
Department: HMPPS

Service: GOV.UK Pay
Phase: Beta
Department: Cabinet Office

Note no username is displayed but the user is signed in.

Service: GOV.UK Notify
Phase: Live
Department: Cabinet Office

These are just a few examples that I've found looking through some issues in this backlog

Use the form validator component to validate forms without a server-side round-trip while also conforming to the established standards set out in the GOV.UK Design System.

Service: Track a query
Phase: Beta
Department: Ministry of Justice

Service: Track a query
Phase: Beta
Department: Ministry of Justice

Use the Page Header Actions component for certain actions.

Service: Track a query
Phase: Beta
Department: Ministry of Justice

Service: Claim for Crown court defence
Phase: Experimental
Department: Legal Aid Agency

Pagination of table lists

Provider a user an easy way to navigate lists of information

• Show number of items in the entire list
• Show position in a list
• Provide a means to change the number of items in a list
• Provide a means to navigate between pages, and go to the start or end of the list
• Retain column sort order when paginating
• Retain search and filters when paginating