Company

Shopify

Role

Lead Designer

Contribution

UX Strategy, Design, Research

Summary

In 2019, with growing online demand in a B2B market, Shopify wanted to expand into the B2B market and build a fully native B2B platform integrated within the existing D2C platform. In 2022, Shopify launched a B2B platform where I lead design for the B2B Checkout team.

The Problem

Shopify has originally been a B2C ecommerce platform. However with 80% of B2B commerce moving online by 2025 Shopify wanted to move into the B2B market. Moreover, the global B2B ecommerce market has been outpacing the B2C ecommerce market—five times over—with a $17.9 trillion valuation.

Shopify had proven the need for B2B eCommerce solutions through their first party app, the Plus Wholesale Channel. However, the app lacked key features and customization. Merchants were also using third party wholesale apps as a workaround but it still required a lot of manual work for merchants.


Manual and time-consuming B2B processes hindered the scalability and efficiency of wholesale businesses prompting the need for a streamlined solution.

Goals

We needed to build the foundation for B2B to streamline the process for our merchants doing B2B commerce.

For the initial launch of the B2B platform, the key needs we planned to address are:

  • • Merchants can manage their companies/buyers in the admin
  • • Merchants can customize product availability, pricing, payment terms, and payment methods for their companies
  • • Buyers of companies can purchase the right products at the right prices

The Process

My team, B2B Checkout, was in charge of the last bullet, which focused on the buyer experience. The team consisted of myself, my product manager, and engineering.

B2B Checkout Guiding principles

B2B buying is a very different experience from B2B. in B2C, the emphasis lies on discovery and checkout conversion, with a streamlined process and a focus on a few line items. In contrast, the B2B experience prioritizes efficiency and re-orders, involving a non-linear path with negotiations on payment terms. The B2B checkout is highly customer-specific, reflecting individually assigned terms and methods negotiated between buyers and merchants.

As I designed the checkout, I established UX principles to guide my design decisions:

Transparency, clarity and accuracy of information are essential


In B2C we optimize for conversion and visually streamline as much as possible. However in B2B, buyers deal in high-value purchases, so any misstep is magnified. Thus the it’s very important that the buyer has transparency of every piece of information.

Reflect the real-world relationship between B2B merchants and buyers


In B2B, there is an existing buying relationship between the merchant and buyer, and it's important that those aspects translate into Checkout.

For exmample, In B2C, it is often common for shipping and billing addresses to be the same. However in B2B, that is not typically the case. The address where the shipment location and the billing department can often be separate locations.

B2B Merchant needs

Based on the B2B merchant needs, the checkout needed to account for 3 main aspects:

  • Checkout must support merchant order review and editing step before order finalization.
    Merchants need the flexibility to change an order or verify inventory, pricing and more before submitting the order for fulfillment.

  • Some customers must pay at checkout, while others are allowed to defer payment.
    B2B is very relationship-based. Buyers negotiate specific payment terms and methods with the merchant, therefore the checkout needs to be customer specific and reflect assigned terms and methods.

  • Every customer is known, and price and payment requirements vary by company.
    Merchants have specifically defined pricing and payment settings for their customers, thus every buyer needs to be logged in order to checkout and see the correct pricing information.

The Solution

From the B2B merchant needs, I designed 3 main types of checkout flows:

  • Pay now checkout
  • Pay later checkout
  • Checkout to Draft

Pay now checkout

When a merchant doesn’t have a well-established their buying relationship with the buyer, they can require immediate payment at checkout to reduce the risk of non-payment. This approach helps the merchant secure payment before fulfilling the order.

Streamlining the buyer experience


Upon clicking checkout, the buyer is accelerated to the Payment page with their account information prefilled. This allows a more streamlined and efficient experience. Buyer then inputs payment information or selects a vaulted card if there any saved on the company account.

Pay later checkout

In this case the buyer is assigned payment terms by merchant. The order is created and payment is deferred to the future. This is common in well-established and trusted buying relationships, providing flexibility to the buyer while relying on their creditworthiness for payment assurance.

Payment terms


For deferred payment scenarios, buyers have the option to select a vaulted card, enter a new card, or Choose payment later. Selecting “Choose payment method later” lets buyers decide how they’ll pay at a future date - and gives them an opportunity to pay with a check, money order or some other off-Shopify payment method.

Checkout to draft

In this case the buyer has been assigned to checkout to draft order by merchant. Checkout will collect expected payment method for later charge and submit as a draft order. With bulk orders, B2B merchants typically need to verify inventory and/or manufacturing availability before order confirmation. Merchants expect that edits can be made after orders are submitted by buyers without downstream financial consequences such as refunds, credits, or additional charges.

User research

  • Usability testing
    From the usability testing, we discovered that buyers had some questions around the terminology with draft orders, so we worked with content to improve the content around draft order checkouts.

  • User interviews
    We conducted user interviews to help inform and prioritize what features we should build post launch for merchants.

The Results

We launched the B2B platform on Shopify in June 2022, receiving positive feedback from merchants.

  • Within the first 6 months of launch, we had:

  • 100+ Million GMV processed on Shopify B2B Checkout in the first 6 months of launching the B2B platform

  • 2,400+ active B2B merchants using the B2B platform