Orcahome Redesign: "Donate" Page UX Update

[UXBrendan]

User Story AS a New Orcahome user I WANT to see an easy to read webpage when I navigate to the Orcasound "Donate" page SO THAT I can easily donate to Orcasound's efforts, as well as to organizations within our network.

Description The intent of this story is to update the design of the "Donate" page.

NOTES:

• Header/Footer navigation bars are not included in any design work for the "Donate" page
• Use Material UI for the styling
• Please create new frames for desktop, tablet, and mobile designs and place below current design linked below
• UX skillsets needed:
  • UX Research
  • UX Writing
  • UX Design
  • Content Strategy
• All content needs to be rewritten for clarity
• All organization logos need to be checked for most recent version
• Redesign partner donation options to include 2 links:
  • Homepage of organization
  • Donation page of organization
• Organizations within our network:
  1. Beam Reach
  2. Colorado College Physics and Environmental Science Departments
  3. Orca Network
  4. Port Townsend Marine Science Center
  5. Orca Behavior Institute
  6. Cetacean Research Technology
  7. Whale Scout
  8. Deep Green Wilderness
  9. Oceans Initiative
  10. Friends of Lime Kiln Society (FOLKS)
  11. The Whale Trail
  12. The Center for Whale Research
  13. Pacific Mammal Research
  14. Sound Action
  15. Orca Conservancy
      • Please refer to this webpage for network organizations and links (logos may not be current): https://www.orcasound.net/join/
• We have avenues for website visitors to donate directly to Orcasound- allowing donation through these avenues need to be designed:
  • Github: https://github.com/sponsors/orcasound
  • Open Collective: https://opencollective.com/orcasound
  • Others? Please reach out to @scottveirs for additional options to donate directly to Orcasound
• Red color needs to be redesigned to match style
• [ ] When design is ready to be sent to production, please write user story in appropriate repo in the Orcasound Github
  • [ ] User story template (please download file- it is a MS Word Template, opening it will create a new document that you can fill out): https://docs.google.com/document/d/16CaKvAQzBrsAvKle0ieSUCQpYvCCXp8v/edit?usp=share_link&ouid=110838499857425540356&rtpof=true&sd=true
  • [ ] Please reach out to @UXBrendan to identify appropriate repo in the Orcasound Github

Acceptance Criteria GIVEN I open the Orcasound Donate page WHEN I look at the page THEN I am able to donate to Orcasound or network partners

Current design to be updated: https://www.figma.com/file/YdvbAjHETokV2x1LBHaElj?node-id=1015:1110#410004342

[UXBrendan]

@CourtneyDruzak @hieu-dth791

Here are links to donate directly to Orcasound (I'll also put them in the user story above):

Open Collective link: https://opencollective.com/orcasound GitHub sponsor: https://github.com/sponsors/orcasound

[UXBrendan]

@UXBrendan

@CourtneyDruzak and @hieu-dth791 are writing user stories- send to development when user stories are provided

[UXBrendan]

@hieu-dth791

See Figma comment: https://www.figma.com/file/YdvbAjHETokV2x1LBHaElj?node-id=4615:890&mode=design#571097075