Rebuilding a quote system nobody wanted to touch

TL;DR

• Context: Lead UX at a B2B packaging e-commerce scaleup.
• Problem: Quoting a custom order meant re-typing the same data into a second system and waiting days for a number.
• What I did: Collapsed the handoff between systems and sorted quotes into 3 clear paths on one screen.
• Result: Quote time down to same-day; sales volume held with a ~20% smaller team.

Diagnosis

You can’t make a custom-packaging quote simple. One order can hold many line-items, each in several variants (size, material, print, quantity), each priced from one of three sources, with a margin decision on top. The job wasn’t to remove that complexity — it can’t be removed. The job was to kill the friction around it: salespeople were re-typing the same order data into a second system and then waiting days for a number. So I kept the density (these are power users) and attacked the friction — collapsing the handoff between systems and sorting quotes into three clear tiers right where the offer is built.

flowchart TD
    subgraph Before["Before"]
        A1["Sales enters order<br/>into quoting system"] --> A2["Gets prices"]
        A2 --> A3["Manually re-types everything<br/>into offer system"]
        A3 --> A4["Customer waits days"]
    end
    subgraph After["After"]
        B1["Customer enters line-items<br/>and variants"] --> B2["Sales picks 1 of 3 quote paths<br/>right where the offer is built"]
        B2 --> B3["Offer ready<br/>same day"]
    end

    classDef good    fill:#e6f2ea,stroke:none,color:#1f4d33,rx:14,ry:14
    classDef bad     fill:#faeaea,stroke:none,color:#5f2626,rx:14,ry:14
    classDef accent  fill:#27272a,stroke:#3f3f46,stroke-width:1px,color:#fafafa,rx:14,ry:14
    class A1,A2,A3,A4 bad
    class B1,B2 good
    class B3 accent
    style Before fill:transparent,stroke:#a1a1aa,stroke-width:1px,rx:14,ry:14
    style After fill:transparent,stroke:#a1a1aa,stroke-width:1px,rx:14,ry:14
    linkStyle default stroke:#a8a8b3,stroke-width:1.5px

What I did

• Led the redesign of the custom-quote flow as Lead UX (two designers reporting to me), and took the whole process over solo when the PM left mid-project.
• Designed a nested line-item table in a legacy Ruby on Rails app — line-items and their variants visible at once, each cell drillable into a quote detail (navigation by quote type on the left, details on the right).
• Built a 3-tier quote model (instant API / supplier platform / manual), triggered right at offer creation, so the salesperson picks the fastest source that fits.
• Eliminated the manual re-entry between the quoting and offer systems — the customer’s line-items and variants became the salesperson’s starting point, not a re-typing task.

Results

• Quote time moved from days to same-day (roughly a day faster).
• High-touch sales volume held with a ~20% smaller sales-manager team, in a market downturn where contraction was the default.
• 3 quote paths on one screen (instant / supplier / manual) instead of a separate quoting system plus a manual copy-over.
• Customer-entered line-items and variants dropped straight into the offer — no duplicate data entry.

The problem

What was broken about quoting custom packaging?

Custom (high-touch) orders — anything not off-the-shelf — needed a human quote. The sales manager entered the order into the quoting system, got prices, then manually re-entered everything into a separate offer system to build the customer’s quote. A custom quote took days; the salesperson sat blocked in the middle, and the customer could walk. Two systems, one manual copy-over, days of waiting.

Why not just simplify the screen?

Because the complexity is real and it belongs to the user. A custom order genuinely has line-items, each with variants, each priced from a different source, with a margin decision on top. “Simplify and add whitespace” would have hidden the things a sales manager needs visible to decide fast. The win was elsewhere — in the friction around the quote, not the quote itself.

My role / scope

• Lead UX of the back-office and high-touch-sales area. Two designers reported to me (one remained after a wave of layoffs).
• Mapped the current-state journey together with the PM, then took the whole process over solo when the PM left.
• The redesign touched more than one system — the quoting system, the offer system, a supplier-facing platform, and a customer portal.

Process

• Journey mapping with sales — mapped the current quoting flow end-to-end with the people who lived in it, before designing anything.
• Prototyping the nested table, then testing it with 2–3 sales managers. The balance between density and scannability came out of those sessions.
• Took over delivery solo mid-project; coordinated across backend teams and a supplier-facing platform.

Key decisions & trade-offs

• Move quoting into the offer, not a separate system. The manual re-entry between the quoting and offer systems was the real bottleneck. Collapsing it loaded more into one screen — but killed the duplicate work. The friction was the problem, not the complexity.
• Three quote tiers, not one. An instant API price for near-standard customizations (a number in seconds); a one-click order to the supplier platform for the middle ground (1–2 days, with live status); a manual entry for truly custom deals, often after a call where a supplier agreed to a lower rate. One path can’t cover that range — three paths, each picked when it fits, can.

• Keep the density — these are power users. A nested table with quote statuses visible at once, drillable per cell. Density is speed here. “Dumbing it down” would have slowed the very people who close the deals.
• Honest: an overlooked cross-system dependency. The customer portal embedded an element from the supplier platform — a dependency we caught late, which meant extra dev work. Partly oversight; partly knowledge drain after a wave of layoffs. It stretched the project.

flowchart LR
    A["Quoting system"] --> B["Offer system"]
    D["Supplier platform"] --> B
    C["Customer portal"] -->|"embedded element, dependency caught late"| D

    classDef info    fill:#e9eff8,stroke:none,color:#1e3a5f,rx:14,ry:14
    classDef bad     fill:#faeaea,stroke:none,color:#5f2626,rx:14,ry:14
    class A,B,D info
    class C bad
    linkStyle default stroke:#a8a8b3,stroke-width:1.5px

How it turned out

Quote time dropped from days to same-day. And the high-touch sales volume was held with a ~20% smaller sales-manager team, during a downturn where the default was contraction. The hardest part of the project wasn’t the screen — it was the cross-system coordination behind it (the supplier platform, the customer portal, several backend teams). That’s what stretched the timeline; the design itself was the straightforward part once the friction was clear.

What I took away

• Attack the friction around complexity, not the complexity itself. The quote was genuinely complex and belonged to the user. The win was killing the manual handoff and the waiting.
• Map every backend dependency before you design. The portal dependency we caught late cost real time. Cross-system work fails at the seams, not in the middle.
• Budget for knowledge drain. In a downturn, the person who knew the dependency may be gone. Assume holes in what you inherit.
• Density is a feature for power users. Same lesson, different system — a screen that looks “busy” to an outsider can be exactly right for the expert who lives in it daily.