Update downtime notifications per new UX and content guidance

[peggygannon]

User story

Per new UX flow and content guidance, we've now have a character limit and other UX updates for downtime notifications. These updates include:

• The header text for this type of banner should be customizable with a limit of 50 characters with spaces.
• The body text will be customizable with a limit of 300 characters with spaces.
• This message banner should be configurable with an expiration date.
• Must configure schedule and expiration: for in-advance messaging start and end; during message start and end -- dates and times.
• Standardized text with customizable dates and times.
• Message must have a specific expiration date and must disappear automatically on expiry.

Downtime banner notes are here:
https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/content/banners/banner-alerts.md

this work is related to Sitewide System Maintenance Banner ticket:
https://app.zenhub.com/workspaces/vsp-5cedc9cce6e3335dc5a49fc4/issues/department-of-veterans-affairs/va.gov-team/9223

[jenniferlee-dsva]

@peggygannon - just want to clarify your bullet point about header text ^.

In the original write up and ticket for sitewide sytem downtime banner messages, I suggested that you can recommend a proposed header text for these from the current "System maintenance" header text. However - and sorry if this wasn't clear - the recommendation text should be the template header text for all sitewide system downtime banner messages -- i.e., not customizable for each and every time a sitewide system downtime banner is published, if that makes sense.

So for instance if you recommend that all advance sitewide system banner headers should be "Upcoming sitewide system maintenance," and the during banner say "System maintenance," then those would be the header text we would configure to always use for these banner messages.

I would like to avoid these sitewide messages being written on a case-by-case basis and try to templatize as much as possible.

@rtwell also for FYSA.

[peggygannon]

thank you for the clarification! I've begun working on this today and will reach out to you if I have additional questions.

[peggygannon]

@jenniferlee-dsva @rtwell hello! I wanted to share with you some ideas on the new messaging for sitewide downtime to get your thoughts.

-- I've offered up 2 options to the headers. I recommend going with option A, as it is more conversational and PL. But Option B if we want to keep headers shorter and succinct.

-- in the message body, I updated messaging to be more clear about how long downtime would last.. (1 hour, etc). this is an effort to be more clear to the user when site will be back up--rather than having them look at the times and figure it out. (We also still provide the date/time range, but am thinking we could be even more clear.) Would love your thoughts about this suggestion?

--added "Thank you for your patience" (vs. "We're sorry" or "We're sorry for this inconvenience".) To be more PL and positive in the messaging. Thoughts about this?

--Not sure how often we'd use this, but I've also recommended message for a 24 hour downtime (prob rare)

-- QUESTION: for the "during" downtime message. It was unclear from the notes if we needed to include the "start time" in the message. Please let me know and I'll add that in.

1. Advance message:

Header
A: We’ll be doing site maintenance soon (36 char)
OR
B: Upcoming site maintenance (25 char)

Message content (217 characters)

We’ll be doing some work on VA.gov on Monday June 15, 2020. The site will be down for 1 hour – from 9:00 a.m. to 10:00 a.m. ET. You won’t be able to sign in or use tools during this time. Thank you for your patience.

Not sure if we need to take this into account, but here's a recommended message for a 24 hour downtime
{If 24 hour downtime} 227 char
We’ll be doing some work on VA.gov. The site will be down for 24 hours – from June 15, 2020 at 9:00 a.m. to June 16, 2020 at 9:00 a.m. ET. You won’t be able to sign in or use tools during this time. Thank you for your patience.

---

2. During downtime

Header:
A: We're doing site maintenance (28 char)
OR
B: Site maintenance (16 char)

Message content (202 characters)

We’re working on VA.gov right now. We hope to finish our work by June 15, 2020 at 10:00 a.m. ET. If you have trouble signing in or using online tools, check back after then. Thank you for your patience.

[rtwell]

-- I've offered up 2 options to the headers. I recommend going with option A, as it is more conversational and PL. But Option B if we want to keep headers shorter and succinct.

I prefer option B

-- in the message body, I updated messaging to be more clear about how long downtime would last.. (1 hour, etc). this is an effort to be more clear to the user when site will be back up--rather than having them look at the times and figure it out. (We also still provide the date/time range, but am thinking we could be even more clear.) Would love your thoughts about this suggestion?

Love this!

--added "Thank you for your patience" (vs. "We're sorry" or "We're sorry for this inconvenience".) To be more PL and positive in the messaging. Thoughts about this?

I don't believe we need this because I will do whatever it takes to keep these as small as possible. I'm also grumpy, so I defer to you and Jen.

--Not sure how often we'd use this, but I've also recommended message for a 24 hour downtime (prob rare)

Great! We can use it when it happens!

-- QUESTION: for the "during" downtime message. It was unclear from the notes if we needed to include the "start time" in the message. Please let me know and I'll add that in.

I don't think we need to include when the downtime started. All that matters is that it's happening and when it ends, imo.

Thank you for all of your work on this!

[jenniferlee-dsva]

@peggygannon - this is a great start. Thank you for putting your brain on this! Ryan and I are aligned on the need for these to be pretty succinct and scannable. I think we could even make this more scannable and also more templated. The 24 hour sitch is an odd one, but it's happened once, so I think your instinct is correct to account for it.

• We can't say that the site will be down bc the static content and experiences not dependent on APIs or applications will continue to be available.
• I think we should stay away from subjective language like it's happening "soon" bc "soon" could mean many different things to different ppl -- soon as 'in a day' or soon as in '30 mins' from now?
• Agree with Ryan - I don't think we need to apologize or thank users here, especially as we are letting them know in advance, so they don't run into problems later.

Please feel free to refine this further, but here is my revision to make this more scannable.

Advance message:

Upcoming site maintenance
We’ll be doing some work on VA.gov. The maintenance will last x hour(s). During that time, you won’t be able to sign in or use tools.
Date: Monday, June 15, 2020
Start/End Time: 9:00 a.m. to 10:00 a.m. ET

Advance message when downtime spans multiple days or is 24 hours or more:

Upcoming site maintenance
We’ll be doing some work on VA.gov. The maintenance will last x hour(s). During that time, you won’t be able to sign in or use tools.
Start: Monday, December 31, 2020, at 9:00 a.m. ET
End: Tuesday, January 1, 2021, at 9:00 a.m. ET

---

During downtime

Site maintenance
We’re working on VA.gov right now. If you have trouble signing in or using tools, check back after we're finished. Thank you for your patience.
Date: Monday, June 15, 2020
Start/End Time: 9:00 a.m. to 10:00 a.m. ET

{OR - when duration spans multiple days or is 24 hours or more, use same 'during' message text above with this time block format:}

We’re working on VA.gov right now. If you have trouble signing in or using tools, check back after we're finished. Thank you for your patience.
Start: Monday, December 31, 2020, at 9:00 a.m. ET
End: Tuesday, January 1, 2021, at 9:00 a.m. ET

The desired long term state of these sitewide downtime messages is that we should be able to just plug in the date/s and times and not rewrite or modify any of the surrounding text -- even to the point where those elements can just be dynamically displayed.

[jenniferlee-dsva]

@peggygannon @rtwell - we'll have to make clear during implementation that the times and time zone should always be referencing ET - per those local situations that straddle multiple time zones.

[peggygannon]

Hello @jenniferlee-dsva @rtwell thank you for your feedback. these updates look good.

I wanted to see about next steps.

• Do we next need to share these updated messages with devs for their review? I'm happy to loop in VSP FE devs as an fyi... let me know.

• I will also update the Error Message resource in Design system with these updated messages.

Upcoming site maintenance
We’ll be doing some work on VA.gov. The maintenance will last x hour(s). During that time, you won’t be able to sign in or use tools.
Date: Monday June 15, 2020
Start/End time: 9:00 a.m. to 10:00 a.m. ET

Advance message when downtime spans multiple days or is 24 hours or more:

Upcoming site maintenance
We’ll be doing some work on VA.gov. The maintenance will last x hour(s). During that time, you won’t be able to sign in or use tools.
Start: Monday, December 31, 2020, at 9:00 a.m. ET
End: Tuesday, January 1, 2021, at 9:00 a.m. ET

---

During downtime

Site maintenance
We’re working on VA.gov right now. If you have trouble signing in or using tools, check back after we're finished. Thank you for your patience.
Date: Monday June 15, 2020
Start/End time: 9:00 a.m. to 10:00 a.m. ET

{OR - if duration spans multiple days or is 24 hours or more, use same 'during' message text above with this time block format:}

Site maintenance
We’re working on VA.gov right now. If you have trouble signing in or using tools, check back after we're finished. Thank you for your patience.
Start: Monday December 31, 2020, at 9:00 a.m. ET
End: Tuesday January 1, 2021, at 9:00 a.m. ET

[stephorkandatx]

@peggygannon I'll review with the developer re: the final copy above and let you know if we have any questions thank you!

[peggygannon]

OK, thank you @stephorkandatx

I've updated the error message dictionary with new messages. We still need to add a link to the new system maintenance banner component when that is in design system.

@rtwell just let me know when that component is in design system and I can link to it from the error message dictionary.

[stephorkandatx]

Thank @peggygannon . We cc'd you with screenshots of the content set up in the notifications in #9223 (sorry for the double ping!) would love your eyes to review

[1Copenut]

@peggygannon I'll gather my thoughts here as bullet points for consideration. Please let me know if you have questions or want to discuss further.

• If we're using red for current maintenance windows and yellow for upcoming, can our header language reflect this too? I want to make sure color is not the only indicator of when the maintenance window is happening.
• I mocked up several AM/PM and timezone tests in Codepen to evaluate with screen readers. All of the code there announces AM and PM properly per our date and time guidance but one of the examples bends the rules a bit. This was presented for your consideration, but is just an idea.
• I'm guessing this downtime banner will be before our <main> tag in the source order. If that's true, I'd like to make sure it's identified as an HTML landmark, maybe like this:

<div aria-labelledby="downtime-alert-header" role="region">
  <h3 id="downtime-alert-header">Upcoming system maintenance</h3>
  ...
</div>

[peggygannon]

thank you @1Copenut I appreciate your feedback!

[peggygannon]

Content work on the sitewide downtime messages is complete.

The only thing outstanding for this is having the System maintenance banner component uploaded to design system, so I can link to it from the Error message guide. Once this component is added I will update the error message dictionary.