eCommerce development
We worked with Bendix to design and build an eCommerce addition to their public website, and create a test-and-learn strategy for CRO.
The brief
Bendix wanted to add an eCommerce functionality to their existing website, to allow them to sell merchandise products directly to their customers. We worked with Bendix to build integrations with Craft Commerce, PayPal, SmartFreight, and SAP to bring the eCommerce project to life.
What we did
Laying the groundwork
To kick off the project, we gathered all stakeholders together for a vision and discovery workshop. Here, we determined the scope and requirements of the project, as Bendix saw them, and identified roles and responsibilities for all team members. Given that this project would touch elements of the business that had not previously been involved in website operations (such as fulfilment and finance), we took this opportunity to develop the new stakeholder relationships that would be required, and align on ways of working.
Mapping the system architecture
To provide all stakeholders with a clear view of how the different systems would work together, we created a system architecture map. With swimlanes representing each system (Craft Commerce, SmartFreight API, PayPal, the Bendix website, and SAP), the map showed the flow of data into and out of each system, and where actions would be taken by both Bendix and the end user.
Designing for continuity
Because the eCommerce functionality would be an addition to the existing Bendix website, its design needed to be compatible with the existing styles and patterns established across the site. We began the design phase by mapping out the exact functionalities available out-of-the box with Craft Commerce. From here, we were able to design the flow of the eCommerce experience, applying the UX and UI stylings already in place elsewhere across the site.
This was particularly important for product pages, which needed to closely resemble the parts pages already in use in the Bendix catalogue. Maintaining consistency between these two page templates ensured that the eCommerce functionality was future-proofed, in the event that Bendix wished to add more products to their store in the future.
Throughout the eCommerce flow, we took care to implement progress indicators and active states so that users would always recognise their selections and understand where they were in the purchase journey. We also undertook a redesign of the site’s navigation to better draw attention to the new shopping cart icon and the ‘Merchandise store’ navigation label.
How we did it
Product integration through Craft Commerce and PARtsDB
In 2021, we undertook a performance enhancements project for the Bendix website, upgrading the PARts DB API that pulls products from the Bendix catalogue into the website. Using the same structures we devised to support the API upgrade, we were able to create new product types to suit the Bendix merchandise products, and pull them into Craft.
While the scope of this project was limited to merchandise products, we took care to ensure that all our development work was future-proofed, in case Bendix wanted to add further product lines to the online store in the future. A unique requirement of the Bendix product pages is the ability to switch between variants of a product. For merchandise products, the available variants were limited to garment sizes or colours; Bendix parts products however, are available in many variants and brands, each of which carries its own metadata, specifications, images, and SKU. To account for this, we developed product pages that would allow the user to switch between variants using a dropdown menu, which would then dynamically update the product information shown on the page. This solution provides Bendix with the flexibility to roll out their eCommerce solution to other products to the merchandise store in the future with minimal development.
Shipping integration through SmartFreight
Craft Commerce also needed to integrate with Bendix’s shipping partner, SmartFreight. We built a custom plugin to connect to the SmartFreight API, which calculates shipping costs for an order using the buyer’s address and the weight and physical dimensions of the order contents. Once the API receives the data, it supplies the plugin with various shipping options under different carriers, and the plugin filters this list down to Bendix’s preferred carrier partners. This data is then assigned to one of two custom shipping methods we created in Craft Commerce (Standard shipping and Express shipping), and are displayed to the user on the front end as a radio button in the checkout process.
Communicating orders and stock levels to SAP
To ensure orders placed through the website were registered with Bendix’s warehousing team and able to be fulfilled, the Craft Commerce system needed to connect to SAP. SAP provides Bendix with information about stock levels of different products, and is also used to record and fulfil customer orders across their online and offline distribution channels. Due to limitations of the Bendix SAP system, the connection between Craft Commerce and SAP could not be achieved through a direct integration. Instead, we worked closely with Bendix to develop an automated plugin that would export all customer orders placed through Craft Commerce into a CSV format, and upload them to an S3 bucket in AWS. Bendix then created an automation that would pull information down from this bucket every hour, and import it into their SAP system.
Because Bendix sells through offline touchpoints (such as phone and sales representatives), the stock levels coming through to the website needed to accurately reflect the stock in their warehouses. To achieve this, we worked with Bendix to develop another plugin-based automation that downloads stock levels from SAP every hour and uploads them to an S3 bucket. We then used Step Functions to develop a scheduled task that searches the S3 bucket for the SAP file, identifies stock levels for each SKU in the merchandise store, and updates them in Craft Commerce.
Secure payment through PayPal
The eCommerce system uses PayPal to process customer payments securely. PayPal integration is available out-of-the-box through Craft Commerce, and only requires minimal configuration. The integration provides users with the option to pay with a PayPal account, or via credit card, with both payment types processed securely through PayPal.
Solution
The eCommerce platform allows Bendix to manage incoming customer orders and payments easily. Craft Commerce integrates seamlessly with PayPal and SmartFreight to provide users with simple and effective payment and shipping options. Through the use of custom plugins, we were able to work with Bendix’s fulfilment technology stack, to provide flexibility in supporting their technical and process requirements.
Working through the different integrations of this project was a good development challenge. Craft Commerce provides us with the ability to fully configure products, the same way we can configure entry types, which is perfect for Bendix’s product needs.
Let's work together
Get in touch