Introduction

CMAA (The Cocoa Merchants' Association of America, Inc.), has been a client of Interactive Labs for a long time. Our team has worked with CMAA to build their public website and administration/membership web app. In phase 3 of the website development, I am tasked with enhancing the usability and efficiency of CMAA's warehouse inspection feature, which is the most complex feature in their operations.

Services delivered

📐 Wireframing

🎨 Working with Visual Designer

👩‍💻 QA & developer support

Identifying issues

The warehouse inspection flow facilitates collaboration between inspectors and warehouse companies. Inspectors use this flow to schedule inspections and upload reports, while warehouse companies use it to view the reports and follow up on any necessary corrective actions.

While reviewing the flow, I noticed a couple of usability issues. The most critical ones are:

1. The use of a modal window for inspectors to upload and edit inspection reports, which consists of a long, sequenced flow with five steps. This approach reduces the available space for viewing and interacting with content and can lead to errors, as the user may accidentally click out of the modal and unintentionally exit the flow.
2. The edit inspection report flow contains redundant functionalities, coupled with an incorrect call-to-action visual hierarchy. This creates a risk of distracting users from the desired action and creating unnecessary visual clutter.
3. There is a lack of system feedback to inform users about completed actions. Overall, in any action that user takes, there isn't any form of feedback (confirmation modals or snackbars…) to let users know that the action is successful and complete.

I used a Google Spreadsheet to sort all the issues. Normally, we document issues with screenshots and notes, but I found that this format allows me to discuss the criticality and effort needed to fix each issue with our PM and developers and prioritize which problems to work on within the limited time we have.

Making small changes that add up to a better whole

Our challenge is that we have a limited timeline and cannot change much of the structure or the flow of this features. Therefore, I identified areas where we can improve efficiency and ease of use with affordable UI changes.

Here are the key changes that I made to the modal design, which include small improvements that collectively increase its efficiency and ease of use:

• Since we had to retain the modal motif, I maximized the modal's height thereby giving users more space to interact with content.