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/

[uxgary]

Hello @humancompanion-usds cc: @caw310 it's been a while since we've last touch base on this effort. I would like to continue with another round of review. I've included the feedback I received from our first meeting.

Here is a link to the revision in Figma

[caw310]

@uxgary the next DSC meeting is on Thursday, Oct 10. I can add you to the agenda if you would like to attend to have another round of reviews.

[caw310]

Notes from DSC meeting Final decision and Action Items

• Gary - make gray bar with or without icon and test it out.
• Follow up with Danielle on guidance.
• Put in our backlog as emergent candidate.

Meeting notes

[uxgary]

Here is the link to the section in the Figma file that contains the revised design.

[caw310]

Reopening this ticket as the DST has some work to do to add this to the VADS.