A curious creature.

Fulfillment Monitoring and Alerting

Optimizing and refreshing an existing fulfillment monitoring and alerting application.


📝
Details
Screen: Desktop
Role: Research, Experience Design, Visual, Interactions
Tools: Figma
🚨
Problem
An existing supply chain application faced complaints about usability and clarity of information presented.
💡
Solution
Focus on addressing user experience complaints with minimal disruption to productivity by incrementally migrating the app to the corporate design system, utilizing more viewport space, and implementing better information architecture.

BACKGROUND & RESEARCH

E-commerce orders flow through a complex series of different back-end services depending on how they're fulfilled, what type of order they are, when they're needed, and the geographic area they're ordered in. There are a multitude of different teams involved at different steps and constant status checks are necessary to ensure service uptime. This application was borne from a need to better monitor e-commerce orders throughout their lifecycle considering the impact to revenue. Alerting on statuses and errors through the different fulfillment phases was later added.

The previous product designer left the team, and I was swapped in. The users, upon hearing a new designer had taken over work on the application, were eager to express their concerns in interviews I conducted. This group represented a varied mix across different functions, so care was taken in balancing their requests. Some common themes I found were: a lack of information hierarchy, an abundance of horizontal "squish," overwhelming and irrelevant information, and inconsistent usage of terminology and color.

SKETCHES & WIREFRAMES

I worked on updating different areas of this application throughout my year and a half on the team, in-between work on new feature requests. Only a few examples are represented here, but they are:

  • Alert Configuration overview
    This screen manages the alerts that teams received when certain criteria were met. There was a need to have more information visible on the overview screen, since viewing the details of a specific alert required edit permissions that not every user had. I worked with users to determine the necessary additions, updated the visual display of the table to conform with the design system, and added search, filtering, and pagination.
  • Order Detail
    This screen displays all relevant information for a single order. Users didn't understand why the top of the page scrolled horizontally, nor could they quickly scan to find what they were looking for. Additionally, some orders have nearly a hundred line items and the existing screen displayed them all at the same time. I added structure to the top of the page based on user feedback, extended the table to utilize more vertical space, and added pagination. This was important to help users navigate a potentially overwhelming amount of data presented.
  • Order Search
    This feature searches through all orders in the last 60 days, but it was limited to searching by order ID number for an exact match. I advocated for my team to implement an expanded search function that allowed for more search criteria and partial matches. Pursuant to this, I designed a more advanced search function where users could build a simple or complex search based on whatever information they had. This came directly from user feedback that they needed to "stack" searches.

My team received several tokens of appreciation at implementing this work. The application was known to be potentially powerful, but had been limited by some old design choices.