Design System
The application framework was built on Material Design + React. I created the design system to utilize Material Components that were then customized to align with the company’s branding guidelines. Wireframes, mockups and prototypes were completed with Adobe XD.
Custom components that were specific to application needs were also created:
- Company Selector (Sold-to Picker)
- Expand/Collapse Order Row
- Expand/Collapse Order Card
- Product Cards
Research
Design thinking exercises like empathy mapping, how might we and card sorting were used to evaluate user needs and discover new opportunities. I conducted over 100 user interviews and (aggregated, consolidated and extracted) dialogue to create empathy maps and provide useful solutions for how might we exercises.
Because each product has a specific makeup and is utilized in specific applications, I needed to ensure that all of the relevant data was displayed and easy to access. Each business unit underwent card sorting exercises to determine which product related data would be displayed and what needed to be updated and/or removed.
I also assisted BAs with data mapping exercises that would ensure any old references to the data were updated in the new system. This gave BUs an opportunity to clean house and get rid of any outdated data that was no longer used.
Analysis
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.
Design
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.
Testing
The component’s usability was tested via UsabilityHub.com with unmoderated testing. 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.