Design cookie banner

[data-sync-user]

Design a cookie banner for primary foundation websites.

Banner must follow moco’s legal contraints (wording, equally weighted buttons, etc). But the design should be adapted to fit mofo’s design system and to be distinguishable from moco’s given that they are not connected (accepting on one site will not mean accepting on the other).

Links

• Final designs +Cookie-Banner-2023+
• User testing findings +Cookie Banner - Jam+

Todo

• Work with devs to figure out how customization the banner design is (guidelines https://my.onetrust.com/s/article/UUID-2b6cc670-059c-5342-275c-4a7d8da5630e?language=en_US )
• Design banner and share for feedback

┆Issue is synchronized with this Jira Task

[data-sync-user]

➤ Nancy Tran commented:

Create a mofo figma file here ( https://www.figma.com/design/qs6L59AOhvXOAqsKl8VfRO/MoFo-Cookie-Banner?node-id=1-1480&t=ihyduOnsyx2wWdev-1 )

[data-sync-user]

➤ Sabrina Ng commented:

Simon Acosta Torres Do you have more details on this ticket? I took a look at some of the guidelines to “customizing the banner template” linked and looks like I may be limited to select or customize a predefined set of options in a template. Am I able to log-in to the account you mentioned in slack that Abi created so I can preview on the platform directly to iterate there or do you know which developer I should consult with to proceed?

I’m iterating on designs here https://www.figma.com/design/qs6L59AOhvXOAqsKl8VfRO/MoFo-Cookie-Banner?node-id=48-1565&t=d9cFYyXCEmh3F4sS-1 ( https://www.figma.com/design/qs6L59AOhvXOAqsKl8VfRO/MoFo-Cookie-Banner?node-id=48-1565&t=d9cFYyXCEmh3F4sS-1|smart-link ) but I want to figure out what is possible with their custom CSS field and what are the constraints.

[data-sync-user]

➤ Simon Acosta Torres commented:

Sabrina Ng An account has been created under the Devops email address and accessible through 1Password. You will be able to find the credentials on MoFo: Web Platforms vault.

Once you access the site, on the welcome page, click on Cookie Consent, which will open the Cookie Banner dashboard.

In order to see how the banner can be styled, click on the Templates option found on the side navigation under Setup, and then click on the Testing Template I created for the purposes of checking the options.

Over the Styling tab of the template you should see the options regarding colors and the possibility of adding Custom CSS.

Here ( https://my.onetrust.com/s/article/UUID-2b6cc670-059c-5342-275c-4a7d8da5630e?language=en_US )you can also take a look at the Customization documentation.

Please take a look and let me know if this helps.

Thank you!

[data-sync-user]

➤ Sabrina Ng commented:

I’ve logged into the OneTrust platfrom and explored the styling tab. The deafult options are quite limited but have a better understanding of the structure. I captured in figma https://www.figma.com/design/qs6L59AOhvXOAqsKl8VfRO/MoFo-Cookie-Banner?node-id=55-1572&t=19YGf2K61aUK4hKV-1 ( https://www.figma.com/design/qs6L59AOhvXOAqsKl8VfRO/MoFo-Cookie-Banner?node-id=55-1572&t=19YGf2K61aUK4hKV-1|smart-link ) what could be done with the defaults and suggestions for what Custom CSS I’d like to work with a developer with (as it may require publishing a production CDN script etc.).

[data-sync-user]

➤ Simon Acosta Torres commented:

Sabrina Ng , Rob DiVincenzo will be handling the initial development of the cookie banner. Let’s work together on verifying how easy is to really adapt the component to the figma and what sort of issues we might encounter on applying those settings. Thank you!