B2B
Enabling self-service commerce
Redesigned CITGO’s Salesforce B2B commerce experience to replace a 20-year-old manual ordering system with a scalable self-service platform, reducing customer service dependency and improving enterprise customer control.
Role
Product Designer
Company
Merkle
Client
CITGO
Platform
Salesforce B2B Commerce
Metrics
Reduced reliance on sales reps for transactional support
Reduced CSR dependency through Salesforce OMS integration
Delivered greater customer control through editable account settings, shipping preferences, and reordering tools
50%+
of order entry completed digitally, driving strong early adoption
200
enterprise marketers successfully onboarded during the initial rollout
Goals
Enable CITGO’s B2B customers to place and manage orders online without contacting support
Create flexible flows that account for different user types, including marketers and their downstream customers (National Accounts)
Reduce cart friction by collecting just enough information to show customers the right products
Introduce progress indicators, account management tools, and quick actions to support efficiency and control
Challenge
CITGO’s existing ordering platform was over 20 years old, entirely manual, and required customers to call in for every order. This placed a heavy burden on customer service and created friction for customers reordering common products. Our task was to redesign the system using Salesforce B2B Commerce to enable self-service, reduce CSR dependency, and modernize the buying experience while working within platform and implementation constraints.
Design Process
Discovery & Strategy
Participated in discovery workshops with CITGO leadership to understand business needs, user types, and constraints
Partnered with engineers and Salesforce experts to understand backend logic and data requirements
Mapped user flows for multiple customer types: marketers, national accounts, and their internal admins
Aligned on priorities such as reducing CSR workload and maintaining order accuracy
UX & Interaction Design
Created wireframes and interaction flows for homepage, product selection, quick order, and checkout
Designed a first-time modal that captured shipping details up front, which was critical for showing the right products early and reducing downstream friction
Developed an account management hub where users could update their shipping addresses and order preferences
Designed quick actions in the utility nav to help users adjust order info without interrupting their workflow
Incorporated a progress bar during checkout to indicate how much of a truck was filled (based on bulk vs. packaged order types)
Visual Design & Developer Handoff
Led visual design under the direction of a Design Director, while ensuring alignment with Salesforce component libraries
Delivered responsive UI specs and detailed interaction documentation for development
Balanced constraints of limited image use and rigid Salesforce components by focusing on clarity and content hierarchy
Advocated for friction-reducing UX choices, like allowing returning users to bypass modals and access order history quickly
Outcomes
Led a complex initiative with multiple stakeholders and significant technical constraints, navigating tradeoffs between visual flexibility and interactivity.
Anchored decisions in user-centered design principles to reduce friction and give customers greater control throughout the ordering experience.
Delivered a thoughtful solution within early agency and platform constraints, enabling scalable digital ordering for enterprise customers.
Identified opportunities for deeper user validation to further strengthen the experience over time.
Replatformed a legacy, manual ordering system into a digital self-service experience—driving 50%+ digital order entry, onboarding 200 enterprise marketers at launch, reducing CSR dependency through Salesforce OMS integration, and empowering customers with editable account settings, shipping preferences, and reordering tools.
