Pick & Pack

Foxtrot · Web · iOS

Foxtrot orders were being delivered with the wrong items or missing items. Additionally, They were often delivered well past the promised delivery time.
My product manager and I were tasked with architecting a system that would reduce fulfillment errors and increase efficiency.

My Role

Product Design Lead
Three phones displaying Pick & Pack screensThree phones displaying Pick & Pack screens

Understanding the Problem

Up until this point, most of my time at Foxtrot had been spent working on customer facing projects. I was unfamiliar with the tools that store teams were using to power our e-commerce business. I was excited for the opportunity to immerse myself in the operations of our business.

I visited six Foxtrot locations and asked the store manager for each to walk me through the process of how their team picked and packed items for an online order. I also spoke with countless store team members about their experiences and how we could improve the process.

Though each store had its own unique way of fulfilling online orders, the core workflow they followed was roughly the same. My goal was to document that core workflow and pinpoint issues that were preventing the team from working more efficiently.

Identifying Key Issues

Unnecessary Steps

The store team had to transfer orders from our internal tool (Merchant) to our point of sale system (Clover) by recreating them. They had to manually search the point of sale for each item in the order to do this.

Lack of Proper Tools

The order was displayed to the team on a desktop computer. It’s not very easy to carry a desktop computer around the store with you as you pick the items in the order. They had no tools that enabled them to pick orders while on the move.

No Form of QA

Between transferring the order to the POS and manually selecting items from the shelves, there was a lot of room for store team members to incorrectly pick or forget items. With no QA system in place to catch any mistakes, orders often went out with incorrect items.

Items on shelves and in freezersItems on shelves and in freezers
Delivery Fulfillment Store in Chicago

Identifying the Opportunities

Integrating with Clover

The process of pickers recreating orders in the point of sale was an obvious issue we knew we could solve by fully integrating our system with the Clover system. This would be a backend heavy initiative but would greatly reduce the amount of time required to fulfill orders if we could send the information directly to Clover.

Providing Better Tools

The second opportunity we identified was providing better tools to pickers. One desktop computer simply wasn't enough to facilitate the process of fulfilling orders efficiently. We wanted to give the store team a tool that was easy to carry around and helped them accurately pick items.

Building "Pick & Pack"

Our goal was to build a mobile app that allowed store team members to manage all online orders quickly from the palm of their hand. The app would be fully integrated with Clover, eliminating several redundancies in the fulfillment process. It would also allow pickers to scan items as they picked orders to ensure order and inventory accuracy.

I designed and documented the Pick & Pack app over the next two months, working closely with my product manager and stakeholders to make sure we were building the best possible product. My main challenge during this time was establishing a workflow for actually picking items. We ended up creating a process that allowed store team members to not only pick items, but replace items and add items to orders as well.
Claiming an Order
Pickers could claim an order to start fulfilling by selecting it from a list or just automatically selecting the next order in the queue.
Pick & Pack home screen with large black button to claim order

Home Screen

Unclaimed order with list of items and black button to claim order

Unclaimed Order

Order details for a delivery order

Order Details

Scanning an Item
Pickers can scan items and be alerted if they’ve scanned the wrong one. If there are multiples of an item, they are asked to confirm the quantity they actually picked.
Phone with camera open scanning the barcode on a wine bottle

Open Scanner

Phone with camera open scanning the barcode on a wine bottle with an error message

Incorrect Scan

Phone displaying a dialog box with an input

Confirm Quantity

Correcting Issues
Inventory discrepancies and other issues happen often. Pickers can add, remove, and replace items as well as mark items as out of stock or force pick them without scanning a barcode.
List of actions that can be performed on an item presented in a native action sheet

Item Actions

Phone with camera open ready to scan a jar of peanut butter

Replacement Scan

Sheet displaying the details of a replacement for peanut butter

Replacement Details

Submitting an Order
When all the items in an order are accounted for, pickers can submit the order as packed and automatically print a ticket with the necessary notations.
Picked order ready to be submitted

Packed Order

Confirmation sheet for delivery order

Delivery Order

Confirmation sheet for pickup order

Pickup Order

The Pick & Pack app is in use at every Foxtrot location today. It’s implementation resulted in an improvement in several key metrics.
Minute decrease in avg. pack time
Increase in perfect order rate
The app now has a dedicated product team and has expanded to include tools to help store teams perform functions outside of order fulfillment.
Browse Projects
Cafe Pickup
Pick & Pack
Product Pages
Laptop displaying Trunk Club Careers home screen
Careers Hub
Men's clothing displayed on shelves
Featured Trunks
Embroidered logo on green fabric
Cody Williams
Desert landscape with bright blue sky