Tools for managing orders that drop ship (ship from the vendor instead of from our warehouses).
Business impact
The information and actions needed to fulfill a drop shipment order are found in multiple tools, one of which is a legacy system that is difficult to use and difficult to maintain.
The team needs to be able to view information and perform all of their tasks in a single, modernized tool.
Design goal
Build out a single tool to aggregate all of the information needed to manage and track items that drop ship. Information about purchase orders that is not relevant to the drop shipment team, such as items that are shipping from our warehouse stock, is not shown but can be accessed from the tool if needed.
User benefits
- Stop task switching
- Accessibility improvements
- Responsive design for larger monitors
- Micro front-ends that can be displayed in context
User challenges and design solutions
Large amount of data
Dense, nested tables allow each user to drill down to the level of data they need at that moment.
Edits are made within popovers so users can see the full context of their workload.
Dense tables with expandable rows reduces the need to switch between apps to track all aspects of a purchase order.
Users are responsible for managing a subset of vendors
Toggle between default saved filters and custom filters when users are covering another coworker's set of vendors.
Sending emails to vendors
A micro front-end for vendor communication automatically populates emails with relevant info and ensures consistent communication to vendors from other teams, such as Customer Service.
Managing ever-changing vendor info
A history log of changes alerts users when vendor information has been updated, such as when a vendor contact is on vacation or there are supply chain delays.
The Vendor Settings history log shows what changes have been made by which user, when, and in what section.
Design journey
Understanding user workflows
Interviewed users about their challenges using each existing app and their typical workflows.
Asked users to record their screen while using the current tools to understand the complexity of the data and the scope of screen switching required to complete tasks.
User screen recording of the existing Drop Shipment tool
Aligned with design system
Applied the company design system for consistency with other tools this team uses. Reduced development time by using existing components. Improved accessibility metrics, such as click target size, minimum font size, and button label contrast.
The same tool shown in the previous example using the company design system
Integrated needs from two user groups
Found common ground between the needs of two sets of users that will be accessing the same micro front-end from their respective workflows. The design provides information that's relevant to each group's tasks while not displaying information that will confuse the other user group.
Customer Service reps need to reference a customer's Order Number and Case Number when emailing vendors
Vendor Specialists need to reference Purchase Orders when emailing vendors