Experimental Design: Combo box for selecting a representative

[oddball-lindsay]

What

Give a brief description of the component or pattern you want to propose.

The Accredited Representation Management team is interested in using the combo box that the Content Classification Team is exploring (their ticket is #2788).

Purpose

What problem does this component or pattern solve for the user?

In our Appoint a Representative product, the user must first select which representative they would like to appoint.

We would like to give the user a lean version of searching and selecting, by using this combo-box concept. The alternative would be a more developed search experience at an early step of the form experience, but we are hoping to avoid that and keep each step in the form experience as simple as possible.

Usage

Context or task: Explain the scenario or user tasks where this component is, or could be, used.

The user will search for a representative, then select the best match from the suggested search results. After the user selects their representative, they continue on to complete the online form fill experience.

Behavior

Describe the key interactions for this component, calling out any specific considerations for mobile.

When the users starts typing, after the first character, a dropdown list appears below with a certain number of suggestions (maximum TBD). We already have some name-matching logic on our Find a Representative product that we may be able to use for the dropdown list of suggestions.

After a suggestion is selected, we confirm the selection and the user is free to continue to the next step.

Examples

Include any examples you have of this component or pattern. These can be screenshots, links to a Sketch file, or links to staging or production.

Here is our prototype

Accessibility

Include any accessibility considerations.

We are leaning on the Content Classification's accessibility considerations -- we are both working with the same CAIA accessibility partner.

Guidance

What would you want to tell other teams about this component or pattern?

Use this component when you require a text input field with autosuggestions.

Research (optional)

Include any research you have already conducted, or plan to conduct, on this component or pattern.

We have explored this research in two studies and have not received any significant pain points. We plan to test this with an additional study coming up in June.

Findings from past studies:

1. Authenticated Appoint a Representative Form User Test, 01/2024
2. Appoint a Representative Form User Test (Unauthenticated), 02/2024

Code (optional)

Include any existing code.

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #platform-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

If your request is approved, you can add your component or pattern to the system. If you have any questions on how to add your component or pattern to the system, please reach out to the Design System Team at #platform-design-system.

[caw310]

@oddball-lindsay This is on the agenda for the DSC meeting on June 6 at 11:05AM ET. I will add you to the invite.