Tech Foundations: Add the design picker in the onboarding flow

[autumnfjeld]

Blogger Experience Pod: tech foundations for the blogger onboarding flow

Details

In preparation for the blogger onboarding flow we want to prototype a flow that includes the design picker. This work will focus on flows and mechanics, not design. From Ollie: Would be good to get the devs to try inject this into the flow. I haven't got a FINAL design for how categories will look, but that won't take too long.

Team Luna has already done work on this (p9Jlb4-26o-p2), so a first step should be to explore their work (see "Related" below)

• While this issue does not include integration with the intent screen foundation issue, it would be good to consider if there would be conflicts or issues with both intent screen and design picker in a flow
• Categories will be added (not design ready) but some mock ups
• Report any issues or potential blockers if found
• Share prototype links with pod pdgK6S-7f-p2

Checklist

• Introduce a WIP /start/setup-site flow that will appear after checkout #55741
• Add skip button to the site-setup flow's design picker step #55783
• Add feature flag that directs users to site-setup flow after checkout/free-plan selection #55784
• The site-setup flow's design step runs headstart on the selected site #55782
• Design Picker: Increase size of thumbnails in design-setup-site step #56128
• Change ReskinnedProcessingScreen for setup-site flow #56125
• design-setup-site step only shows designs that match the theme annotations #56233
• Run headstart after design-setup-site step #56235

Maybe after sharing a prototype:

• Tests
• Cleanup end-to-end tests for the with-design-picker flow see signup flows discussion Remove unused signup flow code #56264
• Add relevant new tests
• Add large preview of selected theme, accessed by clicking thumbnail
• Multi-device preview of selected theme
• Theme category filter
• Should we set the was_created_with_blank_canvas_design blog option so that the patterns panel opens the first time by default?
• Document in a FG page (look to see if there is already a relevant FG on onboarding flows

Related

https://github.com/Automattic/wp-calypso/milestone/348
#52319
Design picking after onboarding p9Jlb4-26o-p2
Blogger Experience Goals: p9Jlb4-2Sr-p2
Preliminary design explorations: p9Jlb4-2U7-p2
Design picker a/b test results: pd2I8q-4K-p2

[arthur791004]

I'm confused about what's the main difference from p9Jlb4-26o-p2 except for the intent screen and a new design picker layout.

So the main difference I saw is that the design picker added in p9Jlb4-26o-p2 shows before checkout and the design picker added in this one should show after checkout, right?

Related

• Add design step to /start onboarding #51230
• Add "with-design-picker" onboarding flow #51501

[arthur791004]

Reply to me: pd2I8q-4K-p2 explains the result of showing the design picker before checkout and why we need to show it after checkout.

[autumnfjeld]

I went through the prototype flow https://wordpress.com/start?flags=signup/setup-site-after-checkout and noticed the "Update your homepage" is checked as complete, even though I didn't yet edit the homepage. Perhaps the design picker step triggers that item in the site setup checklist?

[p-jackson]

noticed the "Update your homepage" is checked as complete, even though I didn't yet edit the homepage. Perhaps the design picker step triggers that item in the site setup checklist?

I bet it does! I think there's supposed to be some code that ensures homepage edits that come from headstart are ignored. I'll see if it's easy to make it work in our case too.

[autumnfjeld]

Just looping back about filtering (per our Ganon sync yesterday). Using the guidelines provided by @ianstewart

• using only themes with editable home pages
• one approach is to use these with auto-loading tag

Thus, we'd have about 30 themes to show in our initial launch of the design picker in onboarding.

[p-jackson]

Posted about prototype with request for feedback on which themes/designs should appear pdgK6S-7f-p2

[p-jackson]

The tech foundations/prototype is out. Umbrella issue for feedback #56306.

🌂