Design Feedback - Design Intent - VANotify Unsubscribe Page

[seanasewell]

VFS acceptance criteria

• [x] Let Platform know when the Must feedback has been incorporated
• [x] Leave any comments for feedback you decide not to take
• [ ] VFS team closes the ticket

Thoughts/questions

-

Feedback

• Must = the feedback must be applied
• Should = the feedback is best practice
• Consider = suggestions/enhancements

Must:

• Manage preference should be sentence case instead of title case - update “Manage Preferences” to “Manage preferences”.
  • Treating “Manage preferences” as a text link instead of a button. If it is navigational, it cannot be a button due to accessibility issues.

Should:

• Remove grey background behind content.

Consider:

• Adding the word “email” in between “Manage” and “preferences”.
• Adding an unsuccessful unsubscribe state.

Platform directions

• Update "Issue Title"
• Link to collab cycle touchpoint meeting epic
• Add to the Feedback pipeline on the Platform Product Support board
• Add your feedback
• Add assignees based on collab cycle touchpoint
  • Design Intent: VFS designer, VFS PM (optional), yourself (optional)
  • Midpoint Review: VFS PM, yourself (optional)
  • Staging Review QA Only: VFS PM, yourself (optional)

[natashaj7]

In response to the second piece of feedback under the Must section ->"Treating “Manage preferences” as a text link instead of a button. If it is navigational, it cannot be a button due to accessibility issues."

My understanding after discussing this item was that it should remain a button as it directs to an authentication modal that then navigates the user to preferences.

[natashaj7]

We decided to change the language in the "Manage preferences" button to "Manage settings" in order to match the language used on VA.gov. We will run this by the content team in the content and IA intake meeting.

[natashaj7]

Can you share the link to the Platform Product Support board so we can add to the feedback pipeline as directed above?

[natashaj7]

@seanasewell we incorporated the "Must" feedback items except for the second one which we provided feedback on, and updated this ticket

[seanasewell]

In response to the second piece of feedback under the Must section ->"Treating “Manage preferences” as a text link instead of a button. If it is navigational, it cannot be a button due to accessibility issues."

My understanding after discussing this item was that it should remain a button as it directs to an authentication modal that then navigates the user to preferences.

Let me connect with Ryan this morning and get back to you. Thanks @natashaj7

[seanasewell]

@natashaj7 Sorry for the delayed response on this. Just to confirm, when a user clicks the unsubscribe link in an email and is met with the unsubscribe confirmation page, are they always going to be logged out? In that scenario, a "Manage settings" button makes sense since it has to take them to an authentication modal in order for them to log in first before navigating to the settings page.

However, is there a scenario where they will already be logged in while on the unsubscribe confirmation page? In that case, "Manage settings" link makes more sense since it will navigate them directly to the settings page, bypassing the authentication modal experience.

[allison0034]

@natashaj7 sorry for the late feedback, Sean, Ryan and myself just discussed this and wanted to add...

Consider making the unsubscribe and preferences distinct, separate actions. Rely on headers to define the space.

[natashaj7]

@seanasewell I can design a page that displays that button as a link as well as having the version with a button but then the VA engineering team would need to display a different UI based on whether the user is logged in. I wonder if they are able to do so or if it's over engineering the page a little. @allison0034 I'm struggling to visually see how your suggestion would look on this page. Can we hop on a call to chat about it?

[allison0034]

@natashaj7 yes! So something similar to this comp, however you do not need the card style, you could separate it with headers.

[natashaj7]

Thanks @allison0034, we are working on incorporating and user testing some of the feedback from @mnorthuis in the IA and content review as well. Here are the latest two versions of the unsubscribe page:

I re-introduced the grey backgrounds to separate and group the two different actions as recommended.

We are leaning towards the first mockup based on feedback that shows Veterans may not understand what each of these two notification settings pages contain. User testing is still in progress so please feel free to share any additional questions or thoughts.

[rtwell]

I wanted to drop a couple clarifying notes about this design. Apologies for any confusion! What Allison shared is a good example of delineating actions, but it's got some semantic issues that will not meet VA.gov standards.

1. Every page on VA.gov must have 1 and only 1 h1. That will change the structure/order of this design a bit. If the h1 of this page is "Unsubscribe successful", then "Manage notification preference" might be the h2 (I would work with the content team if you have any questions). it might be something like: h1 Unsubscribe successful p email-address@whatever.com will not… button Subscribe again h2 Manage notification settings p Sign in to your… button Manage VA.gov settings etc etc
2. Given that we now have a different structure for this page, there is no need for the gray background. These are not separate-but-equal interactions, they are primary and secondary. This should be a simple page with text, that spans the appropriate number of columns using our flex box utility.
3. See our documentation regarding the use of buttons vs links. If the actions on this page are prompting a sign in modal (even when routing to a new page), or submitting data, a button is the appropriate UI element. If we are taking users to a new pages without sign in, links or action links would be appropriate.
4. Because we have "sign in" above the buttons, a11y recommends using aria-describedby to link the additional hint text to those buttons so it's extra clear what will happen (as some screen reader users may skip those completely using the tab key).
5. Users can only manage text preferences in profile. To manage email preferences, users have to go to My HealtheVet. We should make this UX clear in this design.

[natashaj7]

Hi @rtwell, Oddball was awarded the contract to move forward with design and development on VANotify which means they will take over this process moving forward. The transition time was tight and having been on vacation last week, today was my only day to do all the design knowledge transfer to the new team, so apologies for not having the time to respond to all your comments, but I'm sure the new team will be wonderful stewards moving forward. CCing @hubgitian @miabecker Thanks for the collaboration and thoughtful discussion thus far. It's been really interesting to learn more about design practices at the VA through this process. Wishing all the best in this transition and to the new team stewarding this tool.