Undisclosed Company

This component was initially named “sold-to picker”. It allowed users with multiple sold-tos to select which sold-to they wanted to view and then proceed to access its associated data. Sold-to is a term used internally because our customers have companies that they “sell-to”. Because content also varies between the business units that are associated with each sold-to, this component is also useful on content pages. If a user purchases one product from Business Unit A and another from Business Unit B, they can toggle between the data and content associated with each product.

First, I defined the requirements: visible sold-to name, visible sold-to number and global accessibility. Next, I added additional features for ease of use: ability to search by name, search by number and search with autocomplete capabilities. The mockups went through several iterations and were tested for usability. The data revealed that users were not familiar with the function and several users provided feedback that the icon was unrecognizable and it didn’t relate to the sold-to function.

After the first release, I reevaluated the functionality to allow users to select multiple sold-tos. The requirements were similar to the single sold-to selection. I also wanted to improve on the components identity. I accomplished this by renaming the component to the “company selector”, visible as a tooltip when users hovered over the icon. Because customers were unfamiliar with the language of “sold-to picker”, the new name was more in line with the user’s objective. I also changed the icon to a “C” for better representation.

The functionality was also updated. This included swapping the radio buttons for check boxes to allow multiple selections. To increase visibility after a selection was made, the selection was displayed above the company list. This adjustment allowed users to deselect items quickly. The active selections were also listed in their original location, preventing any awkward jumping in the UI when a selection was made, this also provided an additional point of reference for the user’s active selection. An indicator was also added to the icon, allowing users to identify that their selection was applied while displaying the number of active selections.

Variation tests were created featuring both the old and new version of the component. The tests revealed that the updated component was easier to identify, met the multi-selection criteria and provided better ease of use.