Suggest design/usability improvements to email template

[reefdog]

It's possible the existing templates require no improvements, but perform a design pass for usability, layout, styling, content, and language improvements.

[reefdog]

Suggested template:

• Content has a maximum line width of 40em so there's no really long text lines
• Typography tries to draw attention to relevant things

Open question: how do we want to phrase and link the attribution? I gave several distinct options. For Twitter, we could link just "claimed" or the entire "[Speaker] claimed". For CNN, we have speaker and show, so there are three variations. Cast your vote!

[slifty]

This looks great (and so much cleaner than the current template)!

One thought: So, the primary use case of this is quickly scanning for the claims, and people will generally be highly trained / trainable. This means the explanations are important, but ultimately noise. I think maybe this layout reads more like a newsletter than a tip sheet (@ericaryan I look to you to weigh in though.)

I wonder if we can do more to draw attention to the distinct claims, maybe using emoji or bullets? The benefit of emoji is (a) they are emoji, and (b) we could have different emoji to signal different things (TV for tv claim; twitter icon for claims about birds, etc)

One thing that was good about the table layout before was that scanning was fast.

[reefdog]

Totally agree on all points! I'd love to be able to put all the boilerplate about Twitter/CNN sourcing at the bottom in a single "reminders" section. I'd also love to be able to intermix Twitter and CNN claims and just distinguish them through labels or (as you mention) iconography.

[reefdog]

Speed-redesign given @slifty's great feedback:

[slifty]

Excuse me: how is this at all about birds.

[reefdog]

WVGOP stands for Wing Velocity Grand Old Peregrine.

[ericaryan]

This looks very nice! And I love the emoji!

My concern with mixing is that we have generally found CNN claims to be more useful, even when having lower ClaimBuster scores, than Twitter claims. So we might be watering down the most useful stuff to fact-checkers by mixing them together. (As in, they might currently be reading CNN claims more carefully and then just skimming Twitter more quickly.)

@markstencel Is the guy responsible for the boilerplate, so I will let him weigh in on that as well as the design possibilities. I'm fine with moving it to the bottom, personally, since I agree no one is likely reading it after their first day receiving the email, but it's important to have it somewhere.

[reefdog]

Ah, that's excellent to know!

If keeping platforms distinct is an important feature of the newsletter, we can definitely keep doing that. I do wonder if the emoji adds enough distinction that folks who do care mostly about CNN can just scan for the 📺 without requiring us to actually do blocks, but obvs I'm open to whatever is best.

A real big question I have is if speaker scannability needs improvement. Putting speakers in their own column makes them more scannable, but generates lots of unused real estate. So feedback there is definitely appreciated.

[reefdog]

Oh, and on the reminder text: I experimented with additional ways of calling special attention to certain phrases, like the all-important "check the original post to verify attribution":

That's probably a bit more glaring than we need, but just to show we can definitely call attention to it even in a diminished position.

[reefdog]

Added coloring to "Twitter" and "CNN" to call even more attention:

[markstencel]

Apologies for being late to the party here!

What I love most: short text up top with all the details at the bottom (Erica and I can re-draft wording with that in mind); emojis :-) ; overall readability. What an improvement.

Questions: I really like the color-coded source (in CNN red and Twitter blue). What will be do for other sources once we add them (MSNBC/NBC, Fox, Congressional Record, Facebook)? I do not think we should NOT mix Twitter with CNN for the reasons Erica mentioned, but I do kind of like the idea of mixing TV sources once we add more. Will that mean we need to display more results in each newsletter, since some of the claims that have caught fact-checkers' eyes were not the highest scoring claims? Maybe. Not an immediate issue since we do not yet have any other TV sources. Also, the quality of what we send may improve if/when filtering out speakers who have not yet been fact-checked (based on ClaimReview). If possible, I would love to put CNN/TV claims first, unlike our current newsletter which starts with tweets.

Sorry again for this belated input. Happy to translate if any of this is indecipherable.

[reefdog]

Thanks @markstencel! That feedback is good and perfectly decipherable.

I do not think we should NOT mix Twitter with CNN for the reasons Erica mentioned.

Cool, I'll break them back out.

I really like the color-coded source (in CNN red and Twitter blue). What will be do for other sources once we add them (MSNBC/NBC, Fox, Congressional Record, Facebook)?

I plan for each one to use exactly the brand color for that platform. (For instance, I didn't just pick any red and blue; I nabbed the colors straight from the respective CNN and Twitter branding.) Many of them have very similar brand colors, but I think that's okay; the brand name is the primary differentiator, while color is just a bit of pizazz. If that ends up looking too wrong or confusing, we can definitely remove it. (Or experiment with adding actual logomarks, but I smell that getting visually chaotic.)

If possible, I would love to put CNN/TV claims first, unlike our current newsletter which starts with tweets.

Definitely!

I've implemented your feedback into this mockup, lemme know what you think. With the claims unthreaded, the per-claim emoji was a little noisy (just a row of TVs and then a row of birds), so instead I'm using them in the section headers. I'm also using platform-agnostic header names, even though we currently only have one platform per medium. This way we already have our pattern down for mixing Fox/etc. into CNN and mixing Facebook in with Twitter.

[reefdog]

Two more notes:

1. Of course it's super easy to change copy, so please feel free to edit the boilerplate as much as you want! This is also HTML email, so if bolding or highlighting will help draw attention to Very Important Passages, feel free to do so.
2. Using Mailgun mailing lists lets us add unsubscribe links to emails if we want. If we do so, I'd recommend adding a "You can always unsubscribe in one click." link as the last sentence in the opening "Good morning, fact checkers!" paragraph.

[reefdog]

Here's a quick example of using the brand colors for each claim, this time both the platform name and the border of the claim content:

[reefdog]

I'm kind of leaning toward only doing the border color; that way the name itself is there for reading, but isn't drawing too much attention away from the claim itself:

[slifty]

FWIW at a complete gut feeling level / without looking at it too hard I like it better with color on the name too -- feels easier to scan / find claims from a given source and more obvious what the use of color is associated with... I agree it's more distracting though so I hear ya.

[reefdog]

Definitely easier to scan for that platform, but then once you're reading the claims, does it keep trying to steal your eye? The brighter ones especially (Twitter, MSNBC) keep doing that to me. 🤔

Edit: Dang you edited that to say much the same.

[slifty]

What if we just make the background AND the text also be the color to avoid the distraction.

I made a mockup:

[reefdog]

That's an amazing idea. I was just making another great idea over here, I think with these two changes we're ready for print:

[markstencel]

Blinking scroll is a MUST. With Drudge sirens?

Source colors are great. Will think about the text and get back to you. Thank you!

[slifty]

We've outdone ourselves, ready to ship.

A real exploratory thought (not that that last idea wasn't real obviously):

1. What about a color underline under the source that is different form the text (so CNN would have a red underline; or heck maybe even the whole underline?)
2. What about making the station name smaller but still bold and colored in?

[reefdog]

What about a color underline under the source that is different form the text (so CNN would have a red underline

Assuming you mean CNN's text would be in gray but with a red underline, here's how that looks:

heck maybe even the whole underline

And here's how that looks:

What about making the station name smaller but still bold and colored in?

And here's how that looks:

---

I think we could start with the smaller colored names (+ left borders) and wait for folks to complain about it being distracting.

[slifty]

One additional thought: instead of chaining "on" lets consider

PERSON NAME on SHOW NAME (NETWORK/WHATEVER)

also via is an option

[reefdog]

I like "via" for social media and "on" for TV, I think? And yes, I also like putting TV channel in parentheses rather than a chain of ons!

[markstencel]

re: show name. Transcripts like this currently generate a "show not found" in our alerts. http://transcripts.cnn.com/TRANSCRIPTS/1907/11/crn.01.html I don't know if that's because the current process depends on a list of shows that's outdated, if the transcript intentionally or unintentionally does not include a show title or what.

PERSON NAME on SHOW NAME (NETWORK/WHATEVER) is OK by me, though you will get a lot of...

ELIZABETH WARREN on CNN NEWSROOM (CNN)

...which is probably fine.

[markstencel]

CNN show names don't matter all that much for fact-checking purposes. But it will matter once we have other networks, especially MSNBC and Fox, so good to have them.

[reefdog]

I'm gonna close this. We've had enough buy-in to the new layout that we'll call it "good enough to bug-report on". I'll create new issues for the remaining individual pieces.