Caso de Éxito: Evolución de marketplace minorista con integración de VTEX

Introducción

El sector del comercio minorista enfrenta desafíos continuos para brindar experiencias digitales excepcionales a los clientes. En este artículo, exploramos una historia de éxito inspiradora que demuestra cómo la colaboración entre una empresa multinacional del sector de la moda al por menor y Zappts, empresa de tecnología líder en calidad de experiencia del usuario, transformó el marketplace (e-commerce) en una poderosa herramienta de conversión de ventas con ganancias excepcionales en eficiencia. Descubra cómo esta colaboración potenció la experiencia del usuario, optimizó la jornada de compra y elevó la calificación del producto en las App Stores.

El Desafío del Cliente

Una empresa multinacional de comercio minorista de moda nos contactó con el objetivo inicial de refactorizar la aplicación de ventas de la marca. El principal punto de venta digital de la empresa presentaba algunos problemas, lo que estaba generando la pérdida de muchas oportunidades de venta. También existía la necesidad de que la solución estuviera integrada con la plataforma VTEX.

Otro factor complicador (o potenciador) fue la pandemia. Con el cambio en los hábitos de consumo, los clientes de la marca comenzaron a reemplazar las compras en tiendas físicas e intensificaron las compras a través de canales digitales.

La Solución Visionaria

Zappts entró en acción de inmediato, concentrándose en la mejora inmediata de la experiencia del usuario en la aplicación existente. Los colaboradores de Zappts trabajaron en estrecha colaboración con el equipo del cliente, aplicando mejoras y ajustes para optimizar la conversión de compras incluso antes de presentar la nueva solución. El enfoque ágil involucró dos squads dedicados a mejorar flujos específicos del recorrido del cliente en la aplicación.

En el núcleo de la transformación estaba la implementación de una nueva aplicación de ventas, desarrollada con base en el Design System del cliente. El enfoque estaba en crear una jornada de compra más intuitiva, eficiente y atractiva para los usuarios. Este nuevo enfoque permitió la evolución del marketplace, con la incorporación de nuevos vendedores y campañas estratégicas.

La Visión Técnica y la Arquitectura del Éxito

La visión técnica de la solución es notable en su complejidad y eficacia. La integración con la plataforma VTEX fue el pilar que impulsó la operación. La automatización de flags en VTEX, la personalización de bloques para la visualización de productos, el listado de tiendas por geolocalización y el uso innovador de Pixel Apps para sugerencias de productos e integración de APIs de terceros, formaron la base robusta de esta transformación digital.

Automatización de Flags en VTEX

1) Usuario accediendo a una plantilla de tienda VTEX, en la arquitectura de VTEX IO. Navegando por una página de listado de productos.

2) Store Theme (aplicación principal de la tienda) recibe la App de Automatización como dependencia para que se pongan a disposición los servicios de mantenimiento y front-end.

3) App de Automatización, utilizando los componentes de VTEX Styleguide, para estructurar los componentes visuales, como tablas y formularios.

4) VTEX Admin recibe las configuraciones definidas por la App de Automatización, dejando visibles los menús de acceso a la página de listado y formulario de registro.

5) La integración con el back-end se realiza totalmente vía GraphQL. Aquí se envían consultas y CRUD de flags.

6) Se envían diversos tipos de solicitudes al microservicio para que sean resueltas.

7) El servicio de back-end utiliza como base de datos el Master Data V2 (VTEX) para el mantenimiento de los datos, las solicitudes se resuelven vía el SDK de la propia plataforma.

8) Se declara un bloque personalizado para mostrar el componente de Flag en cualquier parte del Store Theme.

9) El bloque personalizado apunta a un componente desarrollado en React.js, siguiendo las mejores prácticas y arquitectura VTEX.

10) La integración de visualización se realiza vía GraphQL.

11) Microservicio Node.js resuelve las solicitudes del componente de Flag.

12) Los parámetros recibidos se procesan y se envían para consulta vía SDK en Master Data V2.

Bloques personalizados para la cuadrícula de productos

1) Usuario accediendo a una plantilla de tienda VTEX, en la arquitectura de VTEX IO. Navegando hasta una landing page que utiliza el bloque personalizado de Cuadrícula de Productos.

2) Declara a la plantilla de la Tienda la interfaz de un bloque personalizado.

3) El Bloque personalizado apunta a un componente en React.js, que define toda la estructura de diseño y el Store Schema (declaración de formulario de registro para Site Editor). Aquí se define qué tipos de productos se listarán en el componente.

4) Site Editor renderiza un formulario de configuración definido en el React Component, aquí es posible registrar filtros de listado para definir los productos que se mostrarán en el componente.

5) Toda la integración con los productos se realiza vía GraphQL. Aquí se pasan las configuraciones de filtros de productos previamente registradas.

6) Las solicitudes realizadas en GraphQL se envían a un microservicio en Node.js. Y envía los parámetros al servicio VTEX.

7) Microservicio consulta la VTEX Search API con los parámetros personalizados.

Listado de tiendas por geolocalización

1) Usuario accediendo a una plantilla de tienda VTEX, en la arquitectura de VTEX IO. Navegando hasta la página de listado de tiendas.

2) Store Theme (aplicación principal de la tienda) utiliza la VTEX APP (Direcciones de tiendas) y hace uso del bloque de visualización de tiendas.

3) App de Direcciones de Tienda, declarando un nuevo bloque reutilizable para la plantilla de la tienda.

4) El bloque de tiendas apunta a un componente de Front-end en React.js, donde existe toda la interfaz gráfica e interacciones con las tiendas.

5) Todo el front-end utiliza GraphQL en sus integraciones con back-end. Aquí ocurren todas las solicitudes necesarias.

6) Las solicitudes GraphQL realizadas en el front-end se envían a un microservicio en Node.js, que se resuelven en dos clientes de API REST: Checkout API y Logistics API. Aquí las tiendas se agrupan por ciudad y se ordenan por ciudades con mayor cantidad de tiendas.

7) El cliente Checkout API es responsable de listar las tiendas más cercanas a un código postal de dirección.

8) El cliente Logistics API recibe una solicitud del back-end y retorna todas las tiendas disponibles y activas en el servicio de logística.

Pixel Apps para sugerencias de productos e integración de APIs de terceros

1) Usuario accediendo a una plantilla de tienda VTEX, en la arquitectura de VTEX IO. Navegando por una página de producto.

2) Store Theme (aplicación principal de la tienda) recibe VTEX Pixel App como dependencia.

3) VTEX Pixel App proporciona formularios de configuración personalizados, para que se registren enlaces de integración, clave de activación de la App y otros.

4) En la arquitectura Pixel se definen valores globales en el DOM (Document Object Model), tales como variables de configuración y scripts de terceros.

5) Componente en React.js, usando el evento vtex:productView, manipula los datos globales emitidos por el Pixel siendo responsable de invocar la integración para que se muestre la lista de productos sugeridos en esa página.

Resultados

El cliente fue testigo de resultados excepcionales, superando sus expectativas. La colaboración con Zappts no solo mejoró la calidad y eficiencia de la aplicación, con entrega de reportes de errores, sino que también proporcionó una experiencia de usuario más fluida y satisfactoria. Como una poderosa entrega de valor, la calificación de la aplicación en las app stores aumentó en 0,5 puntos, reflejando el impacto positivo en la satisfacción de los usuarios.

“Estamos llevando nuestro marketplace a otro nivel con la ayuda de Zappts” – El cliente.

Conclusión

Esta historia de éxito es un testimonio inspirador de cómo la colaboración visionaria entre una multinacional del comercio minorista y Zappts puede revolucionar la experiencia de compra digital. La transformación digital proporcionó un marketplace ágil, atractivo e eficiente, impulsando resultados tangibles y obteniendo una calificación mejorada en las app stores. Con la tecnología como fuerza motriz, el futuro del comercio minorista se expande con posibilidades innovadoras, garantizando la calidad de la experiencia de los usuarios.

Sobre Zappts

Desde 2014 en el mercado, Zappts apoya marcas líderes en sus mercados, como la Porto, Getnet, BTG Pactual, Cateno, Ambev, Multilaser, Ultragaz, C&A y Burger King, entre otras. Con enfoque en el desarrollo de software, especialmente en Front-end, UX Design, Quality Assurance y Gestión de Ambientes Cloud opera en la planificación, gestión y operación de servicios de desarrollo de soluciones digitales corporativas, gestión de ambientes y transferencia de conocimiento a través de la tecnología de la información.

Somos una empresa referente en la creación de experiencias digitales para los usuarios, además de desarrollar soluciones innovadoras y rápidas, operamos en modelo 100% remoto, con equipos distribuidos en más de 18 estados de Brasil.

Para saber más sobre cómo Zappts puede ayudar a su empresa, haga clic aquí, y obtenga una evaluación gratuita con nuestros consultores tech.