nopStation: A website renovation and migration journey from nopCommerce version 4.30 to 4.50
A brief introduction of nopStation
nopStation is a Gold Solution Partner of nopCommerce, and an eCommerce Solution Provider wing of its parent company, Brain Station 23 Ltd, with a team of 100 plus eCommerce professionals, of which 60+ are nopCommerce Certified Developers and 3 are nopCommerce Certified MVPs. The team at nopStation is a highly skilled unit of .NET Developers, Architects, DevOps, QAs, Business Analysts, and UI/UX Designers, including nopCommerce Certified Developers and MVPs. With specialization in custom B2B and B2C eCommerce development, nopStation excels in developing Themes, Plugins, and Mobile Apps in both Android & iOS platforms using Native, Flutter, and Ionic technologies.
Why is nopStation upgrading its website from version 4.30 to 4.50
nopStation believes in continuous improvement and innovation, and with that being our ideology, nopStation felt that it was the right time to upgrade its website from nopCommerce version 4.30 to 4.50, as nopCommerce has brought a multitude of performance improvements in the latest version of nopCommerce, version 4.50. However, the team at nopStation decided to use the site migration opportunity to try and implement key improvements and new features to renovate its website. The goal was to make the nopStation website a showcase of nopStation’s development expertise and the ideal showcase of its product line. Our team at nopStation felt that there were several areas for improvement to the existing nopStation website in nopCommerce version 4.30.
Goals and Challenges
The team at nopStation started its website renovation journey by thoroughly auditing its existing website and identifying improvement metrics for performance, user interface, user experience, product management, and usability. After completing its audit, the nopStation team identified the following development goals and challenges.
Increasing website performance on mobile and desktop to 100%: Performance is at the core of any great website or application. Over time, nopStation felt its previous website’s performance left much room for improvement due to the design and technology being outdated, and other inefficiencies. All these factors let nopStation set a goal of increasing site performance to 100% with its new website.
Changing product management process: One of the biggest challenges for nopStation during its migration had been changing the way nopStation managed its products. In version 4.30 of its website, nopStation used a grouped product-centric approach for managing its products and version management. This approach was quite inefficient as it needed to create a new product every time a new version of a particular product was required to release. This led to the duplication of the same products and unnecessary price calculation complexities. Simplifying this entire process presented a major challenge when it came to restructuring the way nopStation planned to handle products using simple product features and migrating the product data from group products to simple ones.
Changing the licensing structure: nopStation’s previous product licensing process lacked a level of automation and was quite a bit of a hassle for customers and it was inconvenient too for the admin users to manage the licenses of different product versions in orders. The team at nopStation wanted to simplify the product licensing process for customers while making its internal management more efficient.
Simplifying the customer’s checkout journey: The previous version of nopStation’s website had a multipage order completion process which the team felt to be time-consuming for customers and unintuitive. The nopStation team wanted to simplify the order checkout process and create a faster checkout experience for customers.
Providing a more robust and natural search experience: The default search implementation in nopCommerce is quite basic. While nopStation had an enhanced version of search on its version 4.3 website, the team felt the search experience lacked user-friendliness in UI/UX and had enough room for improving the presentation of the search results. To add another level of enhancement to this, nopStation wanted to present a more organic, streamlined, and faster-searching experience for its customers.
Improving the UI/ UX: Over the years, nopStation website design and UX had become outdated compared to the rest of the market. With that being the case, nopStation wanted to completely redesign its website UX and theme with attractive design and responsive components to showcase its product line and appeal to a global customer base.
Improving the customer support system: The customer support and helpdesk Ticket interface in version 4.3 of the nopStation website lacked features and user accessibility. The team at nopStation wanted to completely rebuild its helpdesk features to provide a more robust customer support system where helpdesk tickets could be tracked and resolved efficiently and smoothly, with new searching and filtering options at both the storefront end and the admin end.
Migrating to the latest version of nopCommerce: As a nopCommerce Gold Solution Partner, nopStation felt it is due time that its own website to be developed using the latest version of nopCommerce with all the new features and optimizations present in the latest version of nopCommerce, version 4.50.
Our Solution
To achieve all of its development goals for its new website, the team at nopStation conducted a thorough audit of its previous website's UI/UX Design, architecture design, database design, and functionality and conducted extensive research to finalize its development strategy for developing its new website and migrate to the newest version of nopCommerce. nopStation completed its development with a plugin-driven development approach with no default source code customization.
Creating a new theme and UX design optimized for performance: To develop a fresh and responsive new design that can also increase performance to 100%, the UI/UX and development team at nopStation worked in close collaboration to enhance its theme that features a stylish and elegant look, built with responsive components.
Image 1.2: Smart Mega Menu
To increase website performance goals to 100%, nopStation also worked to optimize its image storage and loading mechanisms. This allowed the team to develop the nopStation custom theme and make it fully compatible with nopCommerce version 4.50.
Image 1.3: Product Details Page
Developing a newer version of nopStation’s Algolia plugin for faster and more intuitive search: To provide a more natural and intuitive search experience, nopStation developed a newer version of its Algolia Search Integration plugin. This new version of the Algolia plugin is optimized for searching based on tags, product names, and descriptions. In addition, the search page itself is redesigned with tag-based filtering for faster product search results.
Image 1.4: Algolia Search Result Page
The plugin adds advanced filtering options to nopStation websites like product rating, price, and category while it also adds in-category product searching functionality. This makes the search experience lightning-fast and more accessible to customers and provides an exponentially superior search experience over the default nopCommerce search.
Image 1.5: In-Category Product Search
Using nopStation’s One Page Checkout to simplify Order completion: To create a simpler and more streamlined order completion process, team nopStation integrated its One Page Checkout plugin on its new website. This plugin makes the checkout process much faster by putting all the necessary order completion information on a single page.
Image 2.1: One Page Checkout Page
This plugin also contains an autofill feature for registered customer info like billing address, shipping address, and other credentials that make the check-out process faster than ever before. This lets customers complete their checkout in just a simple click.
Enhancing the License Plugin to handle product licensing: nopStation's previous product management and licensing structure left much room for optimization. To implement better product management and licensing process, nopStation came to a decision to move from grouped product features to simple products feature. The team also decided to add improvements to its existing license plugin to achieve a more streamlined license management process. With all these improvements in mind, the team developed a product version feature in its license plugin where each product has a version, and the versions allow managing products conveniently, as, through this plugin, the download resources can be added to each version and can be allowed to download when ordered by customers. This reduces product duplication and pricing configuration which had been a major challenge with the previous version of nopStation’s website.
As for the migration of product data itself, our engineers worked to create a migration script that let us migrate our old, grouped product data to the simple one for the new system. The logic development for the script took a lot of engineering effort, problem-solving and testing to finalize and implement. However, the final script worked as designed and allowed us to migrate our product, product attributes, product attribute-specific price, order, product versions, downloadable items, license and customers in a matter of seconds.
Image 2.2: License Key Info in Order Details Page
The new approach has also let nopStation implement a superior licensing structure as well. When a customer purchases a product, a license key is generated for all of the product versions. Now, the customer can go to their order details page and find the product licenses, along with the downloads with a convenient copy button for easily copying the license and applying it in their system. This also implements the feature, that as per nopStaton’s licensing policy, a customer is provided with any new product versions that are released within one year of the purchase date.
Developing a Helpdesk Ticket plugin to provide richer customer support: The team brought a richer customer support experience by bringing improvements to the existing Helpdesk Ticket plugin according to its needs. This new Helpdesk experience features a robust, rich editor on the public storefront with text formatting, linking, and image upload options while on the admin side, the plugin provides rich searching, filtering and tracking functionality, making it convenient and efficient to deal with the tickets. This lets customers express themselves and their issues with more clarity while handling tickets is much more effective, faster, and convenient for the admin users because of the more streamlined admin interface.
Image 2.3: Create Ticket Interface
Minimal downtime for migration: Because of team nopStation’s collaboration, extensive planning, and development, nopStation has been able to successfully complete its site migration in a matter of minutes. This lets the team at nopStation continuously serve customers and provide support immediately right after completing the migration.
Results:
- Website performance increased to 100%
- Faster and natural product search
- One-page order completion
- Streamlined licensing process
- Robust Helpdesk ticket and customer support
- A modern and intuitive user experience
- Migration to nopCommerce version 4.50
Image 3.1: 100% Performance in Google Page Speed Insight