Write copy for Projects Page Header

[daniellex0]

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

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

UX Writing

• Write description of Projects Page

Development

• 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.

[Sihemgourou]

@daniellex0 this seems finished right?

[daniellex0]

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

[ahoang94]

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

[kristine-eudey]

@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."

[ahoang94]

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

[ExperimentsInHonesty]

@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]

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

[kristine-eudey]

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]

@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]

@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]

@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:

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

[kristine-eudey]

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

[abuna1985]

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