When users count inventory, most use a barcode scanner we provide them. The most efficient method for scanning is to use what we call a scansheet, which is a letter-sized sheet of barcodes taped near a rack or bin. In order to help our customers count inventory even more efficiently, we needed to update the interface for generating a scansheet to be more usable and flexible. The most critical problem is users were unable to save existing scansheets and instead had to remake them from scratch every month!

We updated the interface to enable users to save and edit as many scansheet files as they needed, added more functionality such as renaming, duplicating, and bulk actions, and made the controls more obvious through the updated visual design (such as a previously undiscoverable drag and drop feature, which is helpful for users to organize items in the order of how items are physically arranged on racks or shelves. Many users (and many of us!) didn't know about this.)

The redesign was released in July 2015 and then updated with enhancements, such as sorting, a couple months later. Here are a few comments:

  • "It will be nice to have the sheet always available and be able to change it, and not have to redo it every time something changes."
  • "It's exactly what the program needed. Having to rewrite the sheets was pretty painful, but this solves all of the problems!"
  • After a user test, when asked when they'd like to switch over to the beta: "Immediately, I can't wait to get started with it."

Scansheet example:

generated pdf to print

This is a walkthrough of the existing interface customers used to create this file:


Key problems:

Inability to save
There was no way to save a scansheet to reuse. Month after month, users would have to, for example, create a scansheet for Room 1, print it, clear out all those items, then create another one for Room 2, and so on. This is a huge waste of time for users.
Helpful features are undiscoverable
A drag and drop feature enables users to organize items the item order on the scansheet to match how items are physically arranged on racks or shelves. Many users (and many of us!) didn't know about this.
Limited functionality
There are few bulk actions and no undo. From our research we observed restaurants use these differently according to their set-up.  We wanted to extend the UI to accommodate the various ways restaurants need to use this feature.

Redesign

In the redesign, the most valuable change we made was to enable users to save multiple scansheet files, so that they can update files as needed rather than doing the unnecessary work of creating them from scratch every month.  We also added...

  • Ability to rename, copy, and delete scansheet files.
  • Arrow icons on the line items, hover state, and clear dragging mode communicate the drag and drop interactivity.
  • "Save and Add Another" for adding individual items makes the adding process quicker.
  • Visual feedback to communicate their work is saved as they go.
  • Ability to undo actions.
  • Bulk actions to manage many items in one go.
  • Alert status when an item quantity is at 0.
  • Instructions!

Here is a walkthrough of the redesign:


Design and development

wireframe - a scansheet

 

wireframe for what will be called the "Manage Scansheets" page

 

wireframe for what will be called the "Manage Scansheets" page

 

"Manage Scansheets" zero data state Drag and drop to manually order "Save and add another" immediately opens a new line    Delete a single item Delete items with a bulk action Add items in bulk from a folder

During user testing, we learned that users desired a "sort" function which we previously considered and decided was unnecessary since we thought users would manually order this according to their physical setup. However we learned was desirable for many users for the system to handle the heavy lifting to get the ordering mostly there, then the user can manually tweak it as necessary. We learned this close to the release date, so we decided to release it as planned, and we added sort functionality in a later release.

Sort alternatives:

Sorting design

Sorting design pass (unused)

Sorting design pass (unused)