Redesign new incidents email template

[lmcnulty]

Problems with the current design:

• [ ] it uses underlines for something other than links
• [ ] It display key-value pairs where they're not really necessary – we can make it clear, for example, what is a title through the text styling.
• [ ] It's missing white space that makes it hard to read – e.g. above and below the description
• [ ] It uses the email address (with a mailto: link!) as if it were name.
• [ ] The header is just sort of floating – it doesn't look like it's containing the text.
• [ ] It doesn't have the site logo
• [ ] The X/Twitter logo is scaled differently from the Facebook one and the background color is out of date.

[lmcnulty]

My first thought was something like this:

However, an email is necessarily going to be embedded into a client interface, which will likely have a white or off-white background. We might want therefore want to put the email body against a light background. But this looks a bit weird if they both have them:

We could give the body a darker background itself:

Or we could make the whole email body background white. We would have to deal with the header not matching the site exactly, but I think that's fine.

Actually, I think it's this most minimal one that I like most. It feels the most like an email sent by a human being. I think I recall seeing a study at one point saying that this is a common sentiment among ordinary users, but I can't find it so I might be misremembering.

Is it just that the centered header looks better? I don't think so, this one doesn't look any better to me than the matching one:

Thoughts?

[kepae]

Thanks @lmcnulty, it's great to have options to compare.

an email is necessarily going to be embedded into a client interface, which will likely have a white or off-white background.

Dark mode breaks this assumption a bit. I use dark mode for my email client, though I'm not sure how popular that is. On some occasions, I get stylized emails that do not adjust well, resulting in black text on dark background ('ve also seen the converse, white-on-white difficulty). Though the card with distinct coloring does mitigate that.

Or we could make the whole email body background white. We would have to deal with the header not matching the site exactly, but I think that's fine.

Agree! I like how this makes the subtitle font look, too.

The second option looks quite good to me. I like the card emphasis on the incident itself.

I also equally like the "minimalist" option (option 7), which has a newspaper like feel to me that I quite enjoy. It's a little more stately but keeps to our tech-y theme.

(maybe I'm just not fond of the light blue. Too much time in MS Outlook. :-) )

Whatever we choose, let's just make sure it plays nice in light and dark mode clients. We can't go wrong, these are all strict improvements.

[pdcp1]

First of all, nice designs @lmcnulty ! 👏

Agreed with the light/dark mode client consideration. I use the dark mode and I also experienced the black text on a dark background issue.

If I have to choose, I prefer options that have the Incident card emphasis.

From a technical perspective, we should keep in mind that these email HTML templates are currently stored as a plain-text in an Atlas function (e.g.: site/realm/functions/getEmailTemplateNewIncident.js) I'm pretty sure that we can apply all of these changes without any problem, but I think it is worth mentioning just in case we have some HTML/CSS limitations.

FYI: If I remember correctly, we use the SendGrid Email designer tool, and then we copy the HTML source code to the JS function file.

Also, if we change this "New Incident" email template, we should change the others:

• getEmailTemplateConfirmEmail
• getEmailTemplateEntityIncidentUpdated
• getEmailTemplateIncidentUpdate
• getEmailTemplateNewEntityIncident
• getEmailTemplateNewIncident
• getEmailTemplateNewReportAddedToAnIncident
• getEmailTemplatePasswordReset
• getEmailTemplateSubmissionApproved

We can start by changing one email template and then addressing the rest one by one.

[cesarvarela]

Suggestion:

This is also an opportunity to migrate all these functions to our new API; the Atlas environment forced many code-wise design decisions. We can use a better email templating library and finally properly test the notifications queue and delivery system.