Experimental Design [Mapbox API]

[CatherineHughes202]

What

This component integrates Mapbox's mapping and location services to provide users with an interactive and accurate way to confirm their addresses during online forms or applications.

Purpose

The component streamlines the address entry process, reduces errors, and enhances user experience. It allows users to visually confirm their address on a map, ensuring the accuracy and validity of the information provided.

Usage

Context or task: This component is specifically beneficial in scenarios where veterans are filling out forms to apply for benefits. Veterans often need to provide accurate residential or service-related addresses, and this component can significantly ease this process. It ensures that the addresses they submit are correct, thereby reducing the risk of processing delays due to address-related errors. This feature is particularly important for veterans who may have multiple service addresses or who have moved frequently.

Behavior

Users can type in their address, which is then auto-completed by Mapbox suggestions. The entered address is displayed on a map, allowing users to visually verify it. For mobile, ensure the component is responsive, with touch-friendly elements and easy visibility on smaller screens.

Examples

(https://www.figma.com/proto/6ZBtsZJt7Llx1jA5rR8T83/Pre-Need---Address-Validation-Prototype?type=design&node-id=94-72625&t=GCLojQISld5r8CcZ-1&scaling=scale-down&page-id=0%3A1&starting-point-node-id=94%3A72625&show-proto-sidebar=1&mode=design)

Accessibility

Ensure the component is navigable and usable with keyboard-only inputs. Provide alt text for map images and screen-reader-friendly descriptions. Use high contrast colors for text and map elements for better visibility.

Guidance

Validation results displayed on a modal This solution is closest to the standard MapBox component for Address Validation, but modified for VA.gov. For this solution, users need to fill in their mailing address information if the fields are required and click a “Confirm address” button before continuing to fill out the form. This triggers the system to validate the address using MapBox and displays the results of a suggested address and a visual of a map image on a modal on page to verify the address input and have the user confirm the suggested address or go back and edit the address, if needed. If users confirm the address, the modal closes and address is updated in the fields and users see a green success alert. If the inputted address cannot be validated against the data, users will see a modal informing them their address couldn’t be verified and providing the option to use the address they provided and further edit their details. The confirm button is an extra step, but it allows users to control when validation is happening. Key features: A modal appears with address validation on the same page, which is less disruptive to users’ experiences and allows them to stay on task. In addition to text display of suggested address, provides additional visual display of location using a map to allow for further confirmation Address data is validated against USPS data and ___ The address suggestion can be accepted, rejected and edited, or cancelled. Reduced level of effort for development due to using standard modal view, as provided by MapBox component Additional considerations: USWDS guidance on modals recommends to “use modals sparingly to minimize unnecessary disruptions” and as “a last resort”, but disruptions to users are minimized when they’re allowed to control the opening and closing of the modal. The user clicks a “Confirm address” button to trigger validation, which adds an extra step to the validation process. “Confirm address” button is also an additional UI element that would need to be added to address pages in forms. Different UI than current VA.gov address validation pattern Reasons why client asked for work   There is no true address validation on VA.gov forms, which encourages bad data.  It causes a need for manual entry and correction which is an ongoing issue for NCSO case workers. It delays decisions for Veterans and their families if NCSO case workers need to put in extra effort to ensure data is accurate.    Reasons why Vet360 was a poor fit  It doesn’t show a true suggested address, as in, an address isn’t suggested to users for them to confirm based on what they entered. Users see a warning alert instead which should be reserved when there are negative consequences, or when something has gone wrong per design.va.gov alert guidance. You need to be signed in for it to work. Any possibilities on checking against USPS data while signed out?  From what our developers found, it validates the mailing address against the user’s VA profile address, not necessarily against the USPS data.  On review pages, if a user needs to edit their address, they're taken out of the review page and jumped back to earlier steps in the form to edit and confirm their address, such as on the Supplemental Claim form.   No additional visual display of address is available, as provided by MapBox.

Research (optional)

Include any research you have already conducted, or plan to conduct, on this component or pattern.

Code (optional)

<!DOCTYPE html>

Address Address Line 2 City State / Region ZIP / Postcode

Confirm

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]

@CatherineHughes202 the next DSC meeting will be Feb 9. I will add you to the invite.

[CatherineHughes202]

Can I please get further clarity on what this meeting is for

Thank you, Cat Hughes Lead Associate Memorials Self-Service - Release Train Engineer Memorials Product Owner Representative @.**@.>

Booz | Allen | Hamilton BoozAllen.com

From: Carol Wong @.> Sent: Wednesday, January 24, 2024 10:14 AM To: department-of-veterans-affairs/vets-design-system-documentation @.> Cc: Hughes, Catherine M. (BAH) @.>; Mention @.> Subject: [EXTERNAL] Re: [department-of-veterans-affairs/vets-design-system-documentation] Experimental Design [Mapbox API] (Issue #2416)

@CatherineHughes202https://github.com/CatherineHughes202 the next DSC meeting will be Feb 9. I will add you to the invite.

- Reply to this email directly, view it on GitHubhttps://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2416#issuecomment-1908333489, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ANZBMMD2TTFT6QKWYCJUHC3YQEQJVAVCNFSM6AAAAABCFD7L32VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBYGMZTGNBYHE. You are receiving this because you were mentioned.Message ID: @.**@.>>

[caw310]

The meeting is for you to present your experimental design idea to the Design System Council so that they can ask questions and provide any feedback.

[CatherineHughes202]

We are not ready to bring this to the council yet. We actually are researching a new avenue currently.

Thank you, Cat Hughes Lead Associate Memorials Self-Service - Release Train Engineer Memorials Product Owner Representative @.**@.>

Booz | Allen | Hamilton BoozAllen.com

From: Carol Wong @.> Sent: Wednesday, January 24, 2024 4:33 PM To: department-of-veterans-affairs/vets-design-system-documentation @.> Cc: Hughes, Catherine M. (BAH) @.>; Mention @.> Subject: [EXTERNAL] Re: [department-of-veterans-affairs/vets-design-system-documentation] Experimental Design [Mapbox API] (Issue #2416)

The meeting is for you to present your experimental design idea to the Design System Council so that they can ask questions and provide any feedback.

- Reply to this email directly, view it on GitHubhttps://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2416#issuecomment-1908950946, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ANZBMMDBQACZHULS2NPIDBTYQF4YBAVCNFSM6AAAAABCFD7L32VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBYHE2TAOJUGY. You are receiving this because you were mentioned.Message ID: @.**@.>>

[humancompanion-usds]

@CatherineHughes202 - Just checking in. Would you like to present this to Design System Council in the upcoming quarter?