Experimental Design for process status icons and repeat symbol

[uxgary]

What

In the claim phase project, we are using icons in accordion headers to show status during the claims process. We've also included a repeat icon in a simple rectangular container, along with a message indicating that a claim step can be repeated.

Purpose

The status icons serves as quick visual indicators are steps that has been completed and steps that is in progress. The repeat icon signifies steps in the process that may repeat if additional information is required or needs to be reviewed.

Usage

Currently we are using these icons in the overview page to explain claims process. The idea behind the icons are as follows:

** Inside the accordion header

• Check Mark icons - indicates a completed step
• Flag icon - indicates your current step in the process

** Inside the accordion body

• Repeat icons and container box - indicates a process step that has the potential to repeat. For instance, in products were evidence review is needed or any appointments that needs to be met, if VA finds that information is missing and thus causing the process to regress in any way, we inform Veterans to with the repeat icon and a brief message inside the container box to describe the general nature.

Behavior

At this time there is no interactive behavior for these icons.

Examples

Include any examples you have of this component or pattern. These can be screenshots, links to a Sketch file, or links to staging or production.

Figma file

Mural board with accessibility notes

Accessibility

The only concern for accessibility at this point was to ensure the icons had appropriate accessible labels. Our accessibility specialist advised the following:

Check mark icon -> accessible name = Completed Flag icon -> accessible name = Current Repeat icons with container box = *Note: this is a decorative image in our use-case because the box has plain text description

Guidance

What would you want to tell other teams about this component or pattern? Using the these components

Research (optional)

Research findings where the icons were present.

Code (optional)

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #platform-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.

[caw310]

@uxgary This is on the agenda for the May 23 DSC meeting at 11am. I will add you to the meeting invite.

[caw310]

Follow up from DSC meeting:

• Gary and DK to explore the UK solution then follow up with Matt on what is decided.
• Link to meeting notes: https://docs.google.com/document/d/1wfrHreWSz2OwTpXigQ4TF_WogOG4aN6sniYD14HnLio/edit?usp=sharing

[humancompanion-usds]

https://design-system.service.gov.uk/components/warning-text/