Write copy for Projects Page Header

daniellex0 commented 3 years ago

Overview

We need to design a header for the new projects page (which will be linked to from the homepage). The body of the page will be very similar to the current homepage.

Action Items

UX/UI

[x] Replicate the common header layout (with side-by-side heading and vector animation) shown in the design system (bottom row to the left)
- [x] Follow the precise margins and sizes to keep consistency on all pages
- [x] see Join us and Sitemap pages etc for live examples of this header layout
[x] Design new desktop projects page header on Figma file titled Project Page (WIP)
[x] Design new mobile projects page header
[x] Swap hero illustration
[x] Run mockup by design team

UX Writing

[ ] Write description of Projects Page

Development

[x] Hand off to development

Resources/Instructions

Project Page (WIP) Figma File Freepik Stories

Guidance for UX Writing

What does this page need to say in order for it to be useful?

We need this page to introduce our projects in such a way that it encourages the manner of engagement we want from potential volunteers.
The text at the top doesn’t reflect the path we want them to follow, we don’t want them to pick a project and start from there. We want them to follow the Join Us link. Letting people go directly to projects is hurting our projects.
A current issue, for example, is that a lot of devs have recently joined a certain project. The problem is they’re all very junior and en masse are not able to support the project (and support their own growth) as well as if there were a mix of different experience level devs on the project. This is why we don’t want people to come to the site and get married to the idea of a certain project, we want them to get excited about what we do on a larger scale, keep an open mind, then go through our intended onboarding flow and then from there get matched up to an appropriate project.

The use of this page we do want to encourage:

Finding out about our cool projects and getting excited about what we do
Being wowed at how many there are / their breadth

The use we don’t want to encourage:

Using this page to find a project that potential volunteers want to work on specifically. We instead want them to go to an onboarding session, join their CoP, and through this flow to get matched up with a project they would be good for.
Everyone who wants to join a project MUST first join onboarding. We want them to start there (onboarding), not just get their mind set on a project through this page and then try to join that.

shinhope commented 3 years ago

Progress: n/a Blocks: midterm exams, busy week Availability: next Tues-Thu ETA: by next Friday

daniellex0 commented 3 years ago

Assigning to @qtsash because this is time sensitive (and @shinhope is assigned another issue)

qiqicodes commented 3 years ago

@SaashaG Can you let us know your progress in regards to this issue? Thank you =]

Progress: Blockers:

SaashaG commented 3 years ago

I will work on it today and let you know. Thanks

SaashaG commented 3 years ago

I have started the header but would love to get some feedback. @daniellex0 let me know when you have time to discuss.

SaashaG commented 3 years ago

Progress: 50% Availability: Sunday 5/16 ETA: 5/15

daniellex0 commented 3 years ago

This is looking really good, thank you for following the design system! I know there are a ton of tiny details to follow that are easy to miss, so I made a few adjustments (made the paragraph line height 137%, and adjusted some spacing).

Can you make the following adjustments:

[x] In mobile, change "Join Us" to the new page title
[x] In desktop, maybe the paragraph width 508px

Thank you!

SaashaG commented 3 years ago

I have updated the design...

daniellex0 commented 3 years ago

@SaashaG Perfect, looks good!

Sihemgourou commented 3 years ago

@daniellex0 this seems finished right?

daniellex0 commented 3 years ago

@Sihemgourou Yes the design is finished and being developed- we just need to fix the copy (the paragraph in the header)

github-actions[bot] commented 3 years ago

@ahoang94

Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
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 a Tuesday or Sunday 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, August 10, 2021 at 12:10 AM.}

Note: This comment was created as part of a GitHub Action during its trial phase. If you find this GitHub Action to be disruptive/unhelpful, or if you believe there might be a bug, please leave a comment on this issue. All feedback will be used to further improve it. Thank you for your time.

ahoang94 commented 3 years ago

@kristine-eudey I can have this done by next Thursday's meeting, but I would first like some guidance as to the expectations for this new copy. What are we aiming for, compared to what's in the existing copy?

kristine-eudey commented 3 years ago

@ahoang94 I will update this issue by EOD on 8/15/21 with further clarification about expectations for the new copy.

kristine-eudey commented 3 years ago

@ahoang94 please see updated guidance for copy in the Resources/Instructions section of the issue, and let me know if you'd like to discuss or need more context.

github-actions[bot] commented 3 years ago

@ahoang94

Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
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, August 17, 2021 at 12:02 AM PST.}

ahoang94 commented 3 years ago

Progress: No progress thus far, but this will change soon.
Blockers: There was some uncertainty about the aims of the copy, but I believe I now have it figured out.
Availability: Can work on this issue over the weekend.
ETA: I hope to have a first draft done by Sunday's meeting (8/22) at the earliest, or mid week at the latest.

ahoang94 commented 3 years ago

@kristine-eudey I have contributed a few first draft options in the green box to the left of the most recent mockup (blue rectangle).

kristine-eudey commented 3 years ago

@ahoang94 Great, thanks! I'll take a look and share thoughts within the next day on the drafts you came up with. Moving this back to "In Progress" until it's completely finished.

kristine-eudey commented 3 years ago

Hi @ahoang94, these copy options are great and definitely get at what we need to communicate here. I placed your wording options within the page design and brought them to discuss with Bonnie and the PM team yesterday. A few tweaks/combinations were made, which you can see reflected in versions 4a and 4b, with one including link in text and the other using a button for the CTA. Please take a look and let me know what you think of this iteration!

github-actions[bot] commented 3 years ago

@ahoang94

Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
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, August 24, 2021 at 12:03 AM PST.}

ahoang94 commented 3 years ago

@kristine-eudey The copy has been revised in the Artboard "4a v2" (see orange box). Please note my comment to the left of the board and let me know if we should act accordingly.

kristine-eudey commented 3 years ago

Updated copy was shared with Bonnie and PM team on 8/31. Additional changes were identified as being needed.

PM team will identify and give UX team clarity on what the most important elements that need to be mentioned on the header of our Projects page.
- Question for PM team to answer: what do we want people to think about when they think about our projects? How do we want to frame our projects for them?

github-actions[bot] commented 3 years ago

@ahoang94

Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
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, August 31, 2021 at 12:02 AM PST.}

ExperimentsInHonesty commented 3 years ago

@ahoang94 This is the new copy for the page

Our projects have real impact in local communities. Use the filters below to learn about our project and the teams by Status, Technology and Program area.

There are countless opportunities to build digital products, programs and services across a number of skill levels and practice areas. Visit the Join Us page to find out how you can get involved or see the About Us page to find out how we build all these project with volunteers.

github-actions[bot] commented 3 years ago

@ahoang94

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.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
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.}

ahoang94 commented 3 years ago

I have updated the Figma file to include a draft with Bonnie's updated copy.

kristine-eudey commented 3 years ago

@ahoang94 I worked on a version that incorporated the copy you wrote along with the changes requested by the product team, please see this newest version here. This copy was signed off on by Bonnie and PMs, but it needs work in terms of formatting/fitting the content in the header in a way that works. Please feel free to jump back in with this copy and see if you can get it to work visually. I added a grid to the page that matches that of the new homepage, please work to that grid where possible, while still not drifting too far from current design system requirements.

Some discussion points I wanted to share based on the discussion in my meeting with Bonnie/pms:

I brought up that I thought the flow would be more natural if it was structured:

"Hack for LA’s projects have real impact in local communities. Our projects also offer volunteers of all skill levels countless opportunities to build digital products, programs, and services across diverse fields of practice.

Use the filters below to learn about our projects and the teams by Status, Technology, and Program area."

Feedback was offered that linking the first two sentences together might push the user behavior we're trying not to encourage: volunteers getting involved with the org via a project, rather than via general onboarding. So the order was switched to pull those two concepts apart from each other (exploring our projects / getting involved):

"Hack for LA’s projects have real impact in local communities. Use the filters below to learn about our projects and the teams by Status, Technology, and Program area.

Our projects also offer volunteers of all skill levels countless opportunities to build digital products, programs, and services across diverse fields of practice."

github-actions[bot] commented 3 years ago

@ahoang94

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.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
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.}

ahoang94 commented 3 years ago

@kristine-eudey I have created 5 layout options for the updated copy!

ExperimentsInHonesty commented 2 years ago

@kristine-eudey I thought we either decided which one, or we were going to let the team vote. But this didn't seem to make the agenda today. Can you followup on this so that it has one version of the site in the red box.

kristine-eudey commented 2 years ago

When decision is made, add correct header to all new/current iterations in Figma.

kristine-eudey commented 2 years ago

Final version is complete and the Figma design can be found in the pink rectangle here

@abuna1985 this is now ready for a dev issue.

ahoang94 commented 2 years ago

@kristine-eudey @abuna1985

I think there might be a discrepancy with the size of the artwork. It is currently set to 372px in height, but according to the design system it should be 240px. Kristine, please advise.

kristine-eudey commented 2 years ago

@ahoang94 thanks for spotting that! Can you correct it? I can then go in and copy the adjusted version over to all the other new designs that incorporate it.

ahoang94 commented 2 years ago

@kristine-eudey The layout has been corrected in the "Final Version" artboard. I used Figma's auto layout feature to include built-in top and bottom margins (per the design system), which should help guide its placement on other artboards/designs: Screen Shot 2021-10-05 at 1 03 16 PM

I also updated the mobile version to have the approved copy + layout.

kristine-eudey commented 2 years ago

@ahoang94 looks great! See final design here. Closing issue as all design objectives have been met. This is now ready for development.

abuna1985 commented 2 years ago

@kristine-eudey Created #2355 to complete the dev portion. Moving this to the Done column

hackforla / website