Risk UI components - Risk of Serious Harm (RoSH) widget

[jumpertrunks]

Background information

Do you think this component or pattern would be useful for other teams and services in MOJ?

Yes, for probation and prison teams needing to display risk information.

Name of product(s) this component or pattern relates to:

All HMPPS digital products and services that include risk information

What the product(s) do:

The widget shows a summary of the Risk of Serious Harm (RoSH) level for an individual.

The widget uses information from the legacy OASys risk assessment system to populate a mini-table showing:

• the individual’s overall RoSH level (low, medium, high, or very high)
• when the RoSH assessment was last updated
• the level risk posed to specific groups or classes of potential victims
• the area (community or custody) in which a particular risk level exists for each group or class

Who the users are:

• Probation staff
• Prison staff (where the services overlap or individuals pass between them)
• 3rd party suppliers of services (for example, interventions providers)

What the user need is for this component/pattern:

• help users quickly see an individual’s overall RoSH score
• help users quickly see an individual’s RoSH score for each group/class of potential victims in different contexts
• make it easier for users to rapidly understand risk information without navigating away from their immediate task
• support third parties who provide services in their assessment of risk (for example, interventions providers receiving a new person on probation)

What already exists

Similar published components or patterns

N/A

GitHub discussions on similar topics

N/A

Have you tried using what already exists?

There is currently no single consistent HMPPS visual language for communicating risk in digital services.

When to use

Use this component/pattern to help users…

quickly absorb and interpret the risk of serious harm posed by an individual
develop a picture of the individual and their risks and needs
share and reuse risk information in a standard way with consistent meaning

Types of scale and call-out for each risk tool:

The information is presented in table form. The RoSH level is set by the probation practitioner based on a clinical assessment and the application of their professional judgement. It uses words rather than numbers. The words used are ‘low’, ‘medium’, ‘high’ and ‘very high’ and these are given unique and consistent colours.

How to use

When using this component or pattern, what should be considered when it comes to:

Establishing the potential victims

Based on OASys data, the categories of potential victims are:

• children
• public
• known adult
• staff
• prisoners

The potential contexts are:

• community
• custody

In any given case, one or more classes of potential victims may be excluded and not all risks will be present across both community and custody. Use N/A for any empty values.

Making sure it’s accessible?

• Colour contrast of text meets AA standard
• Colour is not the only indicator for a level text is used too

Implementing in Figma?

A library of Risk components is available in the MoJ Figma account called Risk Components
It can also be viewed here

Implementing the code?

TBC

Using it in context with other components and as part of a service?

Side bar

In a document e.g. Community Payback Assessment PDF

when to use variations? (if applicable)

• Display both 'custody' and 'community' - when the user would find it beneficial to see both
• Display 'custody' only - when a user needs to only understand risk information in the context of a person in prison
• Display 'community' only - when a user needs to only understand risk information in the context of a person on probation in the community
• Display 'No RoSH' - when a Risk of Serious Harm assessment has not been completed for an individual
  

Things we don’t know enough about

• Is there a need to drill down to the deeper details of a RoSH from here to give further context ever or is this purely an at a glance view
• Does the design work across all probation services, or do we need variations

[jumpertrunks]

UPDATE:
NO RoSH is now UNKNOWN LEVEL RoSH
Users of The Community payback assessment were assuming NO RoSH = LOW RoSH. Research showed that this is not always the case. A user can exempt themselves from completing a RoSH summary in OASys and therefore no level is assigned.

When UNKNOWN LEVEL is because no RoSH summary has been completed we use a yellow outline along with "A RoSH summary has not been completed for this individual. Check OASys for this persons current assessment status."

When UNKNOWN LEVEL is shown due to the system not being able to obtain the RoSH (whether it's there or not) We use the Grey outline along with the text "Something went wrong. We are unable to show RoSH information at this time. Try again later."

The use of UNKNOWN LEVEL rather than NO RoSH creates a little more uncertainty over RoSH and should encourage a user to double check OASys to understand the person on probations risk of serious harm.

[jumpertrunks]

ACCESSIBILITY UPDATES:

Unpaid work DAC audit:
DAC Accessibility Report WCAG 2.1 - MOJ - Unpaid Work Assessment - Final (1).pdf

Screen Magnification(Usability)
When the screen is magnified to 200%, the box overlaps the text on the page.
FIXED - Breakpoints added for smaller screen sizes

[jumpertrunks]

RoSH Component being is being used in the following services:

• Community Payback Assessment - Public Beta
• Refer and monitor an intervention - Accommodation referral - LIVE
• Manage a workforce - Public Beta
• Deciding if someone should be recalled or not - Public Beta
• Approved Premises - Alpha
• Mange POM cases - Public Beta

[jumpertrunks]

This feels like we can answer "Does the design work across all probation services, or do we need variations"
It's working across 6 services with no changes

[jumpertrunks]

Deciding if someone should be recalled or not - Accessibility issue

https://uv2854-moj-making-recall-decisions.uservisionaccessibility.co.uk/content-spills-out-of-container-on-ipad-l.html
Resolved

[jumpertrunks]

The Grand High Council of Risk UI - December 2022

https://miro.com/app/board/uXjVPH939-Y=/?share_link_id=481664550142
No major user problems identified un UR for RoSH component

[rwk-moj]

@robertjmccarthy & @murrlipp FYI

Use of Risk component / widget in Probation Manage a Workforce / Allocate a Person on Probation - this is fake data so isn't sensitive :)

The HTML is set to a two thirds column as it sits next to additional information about a person on probation in our use case.

 <div class="govuk-grid-column-one-third">
    <h3 class="govuk-heading-m">Assessment tools</h3>
    <div class="rosh-widget rosh-widget--medium">
      <h3 class="govuk-heading-m"><strong>Medium</strong> RoSH</h3>
      <p class="govuk-body-m">Risk of serious harm
        <br><span class="govuk-body-s secondary-text-col">Last updated: {{ moment().subtract(5, 'days').format("D MMMM YYYY") }}</span>
        <br><span class="govuk-body-s secondary-text-col">Update by: Court duty officer</span>
      </p>
      <table class="govuk-table govuk-table-xl">
        <thead class="govuk-table__head">
          <tr class="govuk-table__row">
            <th scope="col" class="govuk-table__header">Risk to</th>
            <th scope="col" class="govuk-table__header">Community</th>
          </tr>
        </thead>
        <tbody class="govuk-table__body">
          <tr class="govuk-table__row">
            <td class="govuk-table__cell">Children</td>
            <td class="govuk-table__cell"><strong>Low</strong></td>
          </tr>
          <tr class="govuk-table__row">
            <td class="govuk-table__cell">Public</td>
            <td class="govuk-table__cell"><strong>Low</strong></td>
          </tr>
          <tr class="govuk-table__row">
            <td class="govuk-table__cell">Known adult</td>
            <td class="govuk-table__cell rosh-widget__risk--medium"><strong>Medium</strong></td>
          </tr>
          <tr class="govuk-table__row">
            <td class="govuk-table__cell">Staff</td>
            <td class="govuk-table__cell rosh-widget__risk--medium"><strong>Medium</strong></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="rosh-widget rosh-widget--high">
      <h3 class="govuk-heading-m"><strong>High</strong> RSR <span>6.9%</span></h3>
      <p class="govuk-body-m">Risk of serious recidivism
        <br><span class="govuk-body-s secondary-text-col">Last updated: {{ moment().subtract(320, 'days').format("D MMMM YYYY") }}</span>
        <br><span class="govuk-body-s secondary-text-col">Update by: Probation practitioner</span>
      </p>
    </div>
    <div class="rosh-widget rosh-widget--medium">
      <h3 class="govuk-heading-m"><strong>Medium</strong> OGRS <span>64%</span></h3>
      <p class="govuk-body-m">Offender group reconviction scale
        <br><span class="govuk-body-s secondary-text-col">Last updated: {{ moment().subtract(320, 'days').format("D MMMM YYYY") }}</span>
        <br><span class="govuk-body-s secondary-text-col">Update by: Probation practitioner</span>
      </p>
    </div>
  </div>

The SASS is stored in a _widgets.scss file and imported into the .application.scss file ( I had to upload it as a zip as the .scss extension isn't supported on here 👎 )

application.scss.zip