Develop Updated Getting Started page

[daniellex0]

Overview

We need to update the Getting started steps because they are out of date, and update the layout to fit the new steps.

Action Items

Design/Product

• Review Getting Started page and determine what needs to be updated, and how
  • Review the user flow with the civic tech team
  • Mockup quick ideas for how to update page
  • Consider the devs' suggestions in their document
  • Discuss and consult findings and ideas with design team and decide on direction together
• Create final design of updated Getting Started page

Development

• Develop the updated Getting Started page (see new design in Figma- on the right in purple rectangle)
  • Make sure to also update the content of the FAQ accordion on the bottom of the page (keep its layout the same, just remove the first section and update the text in the others where applicable)
• Add new icons to credits page
• Once PR Develop updated getting started page #2059 is approved and merged, remove dependency from Adjust styling of Getting Started page #2193

Resources/Instructions

Getting Started page
New Getting Started page design in Figma- on the right in purple rectangle)
Credit.yml file template
Figma for Developers Guide

[Sihemgourou]

Needs to validate the user flow with the product team. @ashleylin1 lets schedule a meeting !

[Sihemgourou]

@ExperimentsInHonesty should we involve the civic opportunity team ?

[ashleylin1]

1. Progress: Created 3 drafts on Figma to shorten the content on the page; I lessened the number of icons and condensed the information but it's still pretty wordy with many tasks listed on the page
2. Blocks: need to discuss the desired user flow and whether parts of it can be automated (ex. being added to the roster, Github, Google Drive, etc)
3. Availability: anytime after 4pm PST this week
4. ETA: depends on how quickly we figure out the user flow

[Sihemgourou]

Suggestions (To address during next meeting) :

Overview

• Why do we need the description text, what is its value ? "Hack for LA brings together civic-minded ..."
• Adopt our Standard should be on Step 4

Step 1 :

• Review the title to something like " Start your onboarding process", because you have to do the "before the meeting" before attending the onboarding session
• Shorten text from this
  "Attend a Hack for LA Remote Volunteer Onboarding session via Zoom. Our next one can be found on our Meetup page."
  to this
  "Attend our Zoom Volunteer Onboarding. The next one can be found on our Meetup page."
• Shorten text from this
  "Read the hack for la code of conduct"
  to this
  "Read our code of conduct"
• is there a link for the HFLA code of conduct ? Same question for the onboarding survey?
• There is little value to the description of the step as it is now. "After you attend onboarding..."

Step 2 :

• Put the (i) "If you do not have a GitHub account.." next to the "Receive access". Maybe try an overlay ?
• Explain the CoP abbreviation before using it such as "Community of practice(CoP)"
• Shorten text from this
  "3. Attend your CoP meetings weekly. See here for schedule. Network with your peers, build up your skills, and hear from industry professionals."
  to this
  "3. Network with your peers and attend your CoP meetings weekly (See here for schedule.)"

Step 3:

• Align the "Choose a Role" title above the reste of the text."
• Review title it's too confusing with the step 4. Maybe replace it to something like "Shadow a project"

Step 4:

• Align the "Join a Project" title above the reste of the text."

Step 5:

• Align the title above the reste of the text."
• Change step description

FAQ:
Update the zoom tutorial

[daniellex0]

I'll address these since I attended the Tuesday meeting- but don't forget @Sihemgourou we all had decided we are planning to do UX Research for the next round of iterations to validate what really works best for volunteers, so we can make bigger changes once that happens. We don't want to assume too much and make too many big changes before we do some research and validate the changes.

Why do we need the description text, what is its value ? "Hack for LA brings together civic-minded ..."

This is how the page was originally created by a previous designer- I agree it doesn't make much sense to have the text that is there- I'd be curious to know if Bonnie has thoughts about what it should be replaced with.

Adopt our Standard should be on Step 3

Can you explain why? This was always the last step in the Getting Started page

Step 1 :
Review the title to something like " Start your onboarding process", because you have to do the "before the meeting" before attending the onboarding session

I think it's fine to keep this "attend an onboarding session" because that is the most important call-to-action that they are doing in this step, and we want that to be really clear.

Shorten text from this
"Attend a Hack for LA Remote Volunteer Onboarding session via Zoom. Our next one can be found on our Meetup page."
to this
"Attend our Zoom Volunteer Onboarding. The next one can be found on our Meetup page."
Shorten text from this
"Read the hack for la code of conduct"
to this
"Read our code of conduct"

Sure if Bonnie agrees. I will say it can be good to remind about the Hack for LA name for new volunteers, so that they are very clear what the onboarding is for. But I agree that with the Code of Conduct we don't have to repeat 'Hack for LA'

is there a link for the HFLA code of conduct ? Same question for the onboarding survey?

Yes there are links, like in the current Getting Started page

There is little value to the description of the step as it is now. "After you attend onboarding..."

I thought you were the one that came up with these captions on Tuesday? To make it clear there was a connection between each step?

Step 2 :

Put the (i) "If you do not have a GitHub account.." next to the "Receive access". Maybe try an overlay ?

Ok we can try to do this if Bonnie agrees, but I do think it utilizes the space well and moving it elsewhere could make it messy. Also they might not click the overlay. Maybe instead there can be just the (i) icon next to step2, but the actual (i) description stays where it is

Explain the CoP abbreviation before using it such as "Community of practice(CoP)"

Good idea, we'll add this

Shorten text from this
"3. Attend your CoP meetings weekly. See here for schedule. Network with your peers, build up your skills, and hear from industry professionals."
to this
"3. Network with your peers and attend your CoP meetings weekly (See here for schedule.)"

This is up to Bonnie if she agrees to feature less information about the CoP

Step 3:
Align the "Choose a Role" title above the reste of the text."

Can you explain more? Align next to the text on the right of the title?

Review title it's too confusing with the step 4. Maybe replace it to something like "Shadow a project"

I thought we all agreed to make it 'Choose a Role' on Tuesday.. I think it makes sense because you have to select a role from the role options available at the Community of Practice.

Step 4:
Align the "Join a Project" title above the reste of the text."

Again not sure what this means, please explain a little more?

Step 5:
Align the title above the reste of the text."

^same as above

Change step description

Please clarify what you mean by this?

FAQ:
Update the zoom tutorial

In what ways, just update the directions to make sure that it's consistent with how zoom works today? Or add something new?

[ashleylin1]

1. Progress: I created a new design that retains the original step order and includes step 2 of joining the community of practice. I also replaced the old icons with new ones that are from the same icon family to improve consistency (the old ones had different line widths) and the links to the icon source for attribution. One of the design versions also has a potential side navigation bar similar to the About page to make it easier for users to navigate between steps. I'm still working on the mobile version and I have not implemented the items discussed above but I will continue to work on them this week.
2. Blockers: I will discuss the items above with Danielle for clarification
3. Availability: I will likely not be able to attend Sunday meetings for a while due to a timezone difference but I am mostly available after 4pm PST

[ashleylin1]

Progress: Created a mobile version of the updated design and clarified w/Danielle about the above items
Blockers: need feedback on the design and whatever is decided in regards to UX research for this page
Availability: I will likely not be able to attend Sunday meetings for a while due to a timezone difference but I am mostly available after 4pm PST

[Sihemgourou]

Comment for @ExperimentsInHonesty

Here is my suggestion for the top of the page

[daniellex0]

During our discussion at yesterday's meeting with @Sihemgourou and @sayalikotkar we all agreed to try to finish and send off the MVP version of the Getting Started page to developers as soon as possible so that the website can up up-to-date, and because it may take some time for the person assigned to work on reformatting the layout for this page. Any future changes to the onboarding process (the automation of Github/roster etc) can be implemented easily in the next iteration. Also FYI we won't be considering the sidenav/collapsible mobile section ideas until we do some UX Research on this page and those ideas in the near future.

@ashleylin1 please make these changes to the page, and please provide an update on here when you're finished:

Please make these changes to a duplicate of the blue rectangle version (where some text adjustments have already been made)- and please make the yellow text black again in the duplicate (since we are not adding the future changes yet until those are finalized)-

• Incorporate this bolded line into the header (this version was approved, but feel free to move around as you see fit if you want)

• Make the step illustrations in the header vertical instead of side-by-side (in mobile version)
  • We can always hide these later if we want to in development if we decide to after UX research, but it's good to have this in the Figma version for now
• Add the step illustrations to each step in the mobile version
• Replace the current Communities of Practice icon (people around a table) with the one next to it that says "winner"

• Please raise the “Step 1” etc headers higher (above the text to their right), so it’s clear they are above/include everything below them

• Switch steps 4 & 5 in mobile (already switched in desktop)

• Try to improve/layout the (i) section about Github in step 2 better if you can

• We are removing the FAQ section about zoom

• For the before the meeting/after the meeting question about Step 1 (because the survey is supposed to be filled out after the meeting, but the rest of the steps are for before)- maybe try adding a 'before the meeting' section on top for steps 1-2, and 'after the meeting' section below for step 3? We can see how that will look

Thank you!

[ashleylin1]

Progress: All changes can be found on the updated designs in the purple box on the Figma Getting Started Page
Blockers: None
Availability: after 4pm

https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=13%3A0

[Sihemgourou]

Suggestion from product team:

• Adopt our standards should be before choose a role
• The page seems good though. Let's make a ticket once the previous point is corrected.