Dropdown option for creating new item + for instructions

[pamelahu]

Right now, when a user is trying to configure their phone number to a service, they can only choose from the list of existing services they've created. There is no indication/direction on how to make a new service from this page:

Twilio.org is creating a new product called USSD. It's similar to SMS but users will dial in, for example, *123#, and receive a multiple choice survey. This might look like "Welcome to Red Cross! What do you need help with? 1: Transportation, 2: Food, 3: Shelter" And the user will press 1. And continue to the next question.

When users are trying to configure their USSD code (*123#), we want to direct them to creating a service because chances are 1. they won't have any, 2. they won't have a USSD-specific service (with USSD commands; voice or messaging services will NOT work with a USSD code)

This is a rough idea of what was in mind:

• There's a link to a new tab for creating a service:

• Once the service is created, users go back to the configuration > service drop down and can find their new service
• There's a message around choosing a USSD-specific service as a pre-caution because we have no way of filtering out only the USSD services on behalf of the user; if they choose a non-USSD-specific service then their configuration will fail

This isn't the most elegant solution so wanted to get y'alls inputs on how to proceed: if a new pattern/component should be established, if an alternate component should be used, etc.

Figma mocks & flow for buying + configuring a USSD code (based off the Phone Numbers pattern): https://www.figma.com/file/etG24f4I24NFPktkFFURv3/%F0%9F%9F%A2-USSD-Prototype?node-id=166%3A171160

[gloriliale]

Hi @pamelahu! I've asked the team for some input on this; we'll get back to you soon with any recommendations we may have. edit: we'll discuss our thoughts in Office Hours this week! Thanks for posting!

[nkrantz]

update: this wasn't brought to Office Hours due to a scheduling conflict, so we'll discuss async here. stay tuned for a response!

[pamelahu]

Hi, curious if there are any updates here?

[serifluous]

Hey @pamelahu, sorry for the delay! Agreed that linking out of a combobox option isn't the most elegant.

We mocked up a few options here: https://www.figma.com/file/SpeLpBoqN2vZv8KWcSn0J1/Paste-Feedback?node-id=1827%3A314618 including:

1. Using Help Text under the form field to link off to creating a service.
2. Using body copy or a Callout above the row of fields, depending on how prominent you think the info needs to be.
3. Using an icon + popover (not super recommended since it's hiding the information, and it seems important enough to surface to the customer ).

Let us know if you have anymore questions, and let us know if this sparks any other ideas!

[shleewhite]

Hey @pamelahu - is there anything else we can help with?

[pamelahu]

Hey, sorry for the belated reply - I really appreciate the ideas!!! I'm going to try them out and let you know if I think of something else! I'm curious, in general, how we should be handling drop downs that have no input values (yet)... do we disable the dropdown?