Case de Sucesso: Evolução de marketplace varejista com integração de VTEX

Introduction

The retail sector faces continuous challenges in providing exceptional digital experiences to customers. In this article, we explore an inspiring success story that demonstrates how the partnership between a multinational fashion retail company and Zappts, a technology company leading in user experience quality, transformed the marketplace (e-commerce) into a powerful sales conversion tool with exceptional efficiency gains. Discover how this collaboration leveraged user experience, optimized the purchase journey and boosted product ratings on the App Stores.

The Client’s Challenge

A multinational fashion retail company approached us with the initial goal of refactoring the brand’s sales application. The company’s main digital sales point was experiencing some issues, which were causing the loss of many sales opportunities. There was also a need for the solution to be integrated with the VTEX platform.

Another complicating factor (or potential catalyst) was the pandemic. With the change in consumer habits, the brand’s customers began replacing in-store purchases and intensified buying through digital channels.

The Visionary Solution

Zappts immediately sprang into action, focusing on immediate improvement of the user experience on the existing app. Zappts collaborators worked closely with the client’s team, applying improvements and adjustments to optimize purchase conversion even before introducing the new solution. The agile approach involved two squads dedicated to improving specific flows in the customer journey within the application.

At the heart of the transformation was the implementation of a new sales application, developed based on the client’s Design System. The focus was on creating a more intuitive, efficient and engaging purchase journey for users. This new approach enabled the evolution of the marketplace, with the addition of new sellers and strategic campaigns.

The Technical Vision and Architecture of Success

The technical vision of the solution is remarkable in its complexity and effectiveness. Integration with the VTEX platform was the pillar that drove the operation. The automation of flags in VTEX, the customization of blocks for product display, the listing of stores by geolocation and the innovative use of Pixel Apps for product suggestions and third-party API integration, formed the robust foundation of this digital transformation.

VTEX Flag Automation

1) User accessing a VTEX store template, in the VTEX IO architecture. Navigating a product listing page.

2) Store Theme (main store app) receives the Automation App as a dependency so that maintenance and front-end services are made available.

3) Automation App, using VTEX Styleguide components, to structure visual components such as tables and forms.

4) VTEX Admin receives the configurations defined by the Automation App, making the listing page and registration form access menus visible.

5) Integration with the back-end is done entirely via GraphQL. Here, flag queries and CRUD operations are forwarded.

6) Various types of requests are sent to the microservice to be resolved.

7) The back-end service uses Master Data V2 (VTEX) as the database for data maintenance, requests are resolved via the platform’s own SDK.

8) A custom block is declared to display the Flag component anywhere in the Store Theme.

9) The custom block points to a component developed in React.js, following VTEX best practices and architecture.

10) Display integration being done via GraphQL.

11) Node.js microservice resolves Flag component requests.

12) Received parameters are processed and forwarded for SDK consultation in Master Data V2.

Custom blocks for product grid

Diagram of custom blocks for VTEX product grid

1) User accessing a VTEX store template, in the VTEX IO architecture. Navigating to a landing page that uses the custom Product Grid block.

2) Declares to the Store template the interface of a custom block.

3) The Custom Block points to a React.js component that defines the entire layout structure and the Store Schema (registration form declaration for Site Editor). Here it is defined which types of products will be listed in the component.

4) Site Editor renders a configuration form defined in the React Component, here it is possible to register listing filters to define the products to be displayed in the component.

5) All integration with products is done via GraphQL. Here, the previously registered product filter configurations are passed along.

6) Requests made in GraphQL are forwarded to a Node.js microservice. And forwards the parameters to the VTEX service.

7) Microservice queries the VTEX Search API with custom parameters.

Store listing by geolocation

1) User accessing a VTEX store template, in the VTEX IO architecture. Navigating to the store listing page.

2) Store Theme (main store app) uses the VTEX APP (Store Addresses) and makes use of the store display block.

3) Store Addresses App, declaring a new reusable block for the store template.

4) Store block points to a Front-end component in React.js, where the entire graphical interface and store interactions exist.

5) The entire front-end uses GraphQL in its back-end integrations. Here all necessary requests happen.

6) GraphQL requests made in the front-end are forwarded to a Node.js microservice, which are resolved in two REST API clients: Checkout API and Logistics API. Here stores are grouped by city and sorted by cities with the highest number of stores.

7) The Checkout API client is responsible for listing the nearest stores to an address ZIP code.

8) The Logistics API client receives a back-end request and returns all available and active stores in the logistics service.

Pixel Apps for product suggestions and third-party API integration

1) User accessing a VTEX store template, in the VTEX IO architecture. Navigating a product page.

2) Store Theme (main store app) receives VTEX Pixel App as a dependency.

3) VTEX Pixel App provides custom configuration forms, so that integration links, App activation key and others are registered.

4) In the Pixel architecture, global values are defined in the DOM (Document Object Model), such as configuration variables and third-party scripts.

5) React.js component, using the vtex:productView event, manipulates the global data emitted by the Pixel, being responsible for invoking the integration so that the list of suggested products is displayed on that page.

Results

The client witnessed exceptional results, exceeding their expectations. The partnership with Zappts not only improved the quality and efficiency of the application, with bug report delivery, but also provided a smoother and more satisfying user experience. As a powerful value delivery, the application’s rating in app stores increased by 0.5 points, reflecting the positive impact on user satisfaction.

“We are taking our marketplace to another level with the help of Zappts” – The client.

Conclusion

This success story is an inspiring testament to how visionary collaboration between a retail multinational and Zappts can revolutionize the digital purchase experience. The digital transformation provided an agile, engaging and efficient marketplace, driving tangible results and earning an improved rating in app stores. With technology as the driving force, the future of retail expands with innovative possibilities, ensuring quality user experience.

About Zappts

Since 2014 in the market, Zappts supports leading brands in their markets, such as Porto, Getnet, BTG Pactual, Cateno, Ambev, Multilaser, Ultragaz, C&A and Burger King, among others. Focused on software development, especially in Front-end, UX Design, Quality Assurance and Cloud Environment Management, it operates in the planning, management and operation of corporate digital solution development services, environment management and knowledge transfer through information technology.

We are a reference company in creating digital experiences for users, in addition to developing innovative and fast solutions, operating in a 100% remote model, with teams distributed across more than 18 states in Brazil.