Moto Pro GmbH’s: A website transformation story through nopCommerce

A brief background on Husqvarna Motorcycles and Moto Pro GmbH

Moto Pro GmbH is the official German Husqvarna dealer. Husqvarna Motorcycles is an Austrian motorcycle manufacturer of Swedish origin. Husqvarna specializes in designing, engineering, manufacturing, and distributing motorcycles for motocross and other moto sport-based competitions.

Challenges

Moto Pro GmbH approached nopStation with its hqvshop.de website for Germany, built on nopCommerce version 4.20. They requested the development of several new features and extensive optimizations for the UX on their website.

The main changes requested by the client were:

• Migrating from FactFinder Search to Solr Hosted Search: In order to optimize the search experience on their storefront further, the client wanted the search to be migrated to a Solr-hosted search while also accounting for their existing site data and functionality.
• Creating SEO-friendly URL Names and Pagination: As search result URLs come from their own database, they needed to be bound to product data from nopCommerce and fetched SEO-friendly URL data to build SEO-friendly URLs for the search results pages.
• Developing a Spare Parts Finder Module: This presented a massive engineering and development challenge as the searching and filtering had to account for terrain, category, year, bike model and variants, frame parts, and engine parts. Moreover, Moto Pro GmbH requested that the parts should be visually mapped with the bike manual image on the parts for better visualization.
• New Website Design with Optimized Performance: Besides these purely functional changes, the client requested UI enhancements on several pages and faster loading times.
• Shipping Solution for DHL for shipping across all regions of Germany.
• Highlighting Storefront Announcements without obstructing the shopping experience.

Solution

To finalize a development roadmap for the project, nopStation conducted an extensive R&D and audit of the requirements, existing website, and codebase, and utilized a custom development-driven approach for adding new features and enhancements on top of the existing codebase.

Developing a Solr Hosted Search Plugin and a Custom URL Builder: To enable Solr search services on their storefront, our team developed a Solr Hosted search plugin for them. This plugin helped preserve their existing search functionality and facet data while also adding various optimizations and features enabled through Solr such as typo tolerance, anagram-based search, customer search results ranking through facets etc. Moving to Solr also helped them take more control over their search services as it is an open-source hosted service as opposed to factfinder that helped them optimize costs as well.

To handle the challenge of building accurate product pages and SEO-friendly URLs, the team developed a custom URL builder that binds search results and URLs with data from the website’s nopCommerce database. The URL builder utilizes product-id mapping to fetch accurate product data and SEO-friendly information to build a custom search results page.

Developing a Bike Search Feature with Newsletter Subscription: To help make searching for specific bike parts and accessories more streamlined and interactive, nopStation developed a bike search feature. This feature lets users enter their bike terrain, model and year and click to find associated accessories for the model. Users can also save models for instantly searching later.

Bike Search with save bike option

To help enhance the user experience further, users are also shown a subscribe to newsletter option after saving their bike model to get updates on new parts and accessories, helping to facilitate a more personalized user experience

Newsletter updates for saved bike

Developing a Spare Parts Finder Module with Parts Visualization: nopStation had to conduct significant R&D to not only develop a search UI that was optimized for bike parts but also integrated parts manual visualization. nopStation built a search module that lets customers search for parts based on terrain, category, year, bike model and variants, frame parts, and engine parts.

Spare parts finder

The next part of this challenge was adding visualization with the bike parts manual to highlight the parts, their quantity, and their placement. Extensive trials helped to come up with the solution of a coordinate-based mapping for each part with its manual. When the mouse hovers over a specific part on the parts list, it marks out the part in the bike manual image. This helped improve parts visualization.

Visualization UX for spare parts

Developing a Custom Theme and Enabling CDN Support: UI & UX team designed & developed a fully custom theme to implement extensive UX enhancements for hqvshop.de. This theme came with several UI enhancements and responsive components for faster load times and provided an elegant look. Custom popup-based views were developed for taxation and privacy policies to create a more immersive shopping experience.

Custom UX with estimated shipping

In order to web page load times and image resources, the team developed and integrated a custom CDN integration plugin that offloads images from the website to a CDN server. Having CDN integration increases loading speeds significantly and adds more efficient management for image resources on the website.

Enabled Image Optimization through TinyPNG Image Compression Plugin: To help optimize images further nopStation also developed a tinyPNG image compressor plugin that compresses website images before serving them to the CDN.

Developed Announcement Bar Plugin for Enhanced Store Alerts: To help convey store updates and info to customers more elegantly and unobtrusively, nopStation developed an announcement bar plugin. This plugin lets them set announcements and configure announcement availability as well. These announcements are shown on top of the homepage in an unobtrusive bar.

Developing DHL Shipping Plugin for Shipping Integration: To enable DHL shipping services on the website, we developed a DHL shipping integration plugin. Developing the plugin from scratch took significant development time and effort from the team. The DHL plugin lets the admins easily add DHL as a shipping provider and create DHL shipments. The plugin also generated DHL shipping labels and the ability to download them for added flexibility.

Results:

• Solr-hosted search plugin for an enhanced and fast search experience
• Robust parts finder module with interactive parts visualization
• Established brand identity through new theme and design
• Improved website load speeds through the CDN integration plugin
• SEO-friendly URL binding for storefront search results page URLs
• Image optimization through the tinyPNG Image Compressor plugin
• Announcement bar plugin for seamless storefront announcements
• DHL shipping integration plugin

We, nopStation, are a gold solution partner of nopCommerce and an eCommerce unit of Brain Station 23 Ltd., a top-ranking software development company with a global presence. At nopStation, we design, build and enhance eCommerce solutions on top of the nopCommerce platform for clients of all business sizes. We are a highly skilled team of .NET Developers, PMs, Architects, DevOps, QAs, BAs and UI/UX designers, including nopCommerce Certified Developers & MVPs. We specialise in custom B2B and B2C eCommerce development, including Themes, Plugins, and Mobile Apps development and third-party integrations and performance optimizations. We help our store owners build their business online by developing eCommerce Solutions at a competitive price and reasonable timeline.