Scaling an Ecommerce Website for B2B and B2C Audiences

Tangling Up the Crew

From one location opened in the 19th century, to 12 hybrid store/warehouse locations and more than 200 employees, Reinders is a Midwest success story. Their product offerings have expanded over the decades as well, from irrigation systems to turf and landscaping supplies, commercial equipment, and even outdoor living products. They launched an ecommerce site to celebrate their 150th anniversary, primarily targeted to their B2B clients. But as Reinders’ business territory expanded across 10 states, and as they started offering their products to a B2C audience as well, they began to grow out of that previous ecommerce platform.
 
Site scalability and technology debt were the chief difficulties, and two of the most visible ways they manifested were in pricing and inventory. Neither could be updated in real time on their previous platform, so Reinders would have to process multiple batch updates each day. This was especially problematic for B2B clients, most of whom have individual pricing agreements with Reinders. Not being able to trust the information they were seeing drove clients off the website, inundating Reinders’ customer service team with phone calls instead.

To solve these interrelated issues, Reinders selected Adobe Commerce as their new ecommerce platform. They put out an RFP, and selected Guidance (an Adobe Commerce Specialized Partner) as their vendor for the project. But the scope of work wasn’t limited to Adobe Commerce. Reinders had also selected Infor CloudSuite Distribution (CSD) as their new enterprise resource planning (ERP) solution and needed the two systems to work together seamlessly.
 
After Guidance helped Reinders evaluate the various integration options, they settled on Kodaris, a cloud-based supply chain platform. Guidance built a custom solution to tie Adobe Commerce and Infor CSD together, with Kodaris serving as the middleware. And after a mild adjustment to the colors in the Reinders style guide, Guidance redesigned the ecommerce site to offer a clean, scannable, polished presentation on both mobile and desktop.

How Business Gets Personal

Reinders prides itself on the engagement, loyalty, and trust they’ve developed with their clients. Their ecommerce site needed to be an extension of those relationships, which meant that personalization was a must. It was also a contractual necessity, as their B2B clients have customer-specific pricing agreements. And Reinders also stressed that B2C customers should never be able to see B2B pricing options.
 
As a result, a B2B client would need to log into their account to see the pricing specific to their business. But if they arrived on the Reinders site and didn’t see the pricing they expected, there needed to be cues to remind those clients to login, rather than jump on the phone to reach the sales or customer service teams. Guidance designed multiple calls to action on the homepage, category pages, and product listing pages (PLPs) to encourage clients to “sign in to see your price.”
 
Once logged in, B2B clients are presented with a dashboard tailored to their needs, including information such as recent order history complete with any ERP side order modifications or suggested items for restocking. The PLPs and product detail pages (PDPs) update to show the client their specific pricing. B2C customers don’t experience the same level of customization – instead, Guidance built content modules within AdobeCommerce that allow Reinders to deploy promotional information or additional product merchandising at will.

Crafting the Experience

A certain shade of green is synonymous with the Reinders brand identity. Guidance made it a key design element, using it to visually pop content modules off the clean white background, or to do the opposite for a similar effect, by embedding a white search bar within a green header space. Orange, a secondary brand color, was used for important but non-transactional call-to-action buttons – to sign in or create an account, or to access information on product labels and safety data sheets.
 
Product listing pages also had to be carefully crafted. Products on those pages were displayed in tiles, and a given tile had to be capable of accommodating a wide variety of data in a very small space. The tiles would also be displayed in a repeating grid, so designing them to appear clean and structured was vital. Guidance placed to calls-to-action (Add to Cart/Select Options) along the same optical line, so none of the tiles would appear staggered to the eye. A rollover effect on hover visually isolates a specific product tile, to provide additional clarity and focus.
 
Another important aspect of the experience, and one not as readily visible, has to do with image strategy. Guidance provided Reinders with an image guide to help ensure the assets they load to the site won’t slow down its performance and won’t bog their team down with asset management activities. The aspect ratio for almost all images is the same, no matter what the device (computer, tablet, or phone). Content modules can shift to present images inthe best light possible, including dynamic cropping of desktop images for mobile devices.

An Unusual Payment Gateway Arrangement

Reinders also chose CenPOS as their payment gateway provider, which is frequently used in conjunction with Infor CSD. By allowing customers to choose which warehouse would fulfill their orders, Reinders would effectively need separate merchant accounts for each warehouse, because eachware house location has its own bank accounts.
 
Unfortunately, the out-of-the-box Magento extension CenPOS offered didn’t have the level of functionality necessary to handle this unique scenario. To make it work, Guidance customized the extension specifically for Reinders to add multi-merchant support. In addition, Guidance also built in support for delivery options (shipping or pickup) and credit terms for B2B clients.