Wp-calypso: Gutenboarding: "more domains" modal

Created on 14 Apr 2020  路  17Comments  路  Source: Automattic/wp-calypso

In Gutenboarding, a customer might need more options/space to explore domains. The dropdown is meant to be only a minimal quick way to choose something.

In the dropdown, there's "more options" link:

Screenshot 2020-04-14 at 14 54 00

From that we get this modal:

Screenshot 2020-04-14 at 14 53 30
Screenshot 2020-04-14 at 14 53 35

I have those categories somewhere in spreadsheet, but we'll need to figure out where those should be implemented.

[Goal] New Onboarding [Type] Task

Most helpful comment

Hey all, I updated D42138-code yesterday to pull in all the categories and implement sorting so that Popular and International appear in the top two positions, followed by the others in translated alphabetical order. I can also expose the sequencing data via the API instead of returning them ordered from the server so the client can perform sorting. (I am not sure how well PHP handles localized collations, so we may want to shift that to the client.)

All 17 comments

Might be good to add this behind a feature flag initially so that we can merge unfinished UI work and release it properly in one PR.

I wish this image was a full step in the flow. It's beautiful and much clearer than the popover image

@alshakero it could end up being a step later in the flow, before customer launches their site, or they could have access to it at any point while building their site.

@klimeryk hi! Does anything exist yet for TLD categories like in this design? Lemme also know if I should ping someone else instead. :)

Screenshot 2020-04-15 at 13 02 23

I have a spreadsheet listing categories and TLDs. I suppose this should be in the backend, not in clientside. So we'd just pass a category slug to the API and it would know what to return?

We could store the _list_ of possible categories and their labels in the clientside, but I'm also fine pulling that from an API if you all prefer.

cc @daledupreez, could you help out here? I'd guess our work on verticals (p99Zz8-Ps-p2 and p99Zz8-Wy-p2) could be useful here.

I believe the NUX team owned the verticals, which aren't _quite_ categories in the sense above -- the domain-specific additions to that were only added a few months ago (as @klimeryk pointed out above).

Regardless, that vertical data is _already_ available to you via an API @simison. 馃槃
The current Calypso client code that calls the API is in client/state/data-layer/wpcom/signup/verticals/index.js, while the API is callable via GET https://public-api.wordpress.com/wpcom/v2/verticals (though you can get better results using something more like https://public-api.wordpress.com/wpcom/v2/verticals?search=coffee 馃榿!)

We might need to lean on some of the team that was previously working on signup to know exactly how the API can be leveraged, especially if we're aiming for true categories rather than a mostly flat list of verticals.

@daledupreez @klimeryk yes, we're familiar with verticals. In the gutenboarding flow you can see them in action at the first input:

Screenshot 2020-04-16 at 22 12 14

The TLD categories are fixed list "category name => list of TLDs" (where same TLD can appear in multiple category):

Screenshot 2020-04-16 at 22 15 56

Sorry, @simison! I wasn't aware of this additional spreadsheet! I know the content for the vertical data is also managed via spreadsheet, so I assumed (incorrectly) that's what you were referring to.

We're definitely going to need this data on the back end in some way to drive the suggestions in the directions that it seems you want them to go, as we need the explicit list of permitted TLDs when making calls to our external domain suggestions API. :-/ TBH, the only thing we need on the front end is the list of categories that can be selected, and we'd then want to run a new search with that category selected to query for a more specific set of suggestions.

As a side note, did you work with anyone from Cobalt on the category assignments? Could I share that data with the team to make sure we're not missing any TLDs that might be appropriate? I ask because we literally went through a similar exercise a few months ago to support verticals!

As a side note, did you work with anyone from Cobalt on the category assignments?

Yes, I believe it came from Cobalt. Myself I got it from @joanrho. I'll send you a link via Slack! :-)

@yansern can you help me list remaining follow-up tasks in the description of this issue? Thanks!

Hey all, please take a look at my basic prototype support for this on the back end in D42138-code.

A key question we need to answer ASAP is whether we need some way to link verticals to categories, or some other way of reducing the number of categories we display, as the data we have includes 18 categories, which is way more than we ever ought to show a user.

@dubielzyk a couple questions:

  • I'm assuming "view all" is just 10 TLDs that domains API returns/suggests by default?
  • Should we include "Popular" category, and what should be the mechanics from there? We could pull numbers and literally put in top 10 TLDs in there.
  • How should the list look like visually considering in the spreadsheet we have 18 categories and in the Figma there are 9 + "view all"?
  • How should the category hover state look like?

All the 18 categories:

Arts & Creative
Business
Community
Education
Fashion & Beauty
Financial
Food and Beverage
Generic/Personal
Health & Wellness
International
Marketing & Media
Professional
Entertainment
Real Estate & Home
Shopping & Commerce
Sports & Recreation
Technology
Travel & Transit

I'm assuming "view all" is just 10 TLDs that domains API returns/suggests by default?

Yep

Should we include "Popular" category, and what should be the mechanics from there? We could pull numbers and literally put in top 10 TLDs in there.

Yeah, that was the idea :)

How should the list look like visually considering in the spreadsheet we have 18 categories and in the Figma there are 9 + "view all"?

I've updated the mocks. We should just list them all. I'm putting _Internaltional_ after Popular.

How should the category hover state look like?

Let's do an underline

I've updated the mocks. We should just list them all. I'm putting Internaltional after Popular.

Thanks! All clear now.

image

Hey all, I updated D42138-code yesterday to pull in all the categories and implement sorting so that Popular and International appear in the top two positions, followed by the others in translated alphabetical order. I can also expose the sequencing data via the API instead of returning them ordered from the server so the client can perform sorting. (I am not sure how well PHP handles localized collations, so we may want to shift that to the client.)

@dubielzyk, quick question for you: is the "Popular" category just meant to be the standard domain search? Or is it meant to be something different? I realized this morning that the normal domain search is effectively equivalent to the suggestions we're already delivering, so wanted to confirm.

I think the original goal was to have it the most popular domain purchases. If that's what it is today?

Was this page helpful?
0 / 5 - 0 ratings