B2B

July 31, 2024

Nuherbs launches a wholesale B2B E-Commerce platform for dietary supplements with Spree Commerce

Nuherbs is a vertically integrated third-generation family business producing, importing and distributing Chinese herbs and herbal supplements. It recently launched a wholesale B2B E-commerce platform with a custom mobile-first user experience fine tuned for repeat customers but also friendly to first-timers. The Spree online platform is integrated with an ERP solution for smooth order fulfillment and optimized accounting and reporting purposes. The platform has been designed, developed and is maintained by Spark Solutions.

The Challenge

For over 30 years Nuherbs has been a successful importer and wholesaler that now sources over 300 different products. Being ahead of industry trends such as traceability allowed the company to scale and become the leading supplier of Chinese herbs. 

In order to secure further growth, Nuherbs needed to: 

• reach a wider audience with a responsive, mobile-friendly website, which even in the B2B space is a must-have
• centralize B2B customer management and relationship nurturing
• provide improved UX for exploring the world of Chinese herbal medicine – informative content management and advanced products filtering and sorting
• ensure streamlined cart and checkout experience suitable for wholesale orders with multiple line items and large product quantities
• automate and streamline the fulfillment process in sync with Kingdee ERP
• promote the Nuherbs brand in a new way, starting from the website, but also thinking about packaging and other aspects of the business

The Solution

Nuherbs and Spark Solutions designed and developed an industry-specific mobile-friendly website serving 5 distinct wholesale client types with a Spree powered E-Commerce platform combined with a content management system for educational story-telling.

Nuherbs offers a wide variety of herbs and herbal supplements to wholesale customers of different kinds and each with quite specific shopping needs. Most are returning customers familiar with the products and ordering multiple line items in large quantities per each order. Streamlining their shopping experience was a topic of several UX discovery and design workshops. The goal was to save their time and effort on frequent orders while allowing them to use their preferred naming convention or favorite product listing view.

On the other hand, there are first time customers who need a more guided shopping experience to be able to explore and appreciate various products offered by Nuherbs. For this customer group a different type of features has been designed. Quick View pop-ups on the product listing page or ingredient breakdowns on the product detail page aid first timers in selecting the products they need.

All product prices are initially hidden from unsigned visitors in order to convert them into registered users. Prices become visible only after user sign in. User sign ups are moderated by Nuherbs admins and all user data is being synced in real time with Kingdee ERP solution for later processing. At the same time call center operators are standing by to support any sign up or sign in attempts or resolve any issues which in case of a B2B business is a service worth having.

Nuherbs’ new wholesale B2B E-commerce platform features:

• Spree integration with Kingdee – number #1 cloud ERP in China
• user management
  • 5 types of users on sign-up for customer segmentation
    • Practitioner
    • Business
    • Manufacturer
    • Student
    • Retail Customer
  • different sign-up form for each user type
  • user verification
    • only verified users’ orders are able to log in and see the full product catalog including prices and place an order
    • Spree admins may disable user accounts
• content and SEO management
  • built-in content management system for:
    • menus
    • homepage content
    • content blocks
    • articles and article sidebars
  • editable article meta information 
  • key article information auto-populated from article title and other fields
  • ability to select article placement on the homepage or website sections
• product discovery
  • product prices visible only to signed in users and hidden from guests
  • product listing sorting by various product name transcriptions
    • PIn Yin (romanized Chinese characters)
    • Latin
    • Chinese
    • Common
  • three product listing views
    • line view with product codes
    • line view with product photos
    • tile view with product photos 
  • search (powered by powerful and fast ElasticSearch engine) in
    • products
    • product ingredients
    • articles
  • related products managed separately:
    • product ingredients sold separately
    • related products
  • product listings with Quick View pop-up with detailed product preview 
  • product detail pages with ingredient breakdown
• cart and checkout experience
  • pop-up displayed on the product listing page triggered by each add to cart action for more transparent UX and less accidental order line items
  • cart dropdown on all pages enabling users to change line item quantity or remove items from cart
  • cart page with displaying line item names in all transcription conventions including unit size and SKU number
  • billing and shipping address book management from both the checkout page and user account page
• payments
  • credit card payment method
  • payment method “On Terms” for selected customers
• shipping
  • estimated shipping cost on order capture for multiple line items
  • adjusted shipping cost synced with Kingdee after order picking
  • free UPS ground shipping for orders over $150 in the lower 48 states, excluding some product categories
• admin dashboard features
  • user management
  • product catalog and inventory management
  • order management
  • shipping management 
  • payments management
  • taxation management
  • refunds and returns management
  • Kingdee synchronization settings
  • miscellaneous configuration settings
• analytics and marketing automation
  • Google Analytics Enhanced E-commerce

Showcase of Nuherbs’ new wholesale B2B E-commerce platform

Top navigation and all content blocks are customizable using the built-in CMS

Three Product Listing Page (PLP) views are available: list view with SKU IDs, list view with product photos and grid view with product photos:

Unregistered users are able to browse the product catalog but cannot see prices which are displayed only to signed-up and verified users. Add to cart button is available after user sign-in.

Clicking on a product visible on the Product Listing Page (PLP) triggers a pop-up with that product’s ingredients.

Each product may be sorted by most popular product name transcriptions (PIn Yin – romanized Chinese characters, Latin, Chinese, Common name)

After signing in, users may click “Add to cart” buttons placed on the Product Listing Pages (PLP) or Product Detail Pages (PDP) which triggers a confirmation popup being displayed for a couple of seconds to reduce the risk of accidental wholesale purchase

Some Product Detail Pages (PDP) contain ingredients list for a product. Searching and shopping for some ingredients separately is also possible. 

Nuherbs’ cart experience was designed to allow easy adjustments to the shopping cart containing multiple line items with large wholesale quantities.

Nuherbs’ wholesale checkout allows for shipping method selection based on estimated shipping cost for each one:

Nuherbs’ wholesale checkout allows users to pick either credit card payment or opt for on terms payment:

For regular returning customers Nuherbs offers a quick order form for easy product code entering without the traditional product exploration and adding to cart process:

Returning customers have also a chance to add products to their favorites which speeds up adding to cart from a favorites list and saves time for regular, wholesale customers:

Nuherbs’ website is also equipped with a content management system for content pages which present informational and educational materials:

Nuherbs’ users may search for either products, news or ingredients using the top nav search box:

Tech Stack & Integrations

• Spree Commerce – E-Commerce engine
• ReactJS – for smooth customer experience

Spree gems used:

• Spree Mailchimp E-Commerce – abandoned cart emails
• Gibbon – MailChimp wrapper
• Braintree – payment provider
• Savon – SOAP client
• Address Validator – UPS street-level validation API
• Chewy – ElasticSearch client
• Paperclip – File attachment manager
• Sidekiq – Background processing
• Aasm – Ruby state machines

Testing gems:

• Factory Bot – Framework and DSL for defining and using factories
• Capybara – Acceptance test framework for web applications
• Vcr – Records test suite’s HTTP interactions and replay them during future test runs
• Webmock – Stubbing and setting expectations on HTTP requests in Ruby

Integrations:

• Braintree 
• Mailchimp E-Commerce
• MyEmma 
• Kingdee

Conclusions:

SPREE SUCCESS STORY

Recently launched custom wholesale B2B E-commerce platform synced with Kingdee ERP keeps Nuherbs scaling up and reaching new audiences more effectively than before. 

“I want to thank all those that came before us that built the foundation that we stand on, especially my parents Pat and Henry who built Nuherbs to be what it is today, celebrating 40 years strong. May family owned business continue and thrive” says Wilson Lau who currently manages Nuherbs family business.

“You are just a custodian ensuring what your family built is rooted in tradition, while modernizing to keep things fresh and relevant.” he adds.

Spree Commerce may be easily customized to any B2B Ecommerce business. Check out how we can help you build a B2B experience you need with Spree building blocks.