Stepper: Travis' onboarding flow test feedback

[travisw]

Hi folks! I just created this card for the differences I noticed when testing the Stepper onboarding flow and comparing it to the existing Classic onboarding flow. Let me know if I should report this in a different way.

---

---

I ran through the Stepper onboarding flow and did a side by side comparison with the classic onboarding flow. Below are the differences I noticed for the first round, not just Tracks related. All of them probably aren't crucial to fix, but some are. For cases where there are different events or props that we plan to move forward with if/when deploying, then it's probably worth calling this out in a p2 post somewhere and letting anyone know who has created funnels with the deprecated events/props.

I didn't note differences where the Stepper flow fires events that the Classic flow doesn't since that shouldn't affect any existing funnels or data transformations. In general, some events for a single step or action are being fired in a different order then in Classic and in most cases I didn't call these differences out either (except one case). We might want to revisit this though as it has the potential to affect existing funnels.

Since the experiment will be running for non-en locales I tested using the Spanish versions of the flows

Starting points

• Stepper: https://wordpress.com/setup/onboarding/es/?ref=travistest
• Classic: https://wordpress.com/start/onboarding/es/?ref=travistest

The most critical differences I noticed (mostly not Tracks-related) are:

• 🛑 After the plans screen I land on /sites instead of checkout! 🛑
• Domains results screen looks different. Slightly different text and "Oferta" sticker shows (doesn't in Classic) and overlaps the domain results. Screenshots below.
• Plans screen looks difference. Shows free as another tab instead of text call out. Screenshots below.
• calypso_signup_complete not fired

Below are my notes with the differences I noticed so far.

---

• User step

  • calypso_signup_step_start fires before calypso_signup_start - never heard back from other PR

• Enter email: travis.a8c.testing+2024-signup-tester-stepper1@gmail.com

• Continue

  • calypso_signup_actions_submit_step uses step: user while classic uses step: user-social. I think Classic is wrong in this case - also reported in this thread... Still, might break existing funnels so we should let folks know.
  • calypso_signup_actions_complete_step not fired, which is in Classic.

• Domains step

• Enter email in domain search

  • Domain results screen looks different then classic
    • Slightly different text
    • "Oferta" sticker shows (doesn't in Classic) and overlaps the domains

• Choose free domain

• Click "Continue"

  • calypso_signup_actions_submit_step {step: domains} missing some props that exist in Classic (no idea what they're used for). domain_item, signup_domain_origin, site_url, and last_domain_searched

• Plans page

  • Plans screen looks difference - shows free as another tab instead of text call out.

  • calypso_page_view is missing the flow: onboarding prop (never noticed this before being included in Classic)

• Choose Personal plan

  • Sent to https://wordpress.com/sites instead of checkout.
  • Missing props in calypso_signup_plan_select (product_slug: personal-bundle, from_section: default)
  • calypso_signup_actions_submit_step {step: plans}
    • Maybe unnecessary props - (step_name: plans duplicate of step?)
    • Different prop value in calypso_signup_actions_submit_step {step: plans} - (cart_items: [object Object] instead of cart_items: 0:[object Object])
    • Same event fired twice.
  • calypso_signup_processing_screen_show not fired - it is used in some funnels
  • calypso_signup_complete not fired
  • calypso_new_user_site_creation not fired

I stopped here since I was no longer in the flow.

---

cc @skim1220 @MicBosi

[travisw]

Plans screen looks difference - shows free as another tab instead of text call out.

Running through it again and now I see them matching. The Classic flow also shows the free plan as a tab and not a text call out. Maybe there's an experiment running?

[travisw]

After the plans screen I land on /sites instead of checkout!

Wow - after testing the same path again, I was appropriately sent to the checkout. So weird!!!

I didn't take that long to go through the flow the first time, but is there maybe some kind of time limit after which it forgets where it was?

[escapemanuele]

Thanks @travisw, I'll try to go through it all!

Used travis.a8c.testing2024-signup-tester-stepper1gmail.com in domains for testing. ES

Domains

• I couldn't find copy discrepancies.
• Oferta, looks bad in both /start and Stepper. Should come out if you choose a paid domain

• I cannot seem to find the additional items in /start for calypso_signup_actions_submit_step. To be checked

Plans

• Plans screen looks difference - shows free as another tab instead of text call out.: The difference happen when you choose a free domain or a custom one.

• Sent to https://wordpress.com/sites instead of checkout. this is bad, but I couldn't reproduce it. Needs more testing.

Tracking

Travis reported a few differences, can this be something you know about @chriskmnds ?

cc @renancarvalho

[chriskmnds]

The following GH issues were created on Tracks related things:

• https://github.com/Automattic/wp-calypso/issues/94414
• https://github.com/Automattic/wp-calypso/issues/94415
• https://github.com/Automattic/wp-calypso/issues/94416
• https://github.com/Automattic/wp-calypso/issues/94417
• https://github.com/Automattic/wp-calypso/issues/94418
• https://github.com/Automattic/wp-calypso/issues/94419
• https://github.com/Automattic/wp-calypso/issues/94420
• https://github.com/Automattic/wp-calypso/issues/94421
• https://github.com/Automattic/wp-calypso/issues/94422
• https://github.com/Automattic/wp-calypso/issues/94423

@escapemanuele can you review as well and just relentlessly create issues from it?

[escapemanuele]

Opened these issues for now, while I can confirm with @travisw which ones are issues and which ones are not.

• https://github.com/Automattic/wp-calypso/issues/94426
• https://github.com/Automattic/wp-calypso/issues/94427 (This will be fixed by https://github.com/Automattic/wp-calypso/pull/94319)

[renancarvalho]

I conducted an investigation into the issue where the "Oferta" badge overlaps with the domain name.

The main cause of this overlap is a CSS rule that prevents domain titles (in this case, domain names) from breaking into multiple lines. This rule is intended to maintain readability, ensuring the full address appears on a single line, such as travis.a8c.testing+2024-signup-tester-stepper1@gmail.com, rather than splitting it into something like this:

rvis.a8c.testing+2024
-signup-tester-stepper1@gmail.com

However, this issue is more pronounced on mobile devices or smaller screens. I believe it’s crucial to consult with designers on this matter. In my opinion, resolving this is essential.

What do you think, @escapemanuele?