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

Introdução

O setor de varejo enfrenta desafios contínuos para proporcionar experiências digitais excepcionais aos clientes. Neste artigo, exploramos um caso de sucesso inspirador que demonstra como a parceria entre uma multinacional do setor de varejo moda e a Zappts, empresa de tecnologia líder em qualidade da experiência do usuário, transformou o marketplace (e-commerce) em uma poderosa ferramenta de conversão de vendas com ganho excepcionais em eficiência. Descubra como essa colaboração alavancou a experiência do usuário, otimizou a jornada de compra e elevou a avaliação do produto nas App Stores.

O Desafio do Cliente

Uma multinacional de varejo de moda nos procurou com o objetivo inicial de refatorar o aplicativo de vendas da marca. O principal ponto de venda digital da empresa se encontrava com alguns problemas, o que estava gerando a perda de muitas oportunidades de venda. Também havia a necessidade de que a solução estivesse integrada com a plataforma VTEX. Outro complicador (ou potencializador) foi o fator pandemia. Com a mudança dos hábitos de consumo, os clientes da marca começaram substituir a compra em suas lojas presenciais e intensificaram a compra através de meios digitais.

A Solução Visionária

A Zappts imediatamente entrou em ação, concentrando-se na melhoria imediata da experiência do usuário no app existente. Colaboradores da Zappts trabalharam em estreita colaboração com a equipe do cliente, aplicando melhorias e ajustes para otimizar a conversão de compras antes mesmo da introdução da nova solução. A abordagem ágil envolveu duas squads que se dedicaram a aprimorar fluxos específicos da jornada do cliente no aplicativo. No cerne da transformação estava a implementação de um novo aplicativo de vendas, desenvolvido com base no Design System do cliente. O foco estava na criação de uma jornada de compra mais intuitiva, eficiente e envolvente para os usuários. Essa nova abordagem permitiu a evolução do marketplace, com a adição de novos sellers e campanhas estratégicas.

A Visão Técnica e a Arquitetura de Sucesso

A visão técnica da solução é notável em sua complexidade e eficácia. A integração com a plataforma VTEX foi o pilar que impulsionou a operação. A automatização de flags no VTEX, a customização de blocos para a exibição de produtos, a listagem de lojas por geolocalização e o uso inovador de Pixel Apps para sugestão de produtos e integração de APIs de terceiros, formaram o alicerce robusto dessa transformação digital.

Automação de Flags no VTEX

1) Usuário acessando um template de loja VTEX, na arquitetura de VTEX IO. Navegando em uma página de listagem de produtos. 2) Store Theme (App principal de loja) recebe o App de Automação como dependência para que seja disponibilizado os serviços de manutenção e front-end. 3) App de Automação, utilizando os componentes de VTEX Styleguide, para estruturar os componentes visuais, como tabelas e formulários. 4) VTEX Admin recebe as configurações definidas pelo App de Automação, deixando visível menus de acesso a página de listagem e formulário de cadastro. 5) A integração com o back-end é feita totalmente via GraphQL. Aqui é encaminhado consultas e CRUD de flags. 6) Requisições de vários tipos são enviadas para o microserviço para serem resolvidas. 7) O serviço de back-end utiliza como base da dados o Master Data V2 (VTEX) para manutenção dos dados, as requisições são resolvidas via SDK da própria plataforma. 8) Um bloco customizado é declarado para exibir o componente de Flag em qualquer parte do Store Theme. 9) O bloco customizado aponta para um componente desenvolvido em React.js, seguindo as boas práticas e arquitura VTEX. 10) A integração de exibição sendo feita via GraphQL. 11) Microserviço Node.js resolve as requisições do componente de Flag. 12) Os parâmetros recebidos são tratados e encaminhado para consulta via SDK no Master Data V2.

Blocos customizados para grid de produtos

1) Usuário acessando um template de loja VTEX, na arquitetura de VTEX IO. Navegando até uma landing page que utiliza o bloco customizado de Grid de Produtos. 2) Declara para o template de Loja, a interface de um bloco customizado. 3) O Bloco customizado aponta para um componente em React.js, que define toda a estrutura de layout e o Store Schema(Declaração de formulário de cadastro para Site Editor). Aqui é definido quais tipos de produtos serão listados no componente. 4) Site Editor renderiza um formulário de configuração definido no React Component, aqui é possível cadastro de filtros de listagem para definir os produtos a serem exibidos no componente. 5) Toda a integração com os produtos são feitas via GraphQL. Aqui são repassadas as configurações de filtros de produtos préviamente cadastradas. 6) A requisições feitas em GraphQL, são encaminhadas para um microserviço em Node.js. E encaminha os parâmetros para o serviço VTEX. 7) Microserviço consulta para o VTEX Search API, com os parâmetros customizados.

Listagem de lojas por geolocalização

1) Usuário acessando um template de loja VTEX, na arquitetura de VTEX IO. Navegando até a página de listagem de lojas 2) Store Theme (App principal de loja) utiliza o VTEX APP (Endereços de lojas) e faz uso do bloco de exibição de lojas. 3) App de Endereços de Loja, declarando um novo bloco reutilizavél, para template de loja. 4) Bloco de lojas aponta para um componente de Front-end em React.js, onde existe toda a interface gráfica e interações com as lojas. 5) Todo o front-end utiliza GraphQL em suas integrações com back-end. Aqui acontece todas requisições necessárias. 6) As requisições GraphQL feitas no front-end, são encaminhadas para um microserviço em Node.js, que são resolvidas em dois clientes em API REST: Checkout API e Logistics API. Aqui as lojas são agrupadas por cidade e ordenadas por cidades com mais quantidade de lojas. 7) O cliente Checkout API, é responsável por listar as lojas mais próximas de um CEP de endereço 8) O cliente Logistics API, recebe uma requisição do back-end e retorna todas as lojas disponíveis e ativas no serviço de logística.

Pixel Apps para sugestão de produtos e integração de APIs de terceiros

1) Usuário acessando um template de loja VTEX, na arquitetura de VTEX IO. Navegando em uma página de produto. 2) Store Theme (App principal de loja) recebe VTEX Pixel App como depencência. 3) VTEX Pixel App disponibiliza formulário de configurações customizadas, para que seja cadastrado links de integração, chave ativação do App e outros. 4) Na arquitetura Pixel é definidos valores globais no DOM (Document Object Model), tais como variáveis de configurações e scripts de terceiros. 5) Componente em React.js, usando o evento vtex:productView, manipula os dados globais emitidos pelo Pixel sendo responsável por invocar a integração para que seja exibido a lista de produtos sugeridos naquela página.

Resultados

O cliente testemunhou resultados excepcionais, superando as suas expectativas. A parceria com a Zappts não apenas aprimorou a qualidade e a eficiência do aplicativo, havendo a entrega de report de bugs, mas também proporcionou uma experiência de usuário mais fluida e satisfatória. Como uma entrega de valor poderosa, a avaliação do aplicativo nas app stores aumentou em 0,5 pontos, refletindo o impacto positivo na satisfação dos usuários.

“Estamos levando nosso marketplace para outro patamar com a ajuda da Zappts” – O cliente.

Conclusão

Este case de sucesso é um testemunho inspirador de como a colaboração visionária entre uma multinacional varejista e a Zappts pode revolucionar a experiência de compra digital. A transformação digital proporcionou um marketplace ágil, envolvente e eficiente, impulsionando resultados tangíveis e conquistando uma avaliação aprimorada nas app stores. Com a tecnologia como força motriz, o futuro do varejo se expande com possibilidades inovadoras, garantindo qualidade da experiência dos usuários.

Sobre a Zappts

Desde 2014 no mercado, a Zappts apoia marcas líderes em seus mercados, como a Porto, Getnet, BTG Pactual, Cateno, Ambev, Multilaser, Ultragaz, C&A e Burger King, entre outras. Com foco no desenvolvimento de software, especialmente em Front-end, UX Design, Quality Assurance e Gestão de Ambientes Cloud atua no planejamento, gestão e operação de serviços de desenvolvimento de soluções digitais corporativas, gestão de ambientes e transferência de conhecimento por meio da tecnologia da informação. Somos uma empresa referência, na criação de experiências digitais para os usuários, além de desenvolver soluções inovadoras e rápidas, atuamos em modelo 100% remoto, com equipes distribuídas em mais de 18 estados do Brasil.