Salesforce: B2B Commerce Checkout Re-imagined
Modernizing enterprise checkout by transitioning from a closed backend system to a flexible, component-based builder that unified B2B and B2C commerce architectures.
Salesforce B2B Commerce Checkout
Problem
The 2020 B2B checkout launch was a backend solution that was hard to debug, hard to customize, and inconsistent with the rest of our new MVP builder. I led the effort to research user pain points and architect a new Checkout Builder that simplified implementation for developers and merchants alike.
How I tackled it
- 01
Discovery & Audit
Identified friction points in the June 2020 release through deep-dive sessions with system integrators.
- 02
Architecture Strategy
Designed a multi-layered component framework supporting global styling and modular checkout steps.
- 03
Cross-Cloud Alignment
Partnered with the B2C team to identify architectural overlaps and unify the commerce experience.
- 04
Iterative Prototyping
Built high-fidelity builder mocks and validated technical feasibility with demo engineers.
What we learned
We conducted extensive interviews with system integrators and our internal Demo Engineers — the people implementing customer storefronts. The feedback was brutal: the system was so hard to customize that some developers preferred rebuilding from scratch. The depth of technical debt pushed us toward a Builder approach instead of simple UI tweaks.
From insight to roadmap
Our strategy focused on a 12-month unification roadmap. Once we recognized that B2B and B2C checkout requirements were functionally interchangeable, we pivoted from a siloed B2B tool to a universal Commerce Cloud framework. The rollout was multi-phased: establish global styles, modularize payment and shipping blocks, then enable a drag-and-drop builder.
Iteration to high-fidelity
Phase 1 — The Component Framework
Design began by breaking the checkout into functional blocks. I collaborated with checkout engineering to keep components lightweight while still flexible. We focused on a Checkout Builder interface where merchants could toggle between global branding and individual step customization without touching code.
Phase 2 — High-Fidelity Iteration
I iterated to balance the no-code requirements of merchants with the low-code needs of developers. Bringing developers into design reviews early made sure the builder's output was technically achievable. The final high-fidelity design enabled real-time visual editing of shipping, payment, and summary sections.
What it added up to
The project resulted in the complete merger of the B2B and B2C commerce checkout teams — at the time, forming the modern Salesforce Commerce Cloud. We replaced the rigid legacy system with a modular builder that drastically reduced implementation time. Merchants gained the ability to launch checkouts faster, and developers benefited from a transparent, debuggable architecture.