Implementing PWA applications as a response to the mobile-first trend
Development, UX & UI design
Our cooperation with the client Mirat began with taking over the maintenance of the current online store. A longer period of cooperation made both parties trust each other, which resulted in a project for further development of the store in order to adapt it to the growing demands of the eCommerce market and optimize it for mobile devices. We decided together to create a completely new front-end layer of the store in PWA technology, based on the ScandiPWA template. These actions allowed us to significantly improve the UX and to optimize and accelerate the store.
In the course of our work, we focused also on the backend layer, setting ourselves the goal of optimizing its operation and reducing the technological debt. On the basis of the conducted audit, we decided that some functionalities were unnecessary and removed them, while others were rewritten, taking into account Magento standards and focusing on code quality and efficiency. We also implemented new solutions to improve User Experience for both customers and store administrators.
Harmony on the page - as in home interiors? Check it yourself!
One of the most important assumptions in the case of our client was the design and implementation of Progressive Web App (PWA), a technology that perfectly meets the requirements of contemporary online stores - especially in terms of the increasingly popular mobile first approach. PWA combines the best features of websites and mobile applications: the ability to display in offline mode, as well as high loading speed, adaptation for SEO and good responsiveness.
The headless architecture we have used additionally provides the ability to quickly respond to emerging business needs through the ability to replace individual elements of the online store (as part of adapting to different devices).
Our client wanted the user of the online store to have the possibility of the best possible familiarization with the arrangement solutions within the products available in the offer. For this reason, we implemented two versions of product presentation - basic and alternative, which allows for better exposition of arrangement photos. This solution was supposed to encourage the customer to make a purchase by presenting available products in different configurations.
For our client we have also implemented a module for binding simple products by two attributes, which allows to display on a product tile and product card all available variants (e.g. different size or color). After hovering over a particular variant, a photo is presented, allowing a thorough familiarization with the product, as well as an estimated time of shipment. In this way, the customer receives information that the offer also includes other solutions, so he can immediately discover that the online store has a product tailored to his individual needs and taste. This solution is beneficial not only from the perspective of the user planning purchases, but also in terms of SEO - in this situation, each product is separately positioned in the search engine.
Due to the diversity of product photos (light and dark colors), which sometimes made the labels placed on the graphics were not visible, we prepared for our client a special module to create labels in the administration panel. The label can be a text or image, as well as a combination of text + image. What is more, when choosing a text label, you can independently add the content of the label, change the text color or set the background color. Thanks to this, labels placed on product graphics (e.g. free shipping, bestseller or discount) are more visible to the end user.
To further facilitate sales in the online store, we used the ElasticSuite search engine, which provides support for the store administrator. This solution allows not only to search for products, but also to create virtual categories (facilitation of adding new products to the category), to manually set the order of products displayed in specific categories (thanks to an intuitive drag&drop option) and to limit the number of product filters for selected categories. Especially the last feature was important for our client, who has a large number of product features in his store - thanks to this module, the online store administrator can significantly narrow down the number of features to those most relevant to him.
At the request of the customer, we have added to the existing methods of payment a new option - the ability to pay by installments in cooperation with the bank Credit Agricole. Thanks to this solution, customers of the online furniture store can easily decide to make a purchase by 15 instalments (0%). What is more, we have introduced the "Calculate instalment" functionality to the product card. After clicking on the appropriate button, the customer opens a new window with the installment calculator, which shows the amount of monthly payment and the repayment period. The solution implemented by us is undoubtedly a way to encourage customers to make a purchase.
In order to strengthen the position of the site in the Google search engine, we have prepared on each subpage of the category 2 sections for the descriptions, in which the descriptions of specific categories can be implemented. This allows you to introduce more keywords to the text (due to the increased number of characters), which is read positively by Google robots.
What is more, we implemented module that converts product photos and other graphics placed on the website to the modern WebP format, significantly reducing the size of the photos - but without losing quality and resolution. This allowed to increase the loading speed of the site. It was very important for our client, because slower loading speed (resulting from the presence of numerous design photos and graphics) lowers the page position in Google search.
We have also applied a solution which allows to review products by specific brands - Shop by brand. This allows the store user to quickly and easily find and purchase products from their favorite manufacturers. This solution also allows you to create subpages for specific brands and add descriptions and meta tags to them, which has a positive effect on SEO.
Feeling inspired to elevate your eCommerce?