How to join page (UX)

[jenchuu]

Overview

As a UX Designer, we need to help new potential volunteers understand the steps of how to join Civic Tech Jobs. We will create an informative How to join page with illustrations and potentially a FAQ section at the bottom for new potential volunteers.

Action Items

• [x] Ideate via wireframes
• [x] Discuss ideations among designers
• [x] Select and annotate designs
• [x] Present to team
• [x] Decide on hi-fi design
• [x] Add to prototype for testing

Resources/Instructions

How to join page (Figma)

Resources

[jenchuu]

@sdimran @sharadgaurav7 Can we create new P-feature: How to join page? or should we put under P-feature: Navigation ?

[jenchuu]

We've ideated potential design solutions and narrowed it down to two to discuss in today's meeting:

A4

• Diversity added to illustrations at top How to join header section and illustrations to describe steps
• How to join header section incorporates dots from sign up/log in pages for consistent visual design across website
• Linear steps from top down in "timeline" design
• FAQ accordion section at bottom
• "Back to top" button added at end of page on bottom right to help users easily scroll back to top of page

B

• Diversity added to illustrations at top How to join header section and illustrations to describe steps
• How to join header section incorporates wave design but in blue to keep consistent visual design across website but add spice (so pages all don't look same)
• L to R and down (Z-eye pattern) steps are condensed and don't take up as much space on page to show potential volunteers steps are easy / not long process
• Tooltip added to CoP to give users better understanding of what a CoP is
• FAQ accordion section at bottom

[sdimran]

@sdimran @sharadgaurav7 Can we create new P-feature: How to join page? or should we put under P-feature: Navigation ?

We can create a new feature for the how to join page

[graceerya]

These are the designs for the How to Join page as finalized by the design team:

Desktop:

• Explored a dark blue background but decided to continue with tan hero image
• Added tooltip next to Step 1 that defines CoP

Mobile:

• Kept general design of hero image but removed dots for more space and centered all content
• Also includes tooltip for Step 1 to define CoP
• Line runs through all steps to carry over the "timeline" idea on the desktop version
• Like desktop version, includes "back to top" button

[sharadgaurav7]

These are the designs for the How to Join page as finalized by the design team:

Desktop:

• Explored a dark blue background but decided to continue with tan hero image
• Added tooltip next to Step 1 that defines CoP

Mobile:

• Kept general design of hero image but removed dots for more space and centered all content
• Also includes tooltip for Step 1 to define CoP
• Line runs through all steps to carry over the "timeline" idea on the desktop version
• Like desktop version, includes "back to top" button

@ExperimentsInHonesty , we need you to review this concept and provide you approval.

[sdimran]

Hi @jenchuu, we had some discussions with Bonnie today around this issue and have some feedback, please see below. the numbers reflect which step above I am referring too:

1. we can remove the mentions about meeting zoom links from CoP

2. Reviewed this one with Bonnie and reworded the step for clarity. i have included the note in figma as well beside this screen :

   • Select which roles you are interested in and input your weekly availability to see all your project matches. Explore the results to see if the skills and other details are a good fit.

3. can we change this to : Onboarding is a mandatory zoom session which all prospective volunteers must register and attend prior to observing project meetings and taking part in a project. (the second sentence can remain the same)

4. Convert this to a checklist and include some line such as "come back to civictechjobs.org and sign in to see full project details" hyperlink "sign in" to the sign in page ex.

   • Attend the mandatory onboarding
   • Come back to Civictechjobs.org and sign in to see full project and role descriptions
   • Contact the projects Product manager on slack to observe/join the team meetings (this can be rephrased, open to suggestions)

FAQ question: Q: Im logged in, how come I cant see full project details? A: Have you attended an Onboarding? if you have not then your account will not be able to see the full role details (lets elaborate more on this)

Overall, lets try to trim down on the words for the steps where possible to make it concise and to the point

Let @sharadgaurav7 or I know if there are any other questions for this feedback

[ExperimentsInHonesty]

@sharadgaurav7 @sdimran @jenchuu I gave some rewording to the pms during our weekly meeting. However, I read it all again and here is my revised rewording.

1. Browse and learn about our different CoPs on the bottom of our Home page to find what communities interest you. In your CoP you have access to announcements, helpful resources and networking opportunities.
2. Select which roles you are interested in and input your weekly availability to see all your project matches. Explore the results to see if the skills and other details are a good fit.
3. Onboarding is a mandatory zoom session which all prospective volunteers must register and attend prior to observing project meetings and taking part in a project. (the second sentence can remain the same)
4. Sign in to your account to see all available project opportunities. Contact the project manager via Slack with your Gmail address to get the process started.

Replace: "How many hours are you expected to commit..." with Q: I'm logged in, how come I can't see full project details? A: One you have attended an onboarding, you will be able to see the full role details.

[jenchuu]

@ExperimentsInHonesty @sdimran @sharadgaurav7 Thank you for the feedback.. are you guys thinking getting rid of step 3 asking new volunteers to sign up with an account? I think we should keep that step (since previously we discussed having them sign up will allow their role and availability preferences to be saved).

Below is V4 with edits and step 3 (sign up for an account) still there pending feedback to above:

Also I think volunteer commitment hours may be a good FAQ as it came up in the usability test a few times... Are we ok adding it as the last question in the FAQ section? Example below:

[sdimran]

@jenchuu I think this was finalized and your questions were answered on our call. is there anything outstanding for this or can we pass it over to the developers to start working on?

[kcoronel]

closing this issue as all action items have been completed.