Work /The Deals System

Zoro.com — Case Study

THE DEALS SYSTEM

A customer couldn't get a bulk discount on nuts and bolts. Asking why dissolved my team, created a new one, and rebuilt how Zoro runs promotions. The biggest win was three lines of plain text.

Role

Lead Experience Designer. Sole designer on a cross-functional product triad.

Timeline

15 months, ongoing

Partners

Robyn (PM), Neilan (Eng Manager), Pierce (Eng Lead)

Company

Zoro.com, a Grainger company

+27%

Revenue per user

+433

Basis points CVR

+18%

Lines per cart

$1B→$1.5B

Zoro annual sales (program lifetime)

The constraint nobody talked about

In 2023, a customer buying nuts and bolts in bulk from Zoro couldn't get a volume discount. Not because we didn't want to offer one. Because our promotional infrastructure, a legacy NetSuite integration, had exactly one capability: a percentage-off promo code applied to the entire basket.

That was it. No dollar-off. No free shipping. No BOGO. No category deals. No bulk pricing. One percentage-off code for the whole basket, and nothing else.

I was on a different team at the time, the Invest Team, identifying product categories with high growth potential. Fasteners kept coming up. B2B buyers ordering in volume had a consistent ask: if I'm buying a thousand of these, shouldn't I pay less? We agreed. And we started designing for it.

Engineering stopped us. We can't do that. The system won't support it.

I brought that back to leadership as more than a technical constraint. It was a strategic one. We were trying to compete with McMaster-Carr for industrial buyers, and we couldn't get there with one promo code. That conversation dissolved the Invest Team, created the Promo Team, and started a 12-month clock to find a real solution.

Where customers entered

80%

arrived directly on a Product Detail Page. No homepage. No promotions page. Just a product.

Where promo messaging lived

100%

of promotional messaging was on the promotions page. Not on the PDP. Nowhere near the product.

Most customers never saw a deal. Not because they didn't want one. Because we never showed them.

Build vs. Buy

The first decision was fundamental: build our own promotional engine, or buy one?

Our triad worked through it together. Robyn, our PM, owned business requirements and budget. Neilan and Pierce, our engineering leads, owned technical feasibility and integration complexity. I owned the experience layer. Could we create shopping experiences that matched our brand, flexed enough to meet future needs, and felt seamless to customers in ways we couldn't fully anticipate yet?

My argument for buying came down to a constraint nobody wanted to say out loud: we didn't have a front-end engineer. Building from scratch meant months of backend development before a single customer-facing feature could ship. And we'd be maintaining custom infrastructure indefinitely.

We evaluated two finalists. Voucherify was cheaper and capable, but it came with its own front-end. That meant our promotional experiences would be constrained by what their interface could do. It would never fully match our brand or our future needs.

Talon.One was more expensive. But it worked entirely through API calls. Their engine returned data. Our front-end could do whatever we decided with that data. Full customization, no front-end lock-in, complete control over every customer-facing moment.

We chose Talon.One. It cost more, and it was the right call. The API model meant we owned the experience. Everything else was just data.

Criteria Voucherify Talon.One — chosen
CostLowerHigher
Front-endBundled — locked into their UI componentsAPI only — we build whatever the experience demands
CustomizationConstrained by their component library and roadmapUnlimited — the engine returns data, we decide the experience
Future flexibilityDependent on what Voucherify shipsFully in our control
MaintenanceLower (they own the UI layer)Higher (we own the UI layer)
The API model meant we owned the experience. Everything else was just data.

The first months: moving fast on what we could

Integrating a new promotional engine into a $1.5B e-commerce platform while decoupling a legacy system isn't fast work. For a stretch of months, there wasn't much to design. The hard work was infrastructure.

I didn't wait. While engineering connected Talon.One to our systems, I designed the quick wins: dollar-off promotions, free shipping offers, codeless auto-applied promotions. These were close enough to what we already had that the design lift was minimal. But they mattered strategically. They proved to leadership that the new system could expand our capabilities quickly, and gave us a backlog of designed features ready to ship the moment integration was stable.

Quick wins first. Always.

80% of the traffic, 0% of the message

Once we started pushing promotions more broadly, we ran into a structural problem that had nothing to do with the new system.

80% of Zoro's traffic enters on a Product Detail Page. Direct landing from Google search. They've never seen our homepage. They've never visited our promotions page.

100% of our promotional messaging lived on that promotions page.

We were running deals constantly. Customers were landing on product pages and never knowing. They'd add to cart, check out, and leave without ever applying a code that could have converted a browser into a buyer.

The fix was almost embarrassingly simple. Below the price on the PDP, we added plain text:

"Promotion available: 10% off plumbing supplies. Enter code PLUMBING226 at checkout."

No click-to-copy. No auto-apply. Highlight, copy, remember, paste. Maximum friction still in place. Deliberately. We wanted to isolate the variable. Does visibility alone do anything?

It did. Significantly. We ran a controlled A/B test against a live DeWalt promotion. Logged-in users in the test group showed +27% revenue per user, +18% lines per cart, and a +433 basis point lift in conversion rate. 91% of sessions that redeemed the promo code were in the test group. The control group barely used the promotion. Not because they didn't want a deal. Because they never saw it.

But the finding that surprised us most: the lift extended to users who didn't redeem the promotion at all. Just knowing a sale existed made customers more confident to shop with us. Transparency has commercial value, and we'd been hiding it on a page nobody visits.

Zoro product detail page for a drill bit set priced at $64.99. Below the price, a 'Promotions' section shows plain text: '20% off 3 qualifying Zoro Select Cutting Tools. Copy and paste code at checkout: ZOROSELECT326.'
PDP promo messaging — the intervention. Plain text below the price. No auto-apply. Maximum friction deliberately preserved to isolate visibility as the variable.

Revenue per user

+27%

Logged-in users in the test group vs. control

Conversion rate

+433bps

91% of promo redemptions were in the test group

Lines per cart

+18%

Customers bought more when they knew a deal existed

A/B test — DeWalt promotion — logged-in users — 2024

The Deals Drawer

The PDP test proved visibility worked. But placing individual promo messages on individual pages wasn't scalable. We needed something visible everywhere, all the time, without cluttering every page.

The answer was a navigational element. We added "Deals" to the primary nav, present on every page across the entire shopping experience including cart and checkout. Clicking it opens the Deals Drawer: a slide-in panel listing every current promotion with click-to-copy codes.

Keeping it accessible through checkout was a specific, deliberate decision. In the old experience, remembering a promo code meant leaving checkout to find it. That breaks the flow and risks losing the sale. The Drawer means the code is always one click away, wherever you are.

But the Drawer wasn't designed as a feature. It was designed as a platform. The cards inside are expandable components with required and optional props that surface different information depending on promotion type. Phase 1 used the simplest configuration. The architecture was ready for what came next.

Zoro product detail page with the Deals Drawer open. The drawer panel shows five deal cards including Milwaukee Tool and Kimberly-Clark promotions with copy-code buttons and expiration badges.
Deals Drawer — live site. Available across every page including cart and checkout. Each card is the same component configured differently per promotion type.
Figma annotation of the Deals Card component. Four numbered callouts point to Status Badges, Promotion Title, Promotion Description, and Expiration fields. Right side shows variant states: Status Chips (New, Completed, Final Day), Code or No Code, and Expiration and Rules.
Card component — Figma documentation. Required and optional props, status chip variants, code vs. no-code configurations. One component, four promotion types.
Figma system documentation for the Deals Drawer showing three states: Base Drawer with standard promotions, Exclusive Offers Present with personalized deals sectioned above available deals, and annotated notes covering section headers, sorting logic, completion behavior, and the Rewards and Achievements section structure.
Drawer system — Figma documentation. Base state, exclusive offers state, section logic, sorting rules. Designed to scale from one promotion type to four without structural changes.

Phase 2: Exclusive offers

Phase 2 introduced exclusive offers: promo codes assigned to specific users, not available site-wide. The Drawer already had a dedicated section. We'd designed for this from the start.

The user need was clear: personalized offers feel more valuable than broadcast discounts. But the business need ran deeper. Before Talon.One, generating promotional codes meant bulk creation. Literally a million codes at a time, active until used. Even randomly generated codes follow detectable patterns, and bad actors were using AI to identify them and exploit the inventory.

Exclusive offer codes are generated on the fly, the moment a specific user first opens the Drawer. No pre-generated pool. No exposure window. The code exists for one person and activates only when they access it. The same mechanism solved a personalization problem and a fraud problem at once. That wasn't a coincidence. We designed the system before we designed the screens.

Phase 3: Rewards and achievements Shipping H2

Phase 3 shifts the incentive forward in time. Instead of discounting the current purchase, we incentivize the next one. Or the third one. Or the fourth.

The business case targets three OKRs: 30-day repeat order rate, Zoro-first customer growth, and revenue per user. A simple version: place your second order within 30 days and earn $25 off a future purchase. The customer already placed one order. They'll likely place a second. They have to place a third to redeem. Three orders, one campaign, all three OKRs addressed.

All of it runs through the same Deals Drawer, using the same card component with different props. One component, maintained once, powering four phases of a promotional strategy. That wasn't an accident. It was a decision made at the start of Phase 1 to reduce tech debt and keep engineering velocity high.

Phase 4: The loyalty program In planning

Rewards and Achievements is also a testbed. Early Phase 3 data will inform a full loyalty program that integrates the Drawer with the My Account section: a personal promo hub for customers who've become Zoro-first buyers.

The Drawer stays. My Account becomes the longitudinal view: history, progress, earned rewards, upcoming opportunities. Two surfaces, one system, the full customer lifecycle made visible. The design work for it is already underway, running through the Agentic Ecosystem.

New

Offer

Site-wide promos and visible PDP messaging. First reason to buy.

Phase 1

Returning

Offer

Exclusive offers — personalized codes generated on first Drawer open.

Phase 2

Regular

Offer

Rewards and achievements. Incentivize the 2nd, 3rd, 4th order.

Phase 3 — H2

Zoro-first

Offer

Full loyalty program. My Account becomes a personal promo hub.

Phase 4 — Planning
Each phase funded by the one before it. One Drawer component powers all four.

What this project actually was

This was never just a promo feature. It's a four-phase customer lifecycle program, years long, where each phase proved itself before we built the next.

Buying Talon.One gave us full control of the experience. Building the Drawer as a platform meant four phases could ship on one component. And each phase's results made the case for funding the next one.

It started because a customer couldn't get a bulk discount on nuts and bolts. And someone asked why.