EOY Banner: Design Parameters and Benchmarking

[data-sync-user]

For the 2024 end of year fundraising, design needs to give the fundraising team a list of design “guard rails” about what is possible with the donate banner that will be featured on the Foundation’s homepage. There is also a need to design how the banner will coexist with our new cookie banner. Below (thanks [~accountid:5fd11ff99b5eed0076cd9411] ) are some snap shots of what we are currently working with (mobile and desktop images below) and link to slack thread for tablet views:

!Screen Shot 2024-09-27 at 10.59.07.png|width=25%,alt="Screen Shot 2024-09-27 at 10.59.07.png"!

!Screen Shot 2024-09-27 at 11.01.53.png|width=75%,alt="Screen Shot 2024-09-27 at 11.01.53.png"!

┆Issue is synchronized with this Jira Story
┆Attachments: image (9).png | Screen Shot 2024-09-27 at 10.59.07.png | Screen Shot 2024-09-27 at 11.01.53.png

[data-sync-user]

➤ Rebecca Lam commented:

Hi Rob DiVincenzo and Sabrina Ng  (and Nancy Tran

!image (9).png|width=1698,height=340,alt="image (9).png"!

if you have any insight as well!), I have some questions for the two of you. Some relate to content, some to design.
Regarding content:

1. Do we have to have the header “Help Mozilla with Analytics”?
2. Do we have to say “Accept Analytics Cookies” instead of just “Accept”?
3. Can we merge the consent settings link into the paragraph above the buttons?
4. Can we add the word ‘analytics’ to the paragraph above the buttons so we don’t have to use it in the header and the buttons?

Regarding design:

1. Can we style the buttons side by side instead of on top of one another?
2. Can we change the header from H2 to H6?

I’ve attached an image showcasing how some of these decisions would affect the cookie banner design and how it would help us save some space (designing mobile first currently, depending on the decisions we make here I’ll build out the tablet and desktop screens)

[data-sync-user]

➤ Rebecca Lam commented:

Hi Rob DiVincenzo  and Sabrina Ng  (and Nancy Tran  if you have any insight as well!), I have some questions for the two of you. Some relate to content, some to design.
Regarding content:

1. Do we have to have the header “Help Mozilla with Analytics”?
2. Do we have to say “Accept Analytics Cookies” instead of just “Accept”?
3. Can we merge the consent settings link into the paragraph above the buttons?
4. Can we add the word ‘analytics’ to the paragraph above the buttons so we don’t have to use it in the header and the buttons?

Regarding design:

1. Can we style the buttons side by side instead of on top of one another?
2. Can we change the header from H2 to H6?

I’ve attached an image showcasing how some of these decisions would affect the cookie banner design and how it would help us save some space (designing mobile first currently, depending on the decisions we make here I’ll build out the tablet and desktop screens)

!image (9).png|width=1698,height=340,alt="image (9).png"!

[data-sync-user]

➤ Rebecca Lam commented:

Designs can be found here ( https://www.figma.com/design/2TK8tXeDIiLC67TMdbMIcO/Fundraising?node-id=1979-423&t=gh6ham51KiqT4CL7-1 ). We have a meeting to review the designs this Wed, Oct 16, with Shing and Robin. Currently there are two directions but personally I am leaning towards the larger banner for EOY.

[data-sync-user]

➤ Rebecca Lam commented:

Word Count

Heading: 30 characters

Body: 60 characters

Image: Transparent PNG, 16:9 aspect ratio