search

woocommerce / google-listings-and-ads

Sync your store with Google to list products for free, run paid ads, and track performance straight from your store dashboard.
https://woo.com/products/google-listings-and-ads/
GNU General Public License v3.0
45 stars 21 forks source link

Onboarding: Consolidation of account creation/connection cards #2509

Open joemcgill opened 1 month ago

joemcgill commented 1 month ago

As part of the Onboarding Improvements project (#2458), we want to consolidate the functionality and UX from three separate cards that are responsible for connecting to a Google account, a Google Ads account, and a Google Merchant Center account, into a new single flow.

Current UI:

image

Proposed flow

There are 4 possible scenarios to account for:

image
  1. Merchant doesn’t have Merchant Center accounts nor Google Ads accounts.
  2. Merchant has one or more Merchant Center account but not an Google Ads account.
  3. Merchant has one or more Merchant Center and Google Ads accounts.
  4. Merchant doesn’t have Merchant Center accounts but has one or more Google Ads accounts.

Design Overview

Design mocks are being iterated on in this Figma file.

The new combined Google account connection card will begin by asking the user to accept terms & conditions for Google MC and Google Ads before starting the connection process.

Image

Once checked, the Connect button will be enabled, allowing the user to begin by setting up their Google account and enter the current OAuth flow.

Image

Once all of the necessary permissions are granted, the Google combo card will see if any Ads or MC accounts already exist for that Google account.

If no accounts exist, they will automatically be created to start to onboarding process.

Image

If the Google account already has existing Ads or MC accounts, a new combo view will allow the user to select which accounts to connect, along with some recommendations based on info we can infer from the account status. See an example of choosing an MC account in the following screenshot.

Image

Technical Design

This feature will be worked on over multiple sub-tasks, which should be branched from feature/2458-streamline-onboarding until that feature is merged and will be consolidated in the feature/2458-consolidate-google-account-cards branch.

The task list below is in progress.

### Tasks
- [ ] https://github.com/woocommerce/google-listings-and-ads/issues/2565
- [ ] https://github.com/woocommerce/google-listings-and-ads/issues/2566
- [ ] https://github.com/woocommerce/google-listings-and-ads/issues/2567
- [ ] https://github.com/woocommerce/google-listings-and-ads/issues/2582
- [ ] https://github.com/woocommerce/google-listings-and-ads/issues/2592
- [ ] https://github.com/woocommerce/google-listings-and-ads/issues/2593
- [ ] https://github.com/woocommerce/google-listings-and-ads/issues/2596
- [ ] https://github.com/woocommerce/google-listings-and-ads/issues/2597
- [ ] https://github.com/woocommerce/google-listings-and-ads/issues/2603
- [ ] https://github.com/woocommerce/google-listings-and-ads/issues/2604
- [ ] https://github.com/woocommerce/google-listings-and-ads/issues/2605
- [ ] https://github.com/woocommerce/google-listings-and-ads/issues/2606
- [ ] https://github.com/woocommerce/google-listings-and-ads/issues/2607
- [ ] https://github.com/woocommerce/google-listings-and-ads/issues/2602
- [ ] Review classname of section footer `gla-google-mc-account-section`
joemcgill commented 4 weeks ago

Assigning this to @michaeleleder to work on some design mocks for these flows. Once they're ready we can create sub-tasks for any actionable work needed to make these changes.

joemcgill commented 3 days ago

Added a follow-up item to the task list to review the classname of the footer section of the account creation page, per this conversation.