World’s Biggest Magento PWA Store: What Did it Take to Launch?

Background

November 2019 witnessed an important turning point for PWA & Magento communities. It is the time the world’s biggest Magento PWA store, as per 2019, was launched. How do we know it is the biggest? We’ve checked. In fact, we built it.

It was created for the largest household appliance and electronics retailer in Central Asia to replace their existing platform, Hybris, which was becoming a limiting factor for their further growth due to reduced performance and a lack of expandability.

Quick client highlights:

• $800M annual gross
• 84 physical stores with 94320 m2 of retail space
• 60K+ active product items from over 700 world’s leading brands

The build was accompanied by migration from Hybris to Magento, mobile-first redesign incorporating PWA, infrastructure optimisation for better load balancing, and a number of tailor integrations to streamline performance and sales process.

Here is an overview of our journey.

Challenges

Replatforming to PWA implied building multiple instances from the ground up. But first, we had to document all the legacy code from the previous solution, as well as extract requirements to prepare a basis for the future development.

From a technical standpoint, some of the more eminent challenges stemmed from the client’s scale of operation, as well as their choice to work with on-premise hardware server setup, as opposed to the commonplace AWS.

Finally, time was a factor. True, it typically is, but this time it was more obvious: we had six months, from start to finish, to take on an eCommerce business, redesign it, re-engineer, and completely transfer it to a new technology—the Magento/PWA bundle. Adding to the pressure, was the fact that Black Friday sale was due only a month after Go-Live.

Solution

Approach highlights:

• business process and CRO analysis for conversion-driven redesign,
• multi-streamed development with PWA, ESB, PIM and Magento,
• high level of customisation, supporting intra- and inter-platform integrations,
• full testing scenario,
• complex infrastructural build to enable high-load and assure an intrusion resistant platform.

Transition to development: unleash Magento Community, Akeneo PIM and ScandiPWA

Requirement gathering marked the beginning of development phase. From the start we had an understanding of the core tools we were going to use: Magento 2 Community edition, ScandiPWA and Akeneo PIM Enterprise. With this in mind, we were able to assemble the core team, assure connections between key components, set up development/staging environments, and make sure we had the infrastructure to support the project.

Migration: 100K users, 65K products, 500GB of media

Migration from the previous solution, Hybris, to Magento occurred in steps, most prominent being customer and product data migration, and data mapping.

The customer base—over 100,000 users—was transferred with their historical order information intact. After the migration, the customer experience was barely affected—the only thing users had to do to regain access to their accounts was to update their passwords as prompted.

The volume of product data due for migration added up to over 65,000 products and 500 GB of related media files. However, before it could be transferred, we had to understand how it was originally structured in Hybris. We then sent specific requirements to the client’s developer team regarding how we would like to receive the data, in order to map products with the correct attributes. It took 7 attempts to finally get this right, with the last of the imports alone taking four days to complete.

Due to differences in data structures between Hybris and Akeneo, we couldn’t use the imports in their original form. Therefore, the data was fed through scripts to match the new structure.

SEO, of course

PWA-specific SEO was another major focal point of the migration.We developed a list of technical SEO and content-related requirements, ensuring that the right content is indexable, and the rankings stay up after the transition.

Our approach involved both automatic and manual 301 mapping, pre Go-Live audit, Go-Live support, and post Go-Live monitoring.

Given the volume of the product catalog, with all the filtering options, product categories, possible URL combinations and cities where the service is available, we arrived at the total number of required redirects equalling to 450,768,600. Clearly, beyond human capacity, these requests were handled via a dedicated Redirector service, custom-built from scratch specifically for the project.

Apart from catalog migration, other SEO elements that were implemented include search friendly filter set up, canonical tags, meta robots, XML sitemap, robots.txt, SEO-friendly URL structure, structured data markup, and SEO-friendly pagination.

Worth of special mention is the assembly of a custom PWA-specific dynamic rendering solution. The rationale behind it two-fold. On the one hand, it saves server time and resources by displaying content directly on each separate client. On the other hand, by serving pre-rendered HTML to specific user agents, it speeds up site indexing by Google, and makes PWA JS content accessible for other search engines – such as Yandex and Bing, which would otherwise remain blind to the entire construct.

New heights for PWA

Working with PWA on a daily basis, we were inclined to showcase the capabilities of this technology on a large-scale project. In this scope, our own, first open-source PWA theme for Magento—ScandiPWA—came really handy.

Built for high performance, the technology at its core is highly customisable and extendable. This made it easy for us to make modifications to the default ScandiPWA theme, adding a range of extra features, and integrating it with Magento to achieve sub-second loading times. Additional benefits include smart caching, easy integration with AppStore and Google Play native apps, possibility of off-line navigation.

Further appeal of PWA is that this technology is highly relevant today, with a strong potential for growth in the future. Developed around it, technodom.kz has been established as a competitive, future-proof eCommerce platform, setting the pace for its market segment for years to come.

Heavy lifting with Akeneo PIM

Replacing Hybris PIM, Akeneo PIM Enterprise edition was used to manage all the stock and price information. To integrate it with Magento we used PIMGento, a free tool, customised to support scheduled and real-time stock & order sync between 1C and Magento. The way it works is as follows:

• The client’s team add basic product information in 1C, where it is saved as SKU,
• It is transferred to Akeneo, where attributes and images are added by a dedicated team,
• Finally, the product data is pushed to Magento via PIMGento tools, and is made available to the consumers.

Both two-way import/export and delta-sync are supported between 1C and Magento. The latter is especially important, as it provides an option to only update the last-modified items, bypassing the remaining bulk of the catalog.

Using this configuration provided capacity to process a catalog of over 100,000 products, allowing near real-time price and stock updates, order management with status updates, and keeping daily catalog sync time under 1-2 hours. In practical terms, this functionality, for instance, enabled the client to apply discounts to 15,000 products just before Black Friday and successfully kick off the sales.

Shapeshifter infrastructure

The decision to use an on-premise hardware server setup was not made on a whim. Rather, it came from AWS being unavailable in the region. Hence, the need to compensate by locally replicating the most crucial features of the Cloud service.

The infrastructure was tuned for load balancing with failover and failback, keeping databases fail-safe and making the entire platform more resilient and intrusion resistant. Other target areas include request routing, Varnish cache setup, and a number of bespoke solutions to assure stable operation and connectivity.

Outcome: powerhouse PWA

To manage internal logistics, and to communicate with the outside world, the newly developed PWA required a number of custom solutions and a grid of integrations. Migration brought upgrades, ranging from subtle to fundamental, implemented with zero-downtime deployment.

Custom import app to take care of stock updates

1C suite is the client’s tool of choice for managing stock turnover workflow. This means that information has to constantly circulate between 1C and Magento, which prompted us to develop an application designed to send price and stock updates from 1C to Magento.

Now, once the changes are introduced in 1C, they are exported and written to Magento, ready to be cached in PWA for seamless browsing: orders – as a cron job, and prices—in real time. In addition, the app allows to configure the rate at which the data can be updated, depending on the current need.

Orders with real-time updates

Limits of Magento backend were pushed to include over 60,000 active products with 15,000 attributes, 4,000 categories, and 34 store views. To manage orders at this extent, and provide real-time order status updates, Magento was integrated with 1C and Equinox warehouse management system.

Five payment types, including a loan app with real-time face recognition

Consumer credit is a popular option in the region, so securing only the traditional payment methods was not going to be enough. We took it onboard, and, as a result, the PWA users are now able to choose between cash, cards, split payment, and an integrated loan approval application with real-time face recognition from Halyk Bank.

Speaking of Halyk, this bank alone, being the principal financial partner, required a support of 10 integrations, such as liveness test, document scanning and verification, mobile app support, and compatibility with 1C, PWA and Magento backend.

Omnichannel delivery with real-time status updates

The provided shipping methods include in-store pick up, home and post office delivery, and delivery box. This covers a vast geographic area, and an array of 84 physical stores. To assure delivery flow, we added integrations with 1C and postal services. This allows customers to track their ordered items, and receive real-time delivery status updates via PWA.

SEO: what’s behind the numbers

Custom meta-data, customer URLs for filtering, 90 cities, 108,000 products, 4,000 categories, an average of 5 filterable attributes and 7 filter options, millions of 301 redirects. All the mapping took place via a custom-built Redirector app, with limited manual input.

PWA-specific GTM and GA were incorporated to closely monitor site performance prior to, during and after the Go-Live event. Throughout the project, our SEO team, working in conjunction with developers performed thorough systematic testing and made the necessary adjustments on the fly.

A custom dynamic rendering application was built to cater to the needs of PWA workflow. The app ensures that the content is indexable and searchable, and provides client-side rendering, helping save server time and resources.

As per measurable results, judging by Google Analytics data, compared to pre Go-Live values, rankings were preserved at a stable high level, additional performance benefits including:

• Engagement increase with session time and page views up by 33%
• Organic traffic increase by 20%
• Conversion rate increase by 11%.

We hope you’ve found this piece useful. To learn all about PWA, check our complete PWA guide.

Curious to learn more about ScandiPWA or looking for a PWA solution for your eCommerce store? Feel free to drop us a line at [email protected], or schedule a call with one of our staff to see how we can help you!

Share on: