Airloom: A South African brand’s journey of website transformation from nopCommerce 4.20 to 4.60

A brief background on Airloom

Airloom is a South African home decor business started in 2012. They specialize in selling rugs, carpeting, and flooring materials to consumers who are looking to elevate their home decor. They are a proudly South African brand, serving through their online store as well as their retail outlet in Woodstock, Cape Town.

Challenges

Airloom was seeking an extensive renovation of their existing website and was looking for a solution partner to help them achieve this. Upon discovering Airloom's quote request on the nopCommerce platform, nopStation initiated formal contact with Airloom. Subsequently, Airloom chose nopStation and its development team for the website's renovation project. Airloom's existing website operated on an outdated version of nopCommerce, plagued by severe performance issues and offering an uninspiring customer experience.

In addition to upgrading and renovating the site, Airloom had a strong desire to revamp the website's UI/UX to better align it with their brand image and enhance the overall customer experience. Our development and UX team thoroughly audited the website to pinpoint key issues and conducted extensive requirement gathering for the development

Identifying and fixing caching and performance issues: Airloom’s previous website suffered from slow performance, extended load times, and several other areas lacking optimizations. Our development team had to conduct a thorough analysis and audit of their existing website’s codebase and data to identify these issues and formulate solutions.

The previous site ran on an older version of nopCommerce 4.2: Airloom's previous website was built on nopCommerce version 4.20, an older iteration lacking numerous features, performance enhancements, and security updates found in newer nopCommerce versions. Therefore, in addition to improving features and performance, Airloom sought an upgrade to nopCommerce 4.60 during the development process.

Developing an adaptive and customizable rug-building experience: Airloom's primary request was to replicate the in-store rug shopping experience on their online platform. Many customers engage in a tactile process of mixing and matching various rug attributes to find their ideal choice in a physical store. Airloom aimed to offer this immersive shopping experience online, with an emphasis on customizing their product line. Developing a solution to mirror this workflow posed a significant challenge for our team.

Building a UX that reflects branding and identity: Airloom placed a strong emphasis on ensuring that their new solution's UX design reflected their brand identity. They aspired to achieve a stylish and visually appealing interface while maintaining alignment with their existing brand image and product range. Our team of UX experts worked collaboratively to develop a design that would meet these objectives, conducting in-depth UX analysis throughout the process.

Unintuitive customer experience: One of the major complaints from Airloom regarding their previous website was their customers suffering from a poor user experience. In addition to the previously mentioned performance issues, the site's user experience was unintuitive, with specific pain points in key areas like the checkout process. Our team had to identify critical user experience workflows to streamline the shopping experience in Airloom's new solution.

Image optimizations: One of the major deficiencies of Airloom’s previous site was the lack of image optimization. It featured a mix of various image formats and unoptimized image sizes not suitable for the web. Our team had to formulate a smart image optimization system to enhance the quality and performance of their storefront.

Developing a product inquiry feature with email integration: Airloom wanted to implement an inquiry feature on their site to allow customers to easily ask questions. They desired the ability to associate this feature with specific products and receive customer inquiries via email.

Reducing spam and bot registrations: Airloom highlighted the challenge of dealing with bot registrations, resulting in spam content on their website. They were seeking a solution to mitigate this issue and enhance security on their site.

Blog enhancements: Airloom places significant importance on their blog content, using it to offer extensive home decor resources and product showcases to their customers. They aimed to improve the organization of their blog sections to enhance content accessibility for their customers.

Adding support for Google Analytics 4 and Google Ads scripts: Airloom sought to integrate Google Analytics 4 and Google Ads scripts into their new website to enhance eCommerce tracking and advertising capabilities. Our team had to develop a way to integrate Google Analytics 4 and Google Ads into their site.

Our Solution

To achieve all of our development goals for the Airloom project, we conducted a thorough analysis of the business requirements alongside research to finalize the development strategy for the project. On the UX and design side, our UI designers and engineers developed a unique user interface based on their requirement analysis. For development, our team utilized a mostly plugin-driven approach with some source code customizations.

Upgraded site to version 4.60 from 4.20 with performance optimizations across the board: Our development team worked on upgrading their site, data, and assets from nopCommerce version 4.20 to 4.60. This allowed the solution to utilize performance enhancements and security advancements present in the newest version of nopCommerce. We also ensured a smooth data migration and upgrade of their existing nopCommerce plugins, such as upgrading the PayFast payment plugin from nopCommerce 4.10 to 4.60. Our team worked diligently to ensure that the migration to the new solution went smoothly.

In addition to the site upgrade, we extensively focused on site performance optimization at multiple levels. We identified and resolved caching issues across the site to improve loading times. To ensure image optimization, we developed a Next Generation images plugin using the Magick.NET package to convert non-webp images to webp and serve them on the storefront. With this plugin, whenever a non-webp image is detected, a webp version of that image is generated and used on the storefront. This plugin ensures image optimization across the site by utilizing webp with its browser-friendly size and format, which helps significantly reduce load times.

Custom rug builder with product preview visualization: To replicate the shopping and customization experience found in their retail stores for rug-like products, our team developed a rug builder plugin with 3D product preview. This plugin adds a custom section in the storefront header that customers can click to access the builder page. This builder allows their administrators to easily configure rug attributes such as shape, design, color, trim, and size. As users select each of these attributes, they can also view a 3D preview that changes based on their selections. Product details and pricing are adjusted accordingly based on the selected attributes, allowing customers to access a product summary in the product details section, providing a quick overview of their custom-built rug. This immersive rug-building and shopping experience closely mirrors an authentic in-store selection process, ensuring customer engagement and satisfaction.

Image 1.2: Custom Rug builder

The rug sample section was created through the rug builder: Since Airloom is a business focused on rugs and home decor, they wanted to include a rug sample selection feature on their storefront that emulates the rug sampling process in a retail store. Our team developed a rug sample selection feature for their website using the rug builder plugin. This feature adds an "Order Samples" section in the storefront header. Clicking on this section directs customers to an "Order Sample" page, simplifying the process of selecting rug samples. Customers can effortlessly choose the rugs they wish to sample, specify their preferred colors, and add them to their cart in a single streamlined operation. This efficient sampling process enables customers to make their selections quickly, ensuring a convenient experience.

Image 1.3: Customize attribute in products

Customizable products through customized attributes and rug builder: Since Airloom offers specific products with customizability, they wanted to provide their online customers with the ability to customize products as well. Our team developed a custom attribute feature for products using the rug builder plugin. With this custom attribute feature, administrators can now associate specific products with customizable attributes. These products will display a "Customize" option alongside their regular attributes. When customers select this option, they gain the ability to personalize the product by choosing customization options such as color and size. Additionally, a 3D preview of their selections enhances the product experience, providing customers with an immersive way to explore products.

Image 1.4: Customize attribute in products

Helped develop a unique brand identity through UX: Since creating a storefront that reflected their brand identity was a top priority for Airloom, our UX team collaborated with them to conduct a thorough requirement analysis and utilized their years of UX expertise to develop a design tailored for Airloom. Using our Nop Kalles theme as a base, our team added several UX enhancements, such as dynamic picture zones and tag lines, to create a more enhanced storefront experience. Our UX team also chose a subdued and minimal color palette that is reflective of Airloom’s brand, along with clean typography to highlight the products. These design choices combined to create a brand identity that is unique to Airloom and eye-catching for their customers.

Helped develop a streamlined shopping experience: In addition to the aforementioned changes, our team worked to improve the customer experience across the storefront in various areas. We improved the checkout experience by using our One Page Checkout plugin, which helps customers complete checkout by adding all necessary information from a single page, making the purchase experience faster.

Image 1.5: Singe page checkout

We also enhanced the product pages through improved product reviews and using our FAQ plugin to enabling customers to share product feedback more effectively.

Image 1.6: Enhanced product reviews

Alongside these enhancements, we introduced a multitude of other user experience and performance improvements that collectively transformed the customer experience for Airloom, creating a more user-friendly and pleasant shopping environment.

Image 1.7: FAQ section

Categorization support in Blogs: To better organize the blog section for customers, our team utilized our blog and news plugin with support for categories in blogs. With the help of categories, Airloom can now categorize blogs to match their product lines, such as Rug, Floor, Collab Archive, etc. This approach enables Airloom to curate a more effective and user-friendly blog browsing experience, ensuring that customers can readily discover their desired content.

Image 1.8: Categorization in blogs

Google Analytics 4 with enhanced e-commerce and Google Ads script plugin: To add support for Google Analytics 4, we used our Google Analytics 4 plugin with enhanced eCommerce for more optimal eCommerce event tracking. Additionally, we developed a Google Ads script plugin for them, which adds Google Ads scripts to their web pages. These analytics plugins offer extensive functionalities with minimal and straightforward configuration, helping them manage their analytics in a more effective manner.

Developing a product inquiry feature: To accommodate the need for product inquiries on certain products, we developed a product inquiry plugin for their storefront. With the help of this plugin, Airloom can now add a 'Contact Us' button on specific products. When clicked, it opens up a contact form for customers through which they can make their inquiries. Once an inquiry is submitted, it is emailed to the admin so they can view the inquiry and respond to the customers promptly. This helps ensure quick communication between store owners and customers, enhancing Airloom's service experience.

Image 1.9: Product enquiries

Developed an anti-bot registration plugin for enhanced security: In order to mitigate bot registrations and spam, our team developed an anti-bot registration plugin. This plugin utilizes IP-based blocking to detect and block bot registration attacks on the site, enhancing security and helping to mitigate spam.

Results:

• Upgraded the site from nopCommerce 4.20 to 4.60 with performance optimizations across the board.
• Developed a custom Rug builder with product preview visualization, a rug sample section, and customizable products created through the product builder.
• Developed a UX reflecting brand identity with enhancements like Dynamic Image Zones and Taglines plugin.
• Added categorizations in Blogs for an enhanced customer experience.
• Utilized One-Page checkout for a simplified customer experience.
• Developed Google Analytics 4 with enhanced eCommerce and a Google Ads script plugin.
• Developed a Next Generation image converter plugin for webp image conversion & optimization.
• Developed a Product Enquiry plugin for better customer communication.
• Developed an Anti-bot registration plugin to bolster security and mitigate spam.

nopStation is the #1 Gold Solution Partner of nopCommerce and an eCommerce wing of Brain Station 23 Ltd., a top-ranking software development company, headquartered in Dhaka, Bangladesh. Team nopStation designs, builds and enhances 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. The company help its customers build their business online by developing the right eCommerce solution using nopCommerce at a competitive price and reasonable timeline.