Foundation.mozilla.org: Add newsletter sign up button and form to nav

[kristinashu]

HOLD UNTIL DESIGN IS FINAL

Add newsletter sign up button to nav, update donate button, and add form.

• [ ] Add Newsletter button
• [ ] Update style of Donate button
• [ ] Mobile: Newsletter stays put while Donate button moves down below nav items
• [ ] Clicking on Newsletter button animates sign up form to open and page content slides down
• [ ] Clicking anywhere outside of the black form box animates the form to close
• [ ] Error/success/hover states should follow footer styles

🗒 Design -> Dev Handoff Checklist

• [ ] Design has been finalized
• [x] Link to original design ticket https://github.com/mozilla/foundation.mozilla.org/issues/2757
• [x] Link to related ticket _[n/a]_
• [x] Link to Redpen https://redpen.io/p/uvd561910fde4f4bc9
• [x] Design changes been merged into the master Sketch file
• [x] Desktop and mobile mockups are included
• [x] Assets are included _[n/a]_
• [x] Hover state for elements are designed
• [x] Other states for elements are designed (e.g., error state for form)

Final comps:

Newsletter opens on click:

Buttons prioritized on mobile:

Newsletter opens on tab (closing by clicking on anywhere in nav bar or clicking Sign up button):

[mmmavis]

@youriwims please don't work on this until the sign up component work that Pomax and I are working on is merged first.

[kristinashu]

Also please wait for design to be finalized!

[kristinashu]

Sorry but it's looking like this ticket was premature! Anil wants to look into the working a little more. @youriwims I'm going to unassign you and turn this into a design ticket, sorry.

Things for design to do:

• [x] get analytics from Will so we know how much the current donate button is bringing in [Kristina to do]
• [x] benchmark site that have more movement orientated copy [Kristina & Rebecca to do]

[kristinashu]

Numbers from Will for the last year: 688 donations for $19,525

Compared to visits:

[kristinashu]

@beccaklam I've added some benchmarks here, please add your thoughts or more examples!

[beccaklam]

@kristinashu Dropped in some more advocacy examples. A lot of language around empowerment (power, fight, etc).

[kristinashu]

Opened up dev implementation ticket https://github.com/mozilla/foundation.mozilla.org/issues/2994 and tracking/testing ticket https://github.com/mozilla/foundation.mozilla.org/issues/2995 (@beccaklam if interested, maybe you could take the lead on the tracking/testing one?).