[Design] Auth Profile - Address Change Messaging - Present Prototype at Design Office Hours

[MarciMcGuireGCIO]

Background

When a user changes their home address or their mailing address, we want to prompt them to change their other address if needed. A possible solution for this was tested during research sessions in Jan 2021. We would like the Design team to review and provide feedback.

Tasks

• [x] Attend Design office hours and present the UXPin prototype
• [x] Note any feedback/recommendations in the project design notes.

Acceptance Criteria

• [x] UXPin prototype has been presented at Design office hours
• [x] Feedback has been recorded in the project design notes

How to configure this issue

• Add label for practice area (frontend, backend, design)
• Assign to a Profile team member

[cgednalske]

@MarciMcGuireGCIO Hi Marci! I'm bumping up the estimate because I think there will be more design exploration than I initially thought. There are actually some helpful points coming out of our research synthesis that should be explored and could possibly present tweaks/options we might consider using.

I also spoke with Liz and she provided a ton of context that I will add here in the ticket to help us address some of Adam's points/questions.

[MarciMcGuireGCIO]

Ok, thank you for the update!

[cgednalske]

Spoke with @andaleliz to go over her previous work leading to the current designs. She was great enough to fill me in on some context in relation to Adam's points in #34395. Below is the info/background/thoughts she provided related to the points in question so everyone is on the same page with original intentions. @adamwhitlock1, does this background address some of your concerns and are there specific points to explore further? If more discussion is needed, we can set up a quick call to go over things.

In the meantime, I will bring this to Angela or Josh and try to attend the Platform Content office hours next Tuesday with our current design.

We are basically presenting one modal after another. Are there any accessibility/usability concerns to this type of flow?

Liz was envisioning this as one modal where the content just changes; maybe technically it is two modals, but one should not close and the other appear immediately afterward. Providing that the content changes are announced to the screenreader correctly, and focus is managed the way we normally do on modals, she doesn't think there should be accessibility concerns. But we will def check w/ Josh & Angela

Wiring up the successive API calls will require some new implementations and testing around.

When the user hits the save button in the home address field, we should run the same API calls we're doing now (address validation checks) to save the home address, and when they finish, prior to the success (background only alert) message, we should check for a discrepancy between the home & mailing address. If there is a discrepancy detected, we should still save the home address, but show the modal asking if they also want to update their mailing address (modal content reflects that it's been saved). If they click yes to update their mailing address, all the same calls we normally run should run. Just want to clarify this in case any of it was not clear prior.

Should a loading indicator appear at some point during these api calls to handle response latency?

Yes, we should use the same loading indicator that we're using in all sections of profile when we make API calls

Handling the failure of one or both updates may create some confusion, especially is one address update call succeeds and one fails.

Yes, totally in agreement. We may to think through this, but the same kind of failure/error patterns should apply here. For the home address update, nothing should really change. For the mailing address update, we'd have to display the failure message in the modal, above the buttons, just like we do when we update outside of the modal.

At this point the notification that shows up below the address sections once the address is updated is limited to showing one at a time, and we would need the ability to display 2 notifications at the same time (one below mailing and one below home)

Correct, this is a new change.

[cgednalske]

Received some accessibility feedback from @AngelaFowler82 on Friday for current designs. No glaring accessibility issues at this point if we adhere to the following suggestions:

• Place focus within the modal otherwise screen reader users will have trouble locating correct information
• Helps if text in modals are automatically read - because it's not expected that the modal would be there
• The user needs a clear out, which we provide the Yes / No options
• Doesn't think there is a problem with having the two modals, but suggests:
  • Polite aria-live region so the screen reader reads text in both modals automatically
  • Second modal should have focus on close button

A separate concern is the double alert that is then shown on the page once addresses are updated, which increases the cognitive load. Both alerts may be needed, but something to consider may be if it is possible to include only one alert that mentions both mailing and home address.

[MarciMcGuireGCIO]

@cgednalske can you please make sure that this feedback is also captured in the project design folder? Thank you!

[cgednalske]

Feedback from Design Office Hours:

Short-term - We can go ahead and use the modal solution, but there were many questions surrounding modal content. Recommendations were to streamline content presented in modals.

• Shorten and clarify text
• First clarify that Home has been updated, then ask about mailing
• Specifically show the new mailing address
• Does the same modal flow occur if Mailing is updated?

(New ticket for this: #35585) - MPM - updated ticket number

Long-term - Look into additional questions presented about how editing and syncing Mailing and Home addresses works, and if there is a solution that does not require modals.

• Look into the checkbox features and determine if the same could be applied to Mailing or instead used outside of the Mailing Address/Home Address fields (A/B testing)
• What happens if someone checks the checkbox and then edits anyway? (suggested disabling text input)
• To address any confusion around what these addresses are - look into adding hint text to explain the difference between the two addresses
• Look into one per page editing (very long-term)

[MarciMcGuireGCIO]

Thank you @cgednalske! Let's work together on fleshing out that ticket template you referenced above.