Callouts on fronts

[tkgnm]

Motivation

In the journalism team, one of our OKR's for this quarter is to encourage our users to contribute to callouts, which are special articles that primarily exist to contain a form that readers can use to share their experiences with The Guardian.

Problem

Currently, there is not a very clear way of visually setting apart what is a "callout" article on fronts. Because of this, some of our users currently think callout articles are actual articles. This ambiguity could be having a negative impact on our users' experience. Additionally, we think that if we can make it clearer to our users that an article is a callout, we could drive user engagement in our callout campaigns.

Solution

We would like to change the way fronts renders callout containers/articles. See the below figma (WIP):

There are a few changes here

1. The "take part" container has a different background to the rest of the containers. There is also a short caption on the left of the container underneath the title.
2. Cards with an image have a "share your story" overlay.
3. There is a sort of timestamp at the bottom that tells the user how much longer the callout is open for.

Fronts -> DCR migration

If possible, we'd like to only implement these changes on dotcom rendering to save us having to make changes in two codebases as we migrate to fronts rendering. This depends on the estimated rollout of fronts rendering.

What we'd like to know

1. What is the ETA for fronts rendering and its plan for rollout?
2. Do we already have mechanisms for implementing some of the above changes in dotcom-rendering?
3. More generally, please reply with any thoughts, questions or objections to this change on fronts.

[OllysCoding]

I'll come back to the question of the when, but in terms of the how, there is a lot of opportunity here.

It seems that the design goal can be split into two areas:

The Card

We'd need to put together some kind of logic to decide whether a card invites you to 'share your story' or not, depending on the requirements, this could either be done up stream in facia-press in Frontend, or in DCR at the enhance / data transformation stage.
At that point it would be as simple as updating the card component in DCR to consume this data.

My inclination would be to suggest that this visual change exists separately to the container styling changes (e.g a 'share your story' card not in the new container designs would still get the little 'share your story' badge) - but this is mostly for semantics, and there likely wouldn't be a technical limitation to either approach

One thing I would note on the design, is that the yellow background covering the image is something we've stopped doing in DCR, with the stars (as an example) moving down below the title:

Frontend:

DCR:

You may want to consider this to ensure consistency in card design!

EDIT: Just noticed the 'how long the callout is open for thing' - this increases the likelihood we'd want to make a change in facia-press to ensure we have this data!

The Container

First of all, I'd note that there is already a 'description' field supported in facia tool & fronts:

This is great for us because it means the changes are almost entirely stylistic! We already have a method in DCR of allowing styles to be changed for specific containers, based on how they are tagged: https://github.com/guardian/dotcom-rendering/blob/main/dotcom-rendering/src/web/lib/decideContainerOverrides.ts

decideContainerOverrides can be updated to ensure it supports changing the styles you need, but I would say that adding support for a background image (is it an svg? 🤞) could be a bit more involved - though definitely doable!

---

TL;DR - this all seems doable to me! The only problem could be the roll-out of DCR, especially as while we're doing early % tests, we'd likely be hesitant to risk the like-for-like-ness of the migration.

[oliverlloyd]

Hi Journalism 👋

Thanks for asking for our feedback, and thanks for this really well written RFC!

Echoing @OllysCoding comments, I think these changes are very possible and I don't see any major issues here.

Point by point:

Container changes

1. The "take part" container has a different background to the rest of the containers. There is also a short caption on the left of the container underneath the title.

Description

As Olly mentions, there already exists a way to add a description to containers. I tested this in training and it just works

Other style changes

Additional style variation (including the background image) could potentially be achieved using container tags (aka 'palettes')

These palettes are traditionally thought of as ways to give existing containers a 'feel', like Sombre for bad things or Event for the Olympics, etc. But I think it's also fair to simply consider them as a technique to communicate a desire to vary the styling for a container, which I think applies here. We would need to discuss this more with @HarryFischer and digi eds if we went down this path and it would also require a change to the Fronts Tool.

The background image could be added using the same palette property. The simplest would be to hardcode the svg in the source.

Card changes

2. Cards with an image have a "share your story" overlay.

Varying the style of a card when the tone tag of callout is added is straight forward. Most likely, we'd want to have a new format.Design property of Callout which gets picked up when the tone/callout is applied to content.

Journalism have recent experience of adding a new design tag with the Explainer work.

3. There is a sort of timestamp at the bottom that tells the user how much longer the callout is open for.

As above, varying based on format should be simple. The question here is how do we extract the expiry date out of the content of the article. is this value part of the model for the callout form embedded in the article or is it held somewhere else?

[oliverlloyd]

Actions

Based on the comments here I think we, Dotcom, have some actions:

1. Check with @HarryFischer and Digi Eds about extending the list of container palettes to accommodate this change. We're also interested in this area as there are other potential use cases for this approach.

2. Discuss with other platform teams the viability of adding a new Callout design. I don't see there being any issues here but it's a shared type and changes need to be done cross team.

3. If this hasn't already been done, we should check on how digi eds et al feel with having background images on containers. To my knowledge this is the first example of this.

@alinaboghiu @tkgnm are you happy for us to work on these or would you prefer to lead?

[alinaboghiu]

If you'd like to help that would be great. Please could you involve Tom in these chats/emails as well? And thanks both for all your pointers.

I will take #3 above as I think Max Walker has already spoken to digi eds so don't want to duplicate work. Will get back to you on this.

[oliverlloyd]

Thanks. I'll leave 3 with you and Dotcom can pickup 1 & 2

[jamesgorrie]

Editorial experience will be picking up the work - it feels like a really nice bit of work to get more familiar with the platform. Ping @idrise FYI

[jamesgorrie]

@tkgnm closing this as I think through all of yours and others good work we're done!