Online Order Fulfillment App

My Role

UX Designer

Launch Date

Winter 2016


In addition to its highly popular indoor cycling classes, SoulCycle boasts a line of apparel and active lifestyle accessories that can be purchased both in-studio and online. SoulCycle’s small corporate retail team takes responsibility for fulfilling all online orders - in addition to their normal responsibilities of designing, merchandising, and marketing Soulcycle clothing and goods. Heading into the fall of 2015, this team had been fulfilling orders in an entirely manual way from entering customer information into UPS to generate shipping labels to emailing customers to let them know their merchandise was on the way.

However, this process was not scalable or sustainable, so the SoulCycle tech team set out to build a retail fulfillment tool that would gather order information and help automate tasks like pulling inventory, notifying the customer about order status and generating shipping labels and packing slips. I was tasked with leading the UX for this project.


As we transitioned the retail team from a largely analog process to a new, digitally driven process, our first task was to define just what this new digitized order fulfillment process should look like. After having a lot of stakeholder interviews, internal discussions, and collaborative sketching sessions to talk through the business needs and user flows as a team, we ultimately, we settled on a five-step approach.

Retail Fulfillment User FlowRetail Fulfillment User Flow

In addition to the normal status flow that orders are automatically given as they move through the fulfillment workflow, users can also manually change and override an order's status to either redo a step in the fulfillment process or skip over an unneeded step.


When an order is placed on, the order is given a status of “new” and placed into a digital queue. The retail workers then work down through the queue of new orders. The first step in fulfilling a new order is for the worker to print a pick ticket, a list of the items in the order. Printing the pick ticket automatically changes the order’s status to “open.” The worker then uses the pick ticket to ensure that the order items are in the warehouse and the order can be confirmed. When the worker confirms the order, its status is set to “confirmed,” and a confirmation email is sent to the user.

The next step is for the retail worker to use the app to organize the shipment items into package groups. Once the items are in the appropriate number of package groups for shipping, the worker can then print packing slips and shipping labels for each package. Printing these also sets the shipment's status to “packed.” At this point the shipment is ready for pickup by UPS. Once the package is picked up and scanned, the status of the order is set to “shipped” thanks to a daily call to the UPS API. A status of “shipped” also triggers another email to the customer telling him or her that the shipment is en route. Again leveraging the API, the order’s status is automatically updated to “delivered” once UPS confirms delivery of the package.

New Queue Image ScaledNew Queue Image Scaled

On log in, the user's experience begins at the queue page where he or she can either search for a specific order or rapidly work through the newest orders with bulk actions.


The primary purpose of the retail fulfillment system is to allow the retail team to quickly apply intelligent and appropriate bulk actions to incoming orders, such as printing pick tickets to be used when pulling inventory to fulfill the order or mass confirming orders to autogenerate an order confirmation email to the customer. So the user's experience begins with the order queue, which is the page he or she sees on initially accessing the system. By default the queue is sorted to show new, pending orders, but a variety of filters, sorts and searches can be used to quickly find any order - either in progress or historical - that needs attention.


The order detail view provides a comprehensive overview of the order from the items in it to the customer's shipping and payment information as well as letting power users perform more complex actions like merging shipments or modifying order contents.


However, part of providing a great experience for our retail customers meant providing a flexible system to allow our retail team to deviate from this process as needed. We accomplished this with an order detail view where the retail team could perform additional functions like adding notes, editing shipping details, editing the order contents or manually changing an order’s status either forwards or backwards (e.g. from confirmed to packed or from packed to repack).  

The most challenging of these features was allowing the retail team to modify the items in an order. While an electronic inventory system minimizes cases in which a purchased item is out of stock, most of SoulCycle’s retail collections are rather limited editions, so it can happen that a customer will order something that turns out to be out of stock or a customer may simply change his or her mind after placing an order and either want to add or remove an item or get an item in a different color or size. When a customer reaches out to SoulCycle with a special request, the policy is generally to do the very best to accommodate that customer and we made sure our fulfillment app does the same.

Simply making orders editable entailed a bit of a technical challenge since the existing cash register app, which logs all Soul-Cycle sales from both the physical POS systems and the website, did not support adding new items to an order. To account for this we came up with the concept of a shipment, which overarches an order. When each order is placed a new shipment is also created, and it contains the new order. When it’s created a single shipment has only one order in it, but infinite orders can be merged into the shipment and any time new items are added, they are created as a new order that is wrapped into the existing shipment for the first order.

Add Product SearchAdd Product Search

As the user types search results autocomplete below. While items are broken out by size at a results level, the size can still be edited after clicking through to the item detail view.

Add product Item ViewAdd product Item View

If the item detail view reveals that that product is not what was intended or if the user needs to locate another item, no navigation is necessary since the search bar carries over into item detail view.


Thanks to this work around, we were able to give our retail team maximum flexibility to add, remove or substitute inventory according to customer requests without having to rework the code for the existing cash register app. However, we also needed to ensure that this powerful functionality was easy to use – particularly when it came to adding new items to an order. To do this, we created an integration with our inventory system that would allow users to search for, view and add items to an order without needing to close or leave the order detail view.

Select A Shipment to MergeSelect A Shipment to Merge

Finding the desired shipment to merge with is the same as finding any other order in the order queue.

Set a Primary Shipment when MergingSet a Primary Shipment when Merging

Since both shipping address or editable even when merging shipments, the user can merge two orders and send them to an entirely new address if necessary.


This structure of grouping orders into shipments, also gave us the flexibility to merge separate orders into a single shipment. Adding this functionality to the tool, also provides the retail team yet another way to provide excellent customer service, such as when college roommates request for their items to be sent together to save on shipping costs or when a customer decides to purchase more items after placing an initial order. The actual process of merging two shipments is quite straightforward. First the user enters the detail view of one of the shipments to be merged and selects “merge shipments” from the hamburger menu in the order detail view. Then he or she searches for the second shipment to be merged and selects it from the list and next he or she selects which will be the primary shipment (that is which set of data will be used to populate the shipping address).

Confirm Order Changes ScaledConfirm Order Changes Scaled

The exact confirm changes messaging the user sees is contextual to what was changed. In this case, the user removed more items than were added so the user is prompted to confirm a refund.


Of course, with great power comes great responsibility - especially when making edits that could affect the amount a customer is charged or that could alter the shipping destination of an order. So to avoid mistakes and ensure that any order  edits were not immediately processed, we batched all user changes until the user reviewed and approved them via a confirm changes overlay that would be displayed when the user selected “Save Changes” or tried to leave the order detail view without saving his or her edits.


In the first two and a half months of its deployment, the shipping fulfillment system was used to complete more than 2000 online orders, accounting for more than $280,000 in sales. For its first full year of use, it was used to fulfill merchandise orders totalling more than $1,000,000 and supported an 80% increase in online retail sales year over year. Fulfilling this order volume in this timeframe would have been nearly impossible for the small SoulCycle retail team to do manually.