Enhance all our notification emails

[jrobbins]

Improve the content and appearance of all our notification emails.

Most notification email templates would have 4 sections:

1. Identify and link to the relevant feature.
2. Explain what happened, with relevant details clearly laid out.
3. List the user's possible next steps (which will often be a variation of "View feature details")
4. A footer that lists the reasons why the email was sent to that address and offers an "unsubscribe" link.

For some of the notifications that we send, this will just be an update to the existing template to give it some visual style and organize existing text into new sections.

But, for the process of notifying users about comments posted, reviews requested, and review votes cast, this work will require new templates that are specific to these use cases rather than reusing the "feature was updated" format.

In cases where the action that the user should take requires a specific UI element on chromestatus.com, we should use a more specific link to make sure that that UI element is visible. E.g., if a reviewer is told the their next step is to enter a review response (vote), then the link should have a URL parameter that causes the correct stage to be expanded and the gate column to be opened on the correct gate.

Research best practices for styling HTML in emails. E.g., should icons and stylesheets be embedded? Verify that these emails look OK in Gmail, Google Groups, and some other email client.

Future work:

• Add help links to existing docs or create new short help pages where needed (e.g., how to enter a review response).
• Show red/green diffs whenever the string representation of the old and new values for a field is not completely different
• Add a gmail "Go-To Action" so that the user can "View feature details" directly from the inbox. https://developers.google.com/gmail/markup/actions/actions-overview#go-to_actions

[jrobbins]

After a meeting with our UX consultants I updated the wireframes, now they:

• Have one of three color-coded icons showing checkmark for progress or success, info icon for general infomation, warning triangle when an action is requested.
• Have "unsubscribe" footers links that read better, even if that might mean that gmail does not detect the link and offer its "unsubscribe" button.
• Explain when 3 approvals are needed

[swadhin1515]

trial edit

[domenic]

I think this issue would solve my issue with the notification emails, which is that there are a lot of them. Our team is launching 4 features in M121 and this month, for each feature, I've gotten:

• 9 "updated feature" emails, which are a combination of approvals and tweaks to the fields by other team members in preparation for launching
• 8 "New comments for feature" emails, which appear to be mostly about approvals (and most of which are generated by our team as we fill in the approval process fields)
• 2+1 action requested + escalated action requested emails, which seem to be asking me to re-confirm the shipping milestones 3 times.

In total this means I've gotten ~20 emails per feature * 3 features = ~60 emails from Chromestatus this month which has felt like a lot.

I can't come up with any easy ideas on how to reduce this, as they all in theory seem important. But highlighting the actionable and new information, instead of all of them having the exact same header with lots of estimated milestones, would help me process these a lot faster.