Helping Customers Complete Orders With Confidence
I led a redesign that moved fulfillment decisions directly into the Staples Print cart and checkout.
Consolidating pickup, shipping, and courier delivery into a single step removed a friction-heavy upsell flow and unlocked mixed orders for the first time, cutting cart abandonment by 18% and lifting overall sales by 9.2%
GOALS
Establish Financial Trust
Design for Systems Thinking
Humanize Complex Logistics
Category
E-commerce
Tools
Figma, UserTesting
HEAR THE STORY
01
One Order, Many Ways
Designing around how customers actually order
The project started with a business decision rooted in customer reality:
People don't shop in one mode.
A customer ordering business cards for next-day pickup might also need posters shipped to their home.
Consolidating the Path
The existing flow forced customers to choose one fulfillment method per order through a separate upsell page, contributing to a 22% drop-off at checkout.
Together with Product Managers, we advocated for a centralized cart experience that supported mixed-fulfillment orders, consolidated key decisions, and reduced the path to purchase.
Screenshot of old upsell page
Screenshot of old cart
02
Benchmarking Complexity
Identifying industry standard interaction models.
I conducted a deep-dive competitive analysis of 6 major retailers like Walmart and Home Depot to identify how they handled "mixed mode" carts.
This research helped me define a mental model for Staples users: the "Item Level Agency" model, where users maintain granular control over each product’s destination without losing sight of the total order.
Screenshot of selected research questions in FigJam
Example of competitor analysis in FigJam
03
Navigating Constraints
Mapping a complex logic system
Because print products have physical constraints (e.g., large-format banners can't be picked up at all locations), I collaborated with two separate engineering squads and a Product Manager to map every edge case and restriction.
Scenarios
Interaction Exploration
To solve the "Mixed-Order" problem, I explored various interaction patterns to find the balance between density and clarity.
Global Model
Item Level Model
04
Iterative Refinement
Validating the flow through unmoderated testing
I used a mid-fidelity prototype to run unmoderated tests on Usertesting.com to see if the "Mixed Order" concept was intuitive. I synthesized the qualitative feedback from these sessions to identify structural friction points.
Problem
Iteration
04
Future proof
The Anatomy of a High Trust Component
I developed a modular fulfillment component that could be reused across the Staples ecosystem. At this stage, I focused on "Craft." For a payments visual hierarchy isn't just about aesthetics; it's about reducing the anxiety of commitment.
The Checkout Module for clear financial stettlement
The Order Summary was redesigned to be a "living receipt."
Grouped Itemization
I created a clear separation between product costs, shipping fees, and local taxes.
Zero-Distraction Payment
I refined the credit card entry fields with better auto-complete logic and non-punitive error states
06
Responsive Execution
Maintaining integrity across the full device spectrum.
Print solutions are often managed by busy professionals on the go. I ensured that the complex "Mixed-Order" toggles remained accessible on touch devices without cluttering the screen.
Usertesting sessions
07
The Impact
Cart Abandonment
Streamlining the funnel directly decreased drop-offs at the fulfillment stage.
Increase in "Store Pickup" Adoption
Clearer UI visibility encouraged users to choose lower cost fulfillment, saving on last mile delivery costs.
Conversion Rate
The new flow reduced user drop-off and friction compared to the legacy flow.
Net Promoter Score (NPS)
Clearer UI visibility encouraged users to choose lower-cost fulfillment, saving on last-mile delivery costs.
Conversion Rate
The new flow reduced user drop-off and friction compared to the legacy flow.
