Recently, we published an article detailing our proprietary e-com.house solution, which serves as a robust and flexible core for creating PWA stores with Magento 2 backend (and more). Today, it's time for the case study of our first implementation - we did it for a brand that needs no introduction :) Check out the PWA store implementation for KUBOTA!

Working with the team that brought the legendary flip-flops back to the world, we have been involved from the very beginning of their brand reactivation and e-commerce development. In our previous case study, we described our journey from 0 to 3000+ monthly orders.

Today, KUBOTA is a brand that continues to dynamically expand its e-commerce (it has also completed a public stock offering ahead of schedule and plans to debut on NewConnect this year). Therefore, the technology must keep up with its pace and provide scalability and flexibility. After the popular Saas platform and the combination of PWA and Magento with Vue Storefront, it was time for a more dedicated and advanced architectural implementation, combining our PWA, microservices, and Magento 2.

PWA Store - custom features for KUBOTA

We have already written about Progressive Web App (PWA) technology and its application in e-commerce on our blog. If you're not familiar with progressive web apps, we recommend reading the article. In summary, a PWA store combines the advantages of a web service and mobile applications - it operates through a browser and is visible in search engines, while providing a much faster and smoother shopping experience.

Like other e-commerce stores built on different technologies, implementing PWA allows us to leverage both ready-made solutions, including open-source options, and tailor-made solutions. Based on our analysis and experience with implementations, we created our own solution that offers great platform customization capabilities to meet the needs of each business. We will demonstrate some examples of these customizations using the implementation for kubotastore.pl.

Menu and navigation

Right from the beginning of the store's strategy and UX design, it was clear that KUBOTA needed a completely custom header, including menu and navigation. The key was to provide not only the most intuitive and seamless user experience but also to highlight product categories and brand communication elements.
Therefore:

• at the top, there is a fixed bar with a message,

• the menu contains tiles with thumbnail images of categories, which not only looks attractive but also makes it easier to find specific products,

• under the dedicated "additional options" icon, we placed elements that we didn't want to overload the main menu with, but are still important to have at hand - such as FAQ, contact, list of physical stores, or favorite products.

The entire layout blends well with the main slider without sacrificing clarity. When scrolling, the bar appears in a minimized form (the message disappears), against a white background.

The search bar looks like this:

Homepage

The homepage allows for flexible presentation of messages or products through various blocks that can be configured and edited using the dedicated CMS. The homepage can be easily customized to meet the brand's current needs.
For example, KUBOTA can choose from fully manageable banner layouts like these:

Category Page

At the top of each category, there are thumbnails presenting subcategories:

Both on mobile and desktop, convenient and flexible filtering and sorting options are readily available:

Product Page

The product page had to accommodate not only rich content in the form of texts, icons, or images but also numerous color variants of the products:

Like the homepage content, the product page content is also integrated with the CMS, and we have also created a module for managing the size chart.

The content is built with various blocks, including the ones shown below:

Shopping Cart

In the shopping cart, in addition to essential elements, we integrated a FAQ module and a dedicated integration with the User.com marketing automation tool to provide users with the best support during the purchase process.

Order Form

In the order form, along with a simple and intuitive flow, we created a custom integration with Tpay, allowing for convenient payments via BLIK or credit cards.

My Account

This view exemplifies how much a PWA store can replicate the experience of using a mobile application. My Account, like the rest of the store, was primarily designed for small screens.

PWA Store - UI Design for KUBOTA

Of course, as important as the functional layer, the visual concept and UI design of the store were crucial. KUBOTA needed a distinctive yet clean layout that reflects the brand's character.

In the previous stages, the store struggled with a lack of consistency in font classes and buttons, which evolved as it grew. Therefore, in this case, we focused on creating a thoughtful, more comprehensive styleguide that we consistently adhered to when designing all the views.

One of our tasks was also to plan elements in a so-called "seasonal" color, which could easily adapt to the current collection and communication.

Dedicated icons placed throughout the store also became a strong point (in addition to well-crafted packshots and sessions).

PWA Store - Backend Tailored for KUBOTA

PWA solutions available on the market typically require a separate backend engine for e-commerce to become functional and full-fledged online stores. Our solution was designed to support both the Magento 2 platform and serve as one of the blocks in a more advanced, dedicated infrastructure.

In the case of Kubota, the architecture consists of, among others:

• the aforementioned PWA layer,

• Magento 2 platform,

• microservices, e.g., CMS, checkout, PIM, API,

• integrations, e.g., with Baselinker or User.com.
  

As an interesting fact, the API used by our PWA also found application in the creation of a bot, enabling KUBOTA product purchases in Messenger with BLIK payments. This project, in which we contributed, gained quite some attention recently :)

The architecture and backend were aimed at improving stability, performance, and better communication between systems. These needs were successfully addressed, as evidenced by the positive test results during this year's record-breaking Black Week for the brand. The store's performance remained steady during this period.

In comparison, Black Week 2021 saw a 67% increase in the number of users compared to 2020, and the number of orders increased by 73%. Comparing Black Friday to the previous day, there was a 681% increase in the number of transactions and a 267% increase in the number of users.

Results of the implementation

Recently, the KUBOTA brand itself boasted about the effects of the implementation, making it the most reliable source of information :) According to the data, the store is now more functional and user-friendly, resulting in a staggering 250% increase in the conversion rate after the launch of the new store!

In many aspects of testing the new microservices and architectural logic, we were strongly supported by the brand's e-commerce team. We are delighted that the joint PWA implementation has had such a significant impact on results. Congratulations to the KUBOTA team on their success, and we wish them the best for the future!