Moto Mader AG’s motoshop24.ch: A nopCommerce Website Transformation Journey

A brief background on Moto Mader AG

Moto Mader AG is a Swiss company whose business consists of the sale of new and used motorcycles, motorcycle parts, apparel, and accessories. With years of experience in the automotive industry and a reputation for quality across its outlets, Moto Mader AG wanted to ensure the same quality of service and user experience across its online stores for its customers throughout Switzerland and other European markets.

Challenges

Moto Mader AG approached nopStation with its existing website built on nopCommerce version 4.20. They wanted to implement several new features and enhancements on its website as well as make aesthetic changes. Throughout the analysis and auditing process, we identified the associated development challenges for the implementation of the new features and improvement, based on the given requirements and its existing codebase.

Implementing search using FactFinder: One of the most significant development challenges for our team was developing integration with FactFinder, a search service that provides features such as fast indexing, auto-completion, and prediction. Moto Mader AG requested integration with FactFinder for an enhanced searching and filtering experience.

Handling FactFinder URLs with SEO-friendly URL names and pagination: Another challenge we faced in implementing the FactFinder search integration was using FactFinder responses to generate search result pages on the eCommerce Storefront. As the retrieved data comes from FactFinder’s database, our team had to develop a way to fetch and bind the data from FactFinder with the data from nopCommerce to generate accurate and SEO-friendly product URLs, page titles and product names on the search result pages.

Implementing a bike finder module with model saving feature: Moto Mader AG asked for developing a bike finder feature where they wanted their customers to have the ability to save certain bike models and configurations for repeated searches. Our team had to develop a way to integrate this functionality into the bike finder feature.

Developing a custom parts finder module: One of the most challenging development requests from Moto Mader AG was developing a moto part finder function for their motoshop24.ch website. This presented a major engineering challenge as the searching and filtering had to account for terrain, category, year, bike model and variants, frame parts, and engine parts. In addition, Moto Mader AG requested that the parts should be visually mapped with the spare parts manual image for better visualization.

Implementing custom stock-keeping attributes based on client requirements: Moto Mader AG requested custom stock management features to better reflect their product line, warehouses, and stores. We had to analyze and determine if these required changes should be developed through source code customization or through a plugin-driven development approach.

Simplifying ordering and tax calculation: Moto Mader AG requested several customizations to the ordering process on motoshop24.ch including the ability to request part certifications for orders, the ability to add assembly requests and instructions and a way to handle reorders if a part or model was out of stock. Another part of the customer ordering process was to add custom tax calculations for localized markets.

Adding custom validation rules for localized phone numbers and addresses: Moto Mader AG requested custom validation for the phone number and location fields due to its localized client bases. Due to this, our team had to find a way to add custom validation rules for these fields.

UI enhancements and customizations: Besides these core functional changes, Moto Mader AG requested several UI enhancements on various pages as well to provide a better user experience. Our team used its UI & UX expertise to conduct R&D on implementing a more intuitive UI/UX for these website enhancements, including using a customized version of its OCarousel plugin to improve product presentation.

Our Solution

To achieve all of its development goals for the Moto Mader AG project, we conducted a thorough audit of the business requirements alongside research to finalize its development strategy for the project. Due to working with an existing codebase, our team utilized a mostly custom development approach on top of the existing system to implement all of the new functionality.

Developing a FactFinder-based search module with a custom URL builder: Our team developed a module for FactFinder search Integration. Our team also developed a URL builder to implement a custom search results page based on the FactFinder search module. The URL builder takes the FactFinder URLs and product ID-based mapping to bind website product data to build SEO-friendly URLs and other product information from Moto Mader AG’s database. This URL builder ensures seamless, accurately mapped product information and search results on the website with pagination.

Image 1.2: FactFinder search results page

Developing a spare parts finder module: The most significant development challenge for our team had been to develop a custom spare parts finder module. We had to go through significant R&D to not only develop a search UI that was optimized for spare moto parts but also integrate visualization for moto parts. Our team worked to integrate a robust search mechanism based on terrain, category, year, bike model and variants, frame parts, and engine parts. We also integrated searching with MFK numbers for more enhanced spare parts searching.

Image 1.3: Spare parts finder

Adding visualization and mapping for spare parts: Developing a visualization with the bike parts manual to highlight the parts, their quantity, and their placement presented a significant development challenge. To implement this, we conducted extensive R&D and trials to implement a coordinate-based mapping for each part of its assembly/instruction manual. When the mouse is hovered over a specific spare part on the parts list or in the manual image, it shows the part's name, price, and base quantity of purchase. The pop-up includes a quantity adjustment button and an add-to-cart button for more accessibility. This created a more intuitive UX and increased usability significantly.

Image 1.4: Spare parts visualization

Implementing an adaptive bike finder with model saving feature for faster searches: To make future or recurring search queries faster for the registered customers, our team implemented a custom bike finder functionality with the ability to save bike models. A registered customer can save bike models after or during a search. When a bike model is saved it shows up in a carousel under the search menu. Now, for repeated searches, a customer can simply click on a saved Bike model from the carousel. This feature not only makes the search experience faster but provides a UI that is personalized to customers.

Using custom attributes and validation rules to handle products and localization: To handle the various product SKUs and variants of Moto Mader AG, we used custom product attributes and made some customizations to the source code as well. This made handling different product variants and specifications much more convenient and made the management of products more streamlined.

To handle localized phone numbers and addresses, the development team had to add custom validation rules based on local phone number patterns and addresses. With some custom development, the team implemented these localization changes and created a localized validation system for the website at both the front and back end.

Creating a simplified ordering experience with localized taxation: Our team implemented a more simplified ordering process with localized tax calculation along with tax calculation breakdowns and tax policies which are shown in a pop-up on the order page.

Image 1.5: Custom popup for policies

The team also found a way to resolve the products’ unavailability issue by removing the item from the order in case of re-orders with an alert message shown to the customer. Now, when a previously ordered item is not available in a re-order purchase, it gets removed from the cart and the customer is shown a pop message about the product’s unavailability. This not only simplified the product ordering process but enhanced the UI & UX as well.

Image 1.6: Simplified ordering and taxation

Results:

• Implemented robust spare parts finder module with active visualization
• Integrated FactFinder search services for faster search
• Implemented URL builder to transform and bind SEO-friendly URLs
• Implemented bike finder with bike model-saving functionality
• Created a localized shopping and customer experience
• Simplified product management through custom stock-keeping attributes
• Simplified ordering and tax calculation

nopStation is a Gold Solution Partner of nopCommerce and an eCommerce wing of Brain Station 23 Ltd., a top-ranking software development company, headquartered in Dhaka, Bangladesh. At nopStation, we design, build and enhance eCommerce solutions on top of the nopCommerce platform for clients of all business sizes. The company has technology partnerships with 12+ leading ISVs including, Microsoft, Google, and AWS. We help our customers build their business online by developing the right eCommerce solution using nopCommerce at a competitive price and reasonable timeline.