google-listings-and-ads
google-listings-and-ads copied to clipboard
Onboarding: Consolidation of account creation/connection cards
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:
Proposed flow
There are 4 possible scenarios to account for:
- Merchant doesn’t have Merchant Center accounts nor Google Ads accounts.
- Merchant has one or more Merchant Center account but not an Google Ads account.
- Merchant has one or more Merchant Center and Google Ads accounts.
- 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.
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.
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.
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.
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`
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.
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.
Closing this as completed since it was part of the 2.9 release.