A brief background on Husqvarna Motorcycles and Moto Pro GmbH

Husqvarna Motorcycle is an Austrian motorcycle manufacturer of Swedish origin. Husqvarna specializes in designing, engineering, manufacturing, and distributing of motorcycles for motocross and other moto sport-based competitions. In 2013, Husqvarna was acquired by KTM AG. Moto Pro GmbH is a distributor of Husqvarna Parts and Motorcycles.

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. Our team had to conduct an extensive analysis of their website source code and requirements to identify key development challenges.

Migrating from FactFinder search to Solr Hosted Search: Moto Pro GmbH’ search services for their website utilize FactFinder, a search service provider that enables extensive search features such as fast indexing, predictive search, and auto-completion. In order to optimize the search experience on their storefront further, they wanted the search to be migrated to Solr hosted search in order facilitate these changes. We had to find a way to integrate Solr services while also accounting for their existing site data and functionality.

Generate SEO-friendly URL Names and Pagination: An additional challenge of FactFinder search migration to Solr was handling search result URLs. As these URLs come from their own database, our team had to develop a way to bind these URLs to product data from nopCommerce and also fetch SEO-friendly URL data to build SEO-friendly URLs for the search results pages.

Developing a Spare Parts Finder Module: One of the most challenging development requests from Moto Pro GmbH was developing a moto part search function for their hqvshop.de website. 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.

Developing a New Website Design with Optimized Performance: Besides these purely functional changes, Moto Pro GmbH requested several UI enhancements on several pages and faster loading times. Our team used its UI & UX expertise to conduct R&D on implementing a more intuitive UI/UX for these enhancements while also optimizing loading speeds.

Developing Shipping Solution for DHL: Husqvarna requested shipping integration with DHL services for shipping across all regions of Germany. We had to develop a way to enable DHL shipping integration for the website.

Developing a Way to Highlight Storefront Announcements: Husqvarna wanted a way to show storefront updates and announcements to customers when they land on the homepage. They this to be handled in a way where customers can see the announcements but the UX not to obstruct the shopping experience.

Our Solution

To finalize a development roadmap for the Moto Pro GmbH'hqvshop.de project, we conducted an extensive R&D and audit of Husqvarna’s requirements, existing website, and codebase. Our team 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, we 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.

Image 1.2: 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.

Image 1.3: Newsletter updates for saved bike

Developing a Spare Parts Finder Module with Parts Visualization:A major development challenge for our team had been to develop a custom parts search module. We 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. We built a search module that lets customers search for parts based on terrain, category, year, bike model and variants, frame parts, and engine parts.

Image 1.4: 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. Our team went through extensive trials 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.

Image 1.5: Visualization UX for spare parts

Developing a Custom Theme and Enabling CDN Support:Our 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. We developed custom popup-based views for taxation and privacy policies to create a more immersive shopping experience.

Image 1.6: Custom UX with estimated shipping

In order to web page load times and image resources, our 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 we 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 make convey store updates and info to customers in a more elegant and unobtrusive way, we developed an announcement bar plugin as well. 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

• Developed Solr hosted search plugin for enhanced and fast searching experience
• Implemented robust parts finder module with interactive parts visualization
• Helped establish brand identity through new theme and design
• Improved website load speeds through the CDN integration plugin
• Enabled SEO friendly URL binding for storefront search results page URLs
• Enabled image optimization through tinyPNG Image Compressor plugin
• Developed announcement bar plugin for seamless storefront announcements
• Developed DHL shipping integration plugin