Skip to Content

BinWise Part 3 (Scansheet Redesign)

BinWise Product Design series

Part 1: User Research, Personas, and Pattern Library
Part 2: Inventory Redesign
Part 3: Scansheet Redesign
Part 4: Aspirational Designs

In Parts 1 and 2 of this series, I discussed the work I’ve done to move BinWise to a more human-centered development process and how that was applied to a complete overhaul of Inventory, one of the core areas of the app. In this part, I’ll talk about a smaller project done in the middle of the Inventory redesign.

Scansheets enable users to print barcode pages for their items. Each month during their inventory count, they place the scansheet near the items, such as taped to a wine rack or bin, and as they count their items they scan the barcodes on the sheet with a barcode reader. This is a quicker process than scanning individual bottles one at a time.

The end result of a scansheet is a generated pdf that looks like this:

generated pdf to print

Video of the old interface:

Problems of the old interface:

Unable to save
Users have these in place across the various areas in the restaurant they keep their items. One problem – 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. It is a colossal waste of time for users to rebuild scansheets from scratch every month.
Usability
There is some general usability issues and clunkiness here. One major offender is that users can manually order their items by dragging and dropping rows, but there is no indication that those table rows are interactable and a lot of users (and even some of our team) didn’t know about this functionality. It’s helpful for users to be able to order items this way, because they can set up the scansheet 1:1 with how they organize their wine rack or bar, so we wanted to make this more obvious in the redesign.
Limited functionality
Such as no bulk actions and no undo. Each restaurant may use these slightly differently, according to their own set-up. From the feedback we received, we knew we wanted to extend the UI to accommodate the various ways restaurants need to use this feature.

Video walkthrough of the redesigned UI:

Improvements in the new design

Which you can see in the video.

  • 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.
  • 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 on how to use this feature.
  • Informative empty states for the tables.

User test feedback

We initially thought an explicit “sort” function (such as by A > Z or by bin number (bin = a physical location where restaurants keep their bottles)) wouldn’t be needed since this was intended to be manually ordered by the users. We should have validated this assumption earlier than we did – we discovered a sort function was desirable through user testing close to the release. We went ahead with the release as planned, then added the sorting later.

The 0 item alert in the list item was implemented because if an item is at 0 quantity, users should remove that item from that scansheet (since there would be no physical item to scan). But it had an unintended side effect in helping users see if anything is at 0 that they know they have – maybe they didn’t mark the order as received, or maybe the wrong quantity was entered in a sale – and they could preemptively prevent an error in their variances.

Wireframe samples

Design comps

(plus some unused ideas)

User comments

The redesign was released in July 2015 and 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 redesign: “Immediately, I can’t wait to get started with it.”