Phase 4 Focus

Four major sections:

1. Donation
2. Events
3. Redesigning top navigation bar/Footer
4. Other pages

Figma File Note:

• Before making edits to the Figma file, please download the custom font no_name 37 to ensure the font does not get unlinked. Figma Article on custom fonts. It takes a long time to relink all the text to the correct font if that happens.

  Figma File Link

<aside> 📢 Donation Page

</aside>

Became the main focus of this phase as the client needed a live donation page. The donation pages have been handed off to dev.

• What have we accomplished?
  • Desktop, tablet, and mobile pages for donation flows have been completed.
  • Created a donation flow for Swish payments and credit card payments with Stripe integration. Currently, the Stripe integration is through DonorBox. There is a custom flow for Stripe that can be implemented in the next phase.
  • Created the GDPR page that links from the donation flow.
  • Completed usability test of the donation flow with the research team and implemented some changes based on findings
• What do we suggest for next phase?
  • The donation FAQ section needs to be re-designed to include more details about Beela’s results and metrics as well as how donations are used (usability test findings).
  • It was suggested that the first three questions: Beela’s mission, who does my donation help and why donate to Beela, are not a part of the FAQ section, rather three designed features that remain static on the donation page so users can see these more easily (usability test finding).
  • More research on GDPR content into what is needed and what is not. If possible, cut down content in the GDPR.
  • The custom Stripe Page and Thank you modal has not been implemented due to time constraints. These can be implemented in future phases.
• What have we learned?
  • Donors would like more information on how funds are used. Including metrics and success stories on the donation page are key to motivating donors.
  • Beela does not have many photos available of their team/events.
  • Beela needs more testimonials and they have been hard to get as there have only been 2 pollination programs. The third pollination program will be completed at the end of 2022 and research has worked on creating testimonial forms to send out
    • Testimonials should include where each mentor or mentee is from to show more diversity. (usability test finding)
    • Testimonials should include the prior field the mentee was working in before pivoting to tech. (usability test finding)

<aside> 👥 Events Page

</aside>

Wireframes are available and should be reviewed

• What have we accomplished
  • Created high-fidelity wireframes for Desktop and Tablet, have not handed off to Dev. The screens are located on the ‘IDEATING - Events - Stay connected’ Figma page
  • Created an Events section in the Stay Connected page that takes the viewer to the external events calendar of Beela.
• What do we suggest for next phase?
  • Do usability testing of the events flow prototype
  • Move forward with a more customized events user flow including events showing up directly on the stay connected page
• What have we learned?
  • Beela mostly shares third-party events, not their own.
    • Beela needs simple event cards that users can click to learn more OR be led directly to third-party site to register
  • Beela would like to have Beela events in the future
    • In this case, they would need a system that can register guests

<aside> 🐝 Redesigning top navigation bar/Footer

</aside>

Nav bar and footer have been completed and handed off to dev team.

• What have we accomplished?
  • Changed the nav bar to include the Donate CTA.
  • Redesigned the footer with a different layout and color based on a heuristic evaluation as well as preference testing.

<aside> 🌐 Phase 3 Pages

</aside>

Made changes in pages from phase 3 based on a heuristic evaluation and usability test by the research team, as well as feedback from the dev team.

• What have we accomplished?
  • Added a mission section to the home page to help users better understand Beela’s mission
  • Updated the newsletter button to a sign-up field
  • Worked with the writing team to make changes to the content to ensure Beela’s mission is coming through
  • Added a donate button to each of the support us sections
  • Changed the hexagon cards to circles to make changes easier for development
• What do we suggest for next phase?
  • Update the copy on the home page to make sure Beela’s mission is clear when scanning the page
  • Provide more clarity about the purpose of the slack community on the home page.
  • Make the volunteer opportunities more prominent on the home page. The usability test revealed that donors also want to volunteer.
  • Utilize more testimonials that illustrate the diversity of Beela mentors and mentees as well as career outcomes for mentees. Donors would like to see drastic career transformations.
  • Any changes that have not been handed off to dev are located in the “Desktop - Recommendations page” in the Figma file. The main changes in this file are to spacing and content.
  • Recommended wireframes of Events and Donation landing page can be found in the “DESKTOP - RECOMMENDATIONS” page under the “RECOMMENDATIONS” section.