Interruption card

[itsmestevey]

What we have done
We have introduced an 'interruption' page to the DPS user journey to interrupt a users journey and point them to some new information so they record the outcome of an incentive review.

A link to the design can be seen below -

https://hmpps-incentives-tool.apps.live.cloud-platform.service.justice.gov.uk/INC-863/interruption

Why
There is a problem where incentive levels are not being recorded in DPS case notes, as there is no link between the case note or the record an incentive level page. So we are using this component/page to point users to the correct place.

This feels like a quick fix to a bigger problem associated with Case notes / Types / Sub types.

We have designed this using an existing GOV UK backlog component
alphagov/govuk-design-system-backlog: Issue #27

Anything else
This interruption card has been put in front of users during our most recent round of user research.

[simonnebMOJ]

We have also added an interruption card to the new public booking journey - code here: https://github.com/ministryofjustice/hmpps-book-a-prison-visit-ui/pull/156/files

Example screenshot:

[KristinaIankova]

We've been playing with an interruption flow on CCQ. Though quite different use case and have done research on this. Our initial design used an interruption screen. Our new iteration will use a banner that appears on the question page. Below explains why chose to move away from a dedicated screen, though I don't think it would really apply to the use case in DPS.

Thanks to Laurence Alexander for writing this up!

In March we implemented an interruption page. The 2 options on it were [skip remaining questions] or [resume check]

We added this to:

• show users that their client was over the limit for gross income therefore it is pointless to continue
• save users time by giving them the option to skip to the end, rather than filling out several pages of questions (the outcome of the remaining questions would not have put the client within the limit). This met a need of helping users get a result as soon as possible.
• It also gave them the option to answer the remaining questions anyway. This was because we know that some users want to show their clients a thorough result.

If you want to try it, go to CCQ (no analytics link) and just make sure you input a high monthly income, higher than 3k, to trigger the screen.

Clicking skip questions takes user to check answers, then detailed result.

Why iterate
In moderated research:

• some users were frustrated at the number of clicks to get from this page to the main result page.
• some users didn't realise there were more pages beyond the check answers page
• The check answers appeared to be superfluous in several cases.
• some felt that this page was enough, there was no need for another result page. But it would be helpful to be told a little more detail, ie, the limit.
• We also found in analytics that many users simply stopped at this page, and that didn’t count in our metrics as a completed journey. We think its important that users see the final results page

Planned update

• to replace this page with a banner
• the user will stay on the next page of questions - less clicks if they want to continue
• The banner will tell them how much they are over the limit and give them a button to get to the result, skipping the result page

[ElizabethGoddard]

We recently added an additional page with an interruption card to Pathfinder. This appears during the flow whereby users add intelligence reports.

Why we added it
Stakeholders reported instances of data breaches when adding intelligence reports that they believed were due to two reasons:

1. Users without permission adding reports incorrectly (due to lack of training)
2. Users with permission not following process that requires the reports to be sanitised (sensitive information removed)

After a series of workshops and design sessions we decided that the interruption card could act as a gateway, reminding them of protocol and highlighting the need to have been granted express permission. We also explored the idea of a checkbox for them to confirm they have the relevant permissions.

This solution was meant to act as a quick way to ensure the quality of reports and help avoid future breaches. Alongside this we also investigated opportunities to adjust permissions of those users that should not be adding them.

Designs we tested
User testing was carried out with three prototypes to test variations of copy and location of checkboxes. This was received well and helped us form an improved version for release. It also helped us to define how often users would see this so as not to interrupt them too often if adding intelligence reports was a regular occurrence for them.

Unfortunately we did have some difficulty with stakeholders asking for the content to be longer than we would have liked. We were concerned that a very wordy interruption card would have less chance of being read and our urgent message become diluted. We also felt it was important the business realise this is to act as a warning and not become a training tool - since that should be done by other means. Additionally we had hurdles with regards to data and analytics, so testing the success is difficult. Stakeholders were unable to provide problem scenarios or individuals that we could use to gather further information.

Final design
This is the final interruption card which we currently have on the service:

[Whersi]

Release: Interruption card component

MoJ Design System team has released an interruption card component. This component interrupts a user in their journey with something important. It helps users to understand possible errors and avoid mistakes.

New documentation

The documentation explains:

-the 5 use cases for this component (including examples)
-when not to use it
-what it should include
-how to avoid overusing it

View the Interruption card on the MoJ Design System documentation website

[Whersi]

Some ideas for version 2

• Explore support for more than 2 CTAs.

• Explore support for image/illustrations.

• Explore an 'interruption pattern' which would advise on how, when and why to interrupt users.

• Evaluate from other discoveries whether there is a need to add to the documentation examples of where a component has been used in a live service.

[agoldstone93]

I'm looking at using the interruption card. If I copy and paste the code from your example, I am getting the body text in black rather than white. It seems like the font colour is being overridden by the typography helper in the govuk frontend.

Also, it might be nice to have some bullet points included in the code example as they're show in some of the design examples. It's not immediately obvious which class to add for bullets, and just adding moj-interruption-card__body causes spacing issues.

[tpmcgowan]

I've also hit the bug reported above whereby the text comes out black and too small. It looks to be caused because we have $govuk-global-styles: true set (see https://frontend.design-system.service.gov.uk/sass-api-reference/#govuk-global-styles).

It's the default in the HMPPS TypeScript template project so I suspect most projects will have this set too.

As a workaround, I've added the code below to the local.scss in my project to make the styles work correctly.

.moj-interruption-card__body > p {
  @extend .govuk-body-l;
  color: govuk-colour("white");
}

[chrispymm]

@agoldstone93 @tpmcgowan we've just deployed v3.3.1 which contains a fix for the interruption card text colour issue.