Homepage Redesign

[kristine-eudey]

Overview

We need the new homepage design to be completed so that it can move to development

Action Items

• Bonnie and Kristine to have a working session to pick up from previous design work and come up with a design solution that will be moved forward to development.
• Low Fidelity Design
• Mid Fidelity Design
• High Fidelity Design
• Final content in place:
  • Copy
  • Images
• Audit of final design to ensure that Design System requirements are met

Resources/Instructions

Figma - Homepage Redesign

[kristine-eudey]

@ExperimentsInHonesty Most recent version here, in pink rectangle: Homepage Redesign - 8/22/21

[kristine-eudey]

All recently discussed edits have been made and, pending approval, I think the MVP v2 is ready to go. I will work on MVP v1 in the coming days, which is the version with a simplified Program Areas section while we wait for project impact content to be finalized.

See most up to date version here:Figma - Homepage Redesign: 9/3/2021

Edits made to this version:

• Top 10 used technologies icons are now featured. See Issue --> Gather .svg files for icons of technologies used at HfLA #2130
• CoP icons are finalized (pending any desired changes by dev team to their icon, will ask at Sunday meeting)
• This change was not discussed, but I made a design edit to the "We use technology to make an impact" section. This section kept feeling off to me, was way too much text without enough visual impact to keep a person there and lead them through it. Got feedback from designers on the team that the "join us" and "about us" sections looked like two different, yet equal, options to choose from rather than as leading to distinct content. I changed the flow of content in order to bring in a more linear rhythm, leading reader from one section to the next vertically. I also brought in a background graphic to help break up the large amount of text all on a white background.
• All spacing and fonts have been checked against design system conventions, and use design system components where possible.

[github-actions]

@kristine-eudey

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 7, 2021 at 12:02 AM PST.}

[kristine-eudey]

View most up to date versions v.1 - abbreviated program areas section & v.2 - full program area section here: Figma - Homepage Redesign

[github-actions]

@kristine-eudey

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, September 14, 2021 at 12:02 AM PST.}

[kristine-eudey]

Completed homepage figma design

Notes:

• Section heading font size has been changed from Title 1 to Title 2. I will discuss this with design team at tonight's meeting and decide which version to put forward, both versions are fully designed and labeled on the Figma. My preference is for the updated version with Title 2 section headings. Barring this potential change, the design is complete as has been approved by Bonnie/Product team.
• I've designed an alternate hero section, which would replace the current hero image and reformat the text. For now, the version with the old hero image should be built and we will test both versions with users. Bonnie will also speak to people linked to the organization to gauge the effect changing this image away from the old one might have. I will create an issue to track progress on the hero image question, and will update this with link to the issue when that's been done.

[kristine-eudey]

@arghmatey the design is ready, can you please make an issue for development? After making the issue you can close this one. Thank you!

[arghmatey]

@kristine-eudey New issue create - #2317. Closing this issue! Thank you!