Fersa
  • Next.js
  • Strapi
  • Adobe Commerce

Driving Fersa’s Digital Transformation With A Headless B2B Architecture

banner

The need for a digital transformation

When Fersa Group, a leading European bearing manufacturer with a legacy spanning over 50 years, was considering a complete digital transformation, we entered the picture.

The primary drivers for Fersa to consider a fresh transformation were:

  1. Scalability for Multi-Brand Operations: With rapid acquisitions and expansion, Fersa Group required a scalable architecture to seamlessly integrate and manage inventory across multiple brands from a central PIM system.
  2. Unified and Modular Backend: To maintain operational efficiency, Fersa needed a headless architecture that could unify their backend and commerce stack, while isolating systems to better serve the specific needs of their operations, technology, data, and marketing teams.
  3. Personalized Pricing & Customer Experience: A critical need was the ability to create unified customer profiles across Fersa and its subsidiaries, enabling personalized access, CPQ (Configure, Price, Quote) capabilities, and tailored pricing strategies.
  4. Flexible Frontend With A Design System: Fersa aimed to use a common UI library to build modular storefronts over a shared eCommerce stack. This would allow their sub-brands to have flexible frontends, ensuring a consistent user experience.
  5. Advanced Data and Marketing Capabilities: To stay competitive, Fersa sought to enhance their analytics and tracking capabilities, and equip their marketing teams with advanced CMS and page-building tools, enabling data-driven decision-making and agile campaign execution.

Their ERP and PIM systems held a lot of data, with over 17000 customer records and 20000 product entries. We had to make these systems work in tandem.

banner

Objectives

Given the critical nature of an enterprise digital transformation, our goal was to validate our system design through a proof-of-concept (POC) and demonstrate seamless workflows.

Our objectives were to:

  1. Improve the UI/UX and information architecture
  2. Enhance PIM data synchronization for real-time accuracy
  3. Add geo-based site personalization and member-only access
  4. Setup Adobe Commerce catalog with geo-based data setup
  5. Integrate advanced search to access the content and catalog

Since Fersa’s extensive ecosystem had to scale to accommodate sales-assisted interfaces, dealer portals, B2B marketplaces and points of sale, we took a headless approach.

banner

Mapping out a microservices architecture

Storefront: Next.js

Fersa needed a modular and performant front-end for multiple brands based on a design system, so we chose to build this on Next.js.

  1. Fast load times with server-side rendering (SSR)
  2. Flexible, customizable frontend for multi-brand layouts
  3. Component reusability ensures consistent branding

CMS: Strapi

We needed a self-hosted CMS where we could build custom content models.

  1. Headless structure for flexible content management
  2. Custom content types for different regional needs
  3. API-driven for seamless integration with PIM and commerce platforms
  4. Easy to launch landing pages using pre-built components

Commerce: Adobe Commerce (formerly Magento)

Fersa’s extensive (and growing) catalog and complex B2B workflows needed an enterprise-ready commerce layer.

  1. Scalable for extensive product catalogs and multi-brand operations
  2. B2B features like CPQ and personalized pricing can be leveraged
  3. Integrates smoothly with other enterprise systems

With this in place, we got to work.

banner

Streamlining systems for feature improvements

While the POC threw us some curveballs, we learned quickly and pivoted accordingly.

Diverse Data Structures: Integrating Fersa's ERP with Magento was tricky because they used different data structures. We developed custom APIs to ensure smooth data flow between systems, particularly for customer information, orders, and inventory levels.

Real-Time Data Updates: We noticed that data was loading slowly, especially for pricing and stock information. We implemented efficient caching methods and real-time update mechanisms to improve performance and provide users with accurate, up-to-date information.

Advanced Search Functionality: Integrating Algolia Search required careful planning to handle Fersa's large product catalog effectively. We created custom filters for dimensions, application types, and 50+ product attributes, balancing search accuracy with speed.

Customer-Specific Pricing: Implementing varied pricing structures for different customer types (guest, registered, customer) required complex rule sets. We developed a system that could handle these diverse pricing needs while maintaining performance.

Multi-language Support: As Fersa serves a global market, we needed to implement robust multi-language capabilities. We used Strapi's flexible content management features to handle translations and region-specific content efficiently.

banner

Adding features to Fersa’s B2B architecture

We improved many parts of Fersa’s B2B eCommerce platform to make it smooth, engaging, and efficient. Our approach was guided by a deep dive into what Fersa and their customers needed.

Customer Portal Enhancement

We upgraded the customer portal to give users tiered access, and personalized customer profiles and accounts so that buyers can easily manage their orders, lists, and RFQs. The integration of Algolia Search significantly improved product discovery.

Personalization and Analytics

To make the purchase experience smarter with data, we built a data layer to track clicks and scroll. This provided valuable insights on customer behavior for targeted marketing and dynamic pricing and discounts, leading to more effective campaigns.

Streamlining Order Processing and Management

Improving order processing was a key step. We streamlined customer and product information in a secure Adobe Commerce (Magento) environment. We also improved stock tracking and simplified the checkout process, with an aim to remove friction and drive conversions.

Product Page Enhancements and Stock Logic

Our UI/UX team redesigned the product page with rich data and recommendations, with added options to download PDFs for customer education. We added smart stock rules to ensure accurate stock levels across geographies, and dynamic pricing based on customer profiles.

Order Upload Functionality

To facilitate bigger orders, we introduced a feature to upload custom orders through Excel. This will make checking and confirming orders way faster and less of a headache.

Dynamic Pricing & Payment Options

Right from the start, we wanted the buyer experience to be personalized and data-driven - so we extended this by introducing dynamic pricing and maximized the checkout process with flexible payments through API integrations.

Project Credits

Magento Team Lead

Saurabh Sahu

Development

Vignesh Karthik Reddy Manikandan AR Mousumee

Project Management

Shubha