Newsletter signup: iterate current design for marketing consent

[jennpb]

What?

Update designs for the NewsletterSignup and NewsletterPromo components to accommodate marketing consent checkbox and text.

Text = Tick this box if you’re happy to receive other emails about Wellcome Collection, upcoming events and exhibitions and/or other relevant opportunities.

The checkbox and text will need to work in the existing components. The NewsletterPromo should also retain the All newsletters link.

Sidenote

We will probably want to consider a total redesign in the future to accommodate additional data fields needed to support the email strategy. That time is not now, because Marketing need to decide how they want to structure their data in Dotdigital, and this is unlikely to happen until later in 2023.

Why?

To align our newsletter signups with the rest of Wellcome, and to enable Wellcome Collection's email strategy

Done when

• [x] Design + Devs agree what changes to make

Background

Jenn met with Sally Larsen, Rachel Collins and Phoebe Harkins in June 2023 to discuss some ideas for improving marketing email sign-ups.

To support the Wellcome Collection email strategy, they’d like to bring our data collection in line with Wellcome. This will involve first updating marketing consent and privacy information; later adding additional data fields.

https://www.notion.so/wellcometrust/Newsletter-sign-up-Q1-2023-9395adca3b4e49489af8507a3af5a7c9

[DominiqueMarshall]

NewsletterPromo design iteration: https://zpl.io/YYjWglM

With the promo box, I've moved where the email address box and subscribe button sit, as adding the checkbox text to the left-hand side makes the whole component look very unbalanced.

I've also included a future iteration that is more visually aligned with the current newsletter component on wellcome.org, and will likely be easier to edit in the future when more data fields are needed.

NewsletterSignUp page: https://zpl.io/Z0pPQlw I've added the new checkbox option underneath the other update boxes

cc @rcantin-w @davidpmccormick @gestchild - Let me know if you foresee any issues with the slight redesign of the Newsletterpromo component.

[jennpb]

The information hierarchy in the proposed new design seems clearer than the adjustments to the existing newsletter promo - the most important part being the input field.

How much additional effort would be required to update the design to the new iteration @rcantin-w @davidpmccormick?

[rcantin-w]

Just to be clear, do you mean removing the text we added yesterday and just going with exactly what's in the mockup? @jennpb

As for the integration, I don't foresee a lot of work. (just figuring out how to send out that marketing preference is the main "difficulty")

[jennpb]

I mean updating the component to be the full width yellow background, but using the updated text.

[rcantin-w]

Ahhhh sorry, they were both a new iteration to me 😂 The full bleed background is already possible so we could defo look into it, I think (famous last words) easily enough.

[rcantin-w]

I've got this so far. The input is slightly different as it uses the existing component. If we should modify it across the site, let me know! The new checkbox look is done as a variant for now, but I called it isNewStyle and am hoping we can just change it across the site, I'd just do that as a separate piece of work.

How do we see the spacing around the component? Here are two examples.

[DominiqueMarshall]

I'd say the first - with no spacing above or below.

The existing input component is fine to use :)

[rcantin-w]

It's integrated now in my PR, you can see them in its instance of Chromatic:

• NewsletterPromo
• Newsletter signup
• Checkboxes
• Radio buttons (also affected by the change)

[rcantin-w]

So the newsletter now has the Marketing checkbox on both forms, but the Promo I was unable to test locally and doesn't seem to take it into account (even when checked, it doesn't register in DotDigital, so these people wouldn't get marketing emails). I'm aiming to fix now.

EDIT: oops wrong ticket. I guess this one could be closed though, the design is there 😄

[rcantin-w]

@DominiqueMarshall It's now in prod, if you want one last look for this ticket :)

[DominiqueMarshall]

Aah look at it! 🎉 Thanks Raph 😊

[jennpb]

All lovely and deployed.