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: Move FAQs below the CTA button #2488

Open joemcgill opened 1 month ago

joemcgill commented 1 month ago

Part of https://github.com/woocommerce/google-listings-and-ads/issues/2458

Image

In order to streamline the actions a user needs to take during onboarding, we will move the FAQ section at the bottom of the first step of the onboarding flow to the bottom of the page, below the CTA button, so the CTA button is easier to locate.

Acceptance Criteria

Implementation Brief

There are multiple places where FAQs exist inside of a StepContent component. For consistency, we will update all of them:

For each of these, either move the Faqs into the StepContentFooter component below the CTA button(s) and update the styling, or rename the StepContentFooter component to StepContentActions throughout the application and move the FAQs below, where applicable.

Test Coverage

  1. E2E tests may need to be updated if selectors used in tests are no longer accurate.
eason9487 commented 1 month ago
  1. Do we care that the StepContentFooter component is not at the bottom of the StepContent or does the FAQ need be made a part of the StepContentFooter?

It does seem a little off in the literal meaning so it would be a bit more appropriate to rename the StepContentFooter component.

Regarding the Implementation Brief, just in case it's missing, I'd like to add that there's also a FAQ for the last step and Ads Onboarding. (See #2382)

image

mikkamp commented 1 month ago

I'd like to add that there's also a FAQ for the last step and Ads Onboarding

If we are going to align this in all locations then there are also 2 FAQ sections when going through the Ads onboarding (step 1 + 2). To get their you can skip campaign creation during initial onboarding, and then later going to create the first campaign from the dashboard. I think it would provide better consistency if we'd change it for all occurrences.

joemcgill commented 1 month ago

Thanks @eason9487 and @mikkamp. I had also noticed that we were planning on moving the FAQs below the CTA buttons for #2459. Expanding the scope of this issue to handle all of these consistently makes a lot of sense to me rather than having individual issues for each place in the UI where we want to make this change.

Here are the places I've identified, let me know if I've missed any:

There are 8 places in the codebase where the StepContentFooter component is being used, and always to include one or more AppButton components at the end of a StepContent component. I'd suggest that we move these FAQs into the relevant StepContentFooter component and make sure the styles are updated accordingly. We will probably want to wrap the AppButtons in some sort of container but I'm sure we can sort that during implementation unless you have any immediate suggestions.

eason9487 commented 1 month ago

I'd suggest that we move these FAQs into the relevant StepContentFooter component and make sure the styles are updated accordingly. We will probably want to wrap the AppButtons in some sort of container but I'm sure we can sort that during implementation unless you have any immediate suggestions.

I don't think it necessarily needs a container component with a footer suffix, so renaming it would have better flexibility, but this option works for me as well.

joemcgill commented 1 month ago

I don't think it necessarily needs a container component with a footer suffix

Probably true. We could rename this component to something like StepContentActions but I was hoping to avoid refactoring all places where this component is used and just make the component more flexible so that it can contain more than just the CTA buttons for a form. Let's try to avoid the need to rename everything, but use this as a fallback if moving the FAQs into the StepContentFooter ends up being problematic.