Case list page

[siddiqah-i]

Existing

• Organisation switcher on MOJ Pattern Library
• Search on MOJ Pattern Library
• Multi select on MOJ Pattern Library
• Pagination on MOJ Pattern Library
• Sortable table on MOJ Pattern Library
• Summary list on GOV.UK Design System
• Link on GOV.UK Design System
• Badge on MOJ Pattern Library
• Tag on GOV.UK Design System

Request a Solicitor (RAS)

Product created in

Figma (Alpha phase)

About the product

Within the Legal Aid Agency (LAA) - Get Access space: ‘Request a Solicitor’ (RAS) is an online form for Custody to request Duty, Own Solicitors or Criminal Defence Direct (CDD) or Immigration. It is consistent with HMPPS Book a Prisoner Move service in order to reduce calls to Defence Solicitor Call Centre (DSCC) and improve data quality.

Who the users are

It will be used by Custody staff, specifically Detention Officers, Custody Sergeants, Investigating Officers etc to allow them to request a solicitor on behalf of the detainee in waiting.

User need

There is a need for users to have the ability to scan and compare the number of outstanding requests and the status of the request on the ‘case status list’ page. This will allow police users to see the details of the ‘assigned’ solicitor on the case so they can contact them and set up an interview date and time

How I started

Before designing on Figma, I decided to sketch a few wireframe variations of the same page to weigh out my options and compare the placements of certain components. These were later presented at the MOJ design crit.

An example of one of my sketches below:

Why I chose each component

Organisation switcher - not all of our users are based in one location, some users work across multiple locations and offices therefore they will need an option to navigate between locations

Search - some custody suites receive 25 or more cases per day, this will allow them to search through requests specifically by detainee name or solicitor firm name

Select - the users can choose an option from the select component, in this case allowing users to choose from the column labels such as ‘Detainee’, ‘DSCC reference’, ‘Status’, ‘Firm’ or ‘Requested’

Tag - each request will have multiple statuses associated with it, such as ‘submitted’ ‘received’ or ‘assigned’, by colour coordinating these tags this should help the users distinguish between different tags and identify which the current status for each request

Link - ‘view’ at the end of each row, so that users can open a more detailed page of that specific request

Summary list - so that users are able to scan and compare the summarised information that is presented to them about each request

MOJ design crit

I presented my variation of sketches to designers across MOJ who work on different projects with similar needs. I received feedback on my sketches, this resulted in me removing the Select component because it was pointed out to me that this level of filtering may not be needed if the number of cells is relatively low - it was suggested to me that a Sortable table might be enough.

I looked at all the examples of their work, I picked up on their feedback and decided to combine their work into a single mockup to get a sense of how my high fidelity prototype may look like. In the end it looked something like this, which was used as a guide before creating my prototype on Figma.

Then I began to create multiple variations of my case list pattern page on Figma, which was later presented back to my team. Given their feedback on Miro I decided to combine two of my options together to create one final version of the case status list page.

Final outcome

The image below reflects my current prototype (July 2021) of the case list pattern based on feedback and the first round of testing with users.

Research showed

This case list pattern has been tested and iterated in an Alpha phase of our project and has been through two rounds of testing with users.

• Sortable table - This was seen and understood, the ability to change order was helpful.
• Badge - This was seen, but could be overlooked if lower in the page. An update message at the top of the list, would mitigate this. The badge was also mistaken for a button.
• Organisation switcher - The ability to switch between custody suites was useful - staff move between suites in the force areas so require this.
• Tag - Submitted and received status not universally understood. Many rationalised, but it wasn’t obvious to some. This should be monitored during any pilot, if a challenge a single Submitted status should be created.
• Tag - Colour coding aided understanding of the status.
• The main call to actions were seen and understood. The new request, search and custody switch options were all seen.

Research on this variation

Sifting the user feedback through prioritising usability problems - I decided to colour code each comment from our user feedback.

• Red = 'critical'
• Yellow = 'ideas'
• Green = 'good'
• Blue = 'revise'

Inspired by the MOJ design crit feedback system. I filtered through the ‘critical’ and used this against the Decision tree with our user researcher. This helped us prioritise the user feedback and steer my design decisions and iterations by ‘low’, ‘medium’ and ‘serious’ priority. We did the same for the ‘ideas’ and the 'revision’.

As a result this allowed me to focus on specific actions and usability problems against each page and interaction of our RAS form and case status list page.

When to use:

Use the case list pattern to make pieces of information about a case easier to scan, prioritise and action for users.

How to use:

First understand what pieces of information are needed to prioritise and action cases. You should avoid using too many columns, and only provide users with information they really need. Use clear labels for column headings that describe the content.

Order of information

Think about the order of your columns so that you display the information in a way that makes sense to the user.

User research will tell you the best default order for cases, such as by most recently updated, case number, or full name. If you want to let users reorder cases, use the Sortable table component.

You may want to use Tabs to let users navigate between different groups of cases, such as ‘Recently allocated’ and ‘Caseload’.

Content

If you’re displaying names, use the format first-name, last-name unless user research tells you to use a different format. Further guidance is available on how to ask users for names.

If you’re displaying date and times, write out dates in full to help users read it easily, such as 16 June at 8:06am. You can display date and time in separate columns to let users sort and filter them separately. Further guidance is available on dates.

If you want add a link to let users view details of a case
You should display the Link in the first column, and use meaningful content such as the case number or name. Avoid using words like ‘View’.

You should limit actions from the case list and allow users to perform more actions once they’re viewing details of a case.

If you want to let users select multi cases to perform an action on them, use Multi select.

If you want to let users search for a case
Use the Search component. Place this before the sortable table component.

If you want to display a status
Use a Tag.
Put this at the end of a row.

Contribute

Things we don’t know enough about

• Pagination - there’s only one page but the user will still need to know the number of cases on that page, for example, ‘Showing 1 to 25 of 25 cases’.
• Link on the first column - the need and appetite for the font weight to bold instead of regular.
• Badge - to indicate an update notification or a change made on a specific row on the table.
• Notification badge - this hasn’t been tested but has been mentioned to use this when highlighting updates of a specific case.
• Customise length of the list - View x number of cases on a page.

[jbuller]

Thanks for this pattern. It would be nice to show the code or perhaps link to the Filter a list page for its code.

[siddiqah-i]

Thank you for you suggestion. Our team didn’t have a developer unfortunately during this part of the Alpha phase, all examples here are shown through Figma.