Web: Create Seamless Onboarding Experience - Contributor

[PixelantDesign]

Core Team Member Task

User Story

As a Gitcoin Contributor (developer), I want to be introduced to Gitcoin via a seamless onboarding flow.

Description

Type: Feature

Summary:

• Stitch together Avatar Builder #813 and Build Onboarding Flow #441
• Style attached screen: Contributor Matches.png
• Match headers across all screens (#813 and #441).
• Include auto populate from profile, auto complete, and save skillset to profile.
• From the settings/matching page... the '(pull from github)' option could be added to the /onboard page
• Set up the experience so that the following users experience this flow:
  1) New Users to Gitcoin coming in from the landing page or from slack.
  2) Existing users that click to login via profile link (have not connected Github or completed a bounty).
  Note: There will be a separate experience and flow for the funder.

Additional Information

Reviewers

@PixelantDesign @owocki @mbeacom

[owocki]

would it be worth adding "from the settings/matching page... the '(pull from github)' option could be added to the /onboard page "

other than that.. lgtm

[thelostone-mc]

@PixelantDesign could you shed some light on :

Style attached screen: Contributor Matches.png

Is this the green banner ?

Match headers across all screens

Once the avatar is embedded into it -> it would by default use the same headers

Include auto populate from profile, auto complete, and save skillset to profile.

Got the auto-populate bit working ! Need to figure out the save API as the POST -> /keywords doesn't seem to be working. @mbeacom will help me once he's schedule frees up

Will figure out the when the user sees what (once I clear up the others )

Sound good ?

[PixelantDesign]

Yes! This replaces green banner! @thelostone-mc

[PixelantDesign]

@thelostone-mc The only things outstanding are coding up the email and adding in the avatar builder?

[thelostone-mc]

and the API for keywords population!
I'll bug @mbeacom for that when I start wiring up the avatar

[PixelantDesign]

wohooo!!!!