Undisclosed Company

  • INDUSTRY
    Oil & Gas
  • PROJECT
    Website Application
  • TOOLS
    Adobe XD, Photoshop, Illustrator, UsabilityHub.com, Bloomreach
  • ROLE
    UX/UI Design Lead
  • Team

    Project Manager, Project Owner, Scrum Master, Change Management, Business Analysts, Architecture, Design, Development, Quality Assurance

    Our team was designated to build an application that enabled a 360° view of the customer for internal users. External users are able to enroll as new customers, place orders, access order related documents and manage users.

Company Selector

  • PROBLEM SUMMARY
    • Users are unable to select multiple companies.
    • After selection, users are unable to identify and confirm that a selection has been applied.
  • VALUE

    Customers are able to see and analyze data for multiple companies in a single view. Internal users are also able to utilize this feature. Their access level allows them to see all of the companies with whom we do business, increasing the value because they are able to analyze data between different companies as well.

Ultraflo - Single Product
click to enlarge
Process

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.

Solution

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.

    Let's chat.

    © 2007-2023 JxnGraphix