{"id":1095,"date":"2023-06-12T13:25:17","date_gmt":"2023-06-12T16:25:17","guid":{"rendered":"https:\/\/515.li\/?p=1095"},"modified":"2025-08-12T17:51:34","modified_gmt":"2025-08-12T20:51:34","slug":"vtex-listas-de-casamento","status":"publish","type":"post","link":"https:\/\/515.li\/index.php\/2023\/06\/12\/vtex-listas-de-casamento\/","title":{"rendered":"VTEX – Listas de Casamento"},"content":{"rendered":"\n<\/path><\/circle><\/g><\/path><\/g><\/path><\/path><\/path><\/path><\/rect><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/g><\/path><\/g><\/path><\/g><\/path><\/path><\/path><\/path><\/path><\/polygon><\/polygon><\/g><\/polygon><\/g><\/polygon><\/g><\/path><\/path><\/path><\/g><\/path><\/g><\/rect><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/rect><\/rect><\/rect><\/rect><\/g><\/polygon><\/path><\/path><\/path><\/path><\/path><\/path><\/rect><\/rect><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/rect><\/rect><\/rect><\/path><\/path><\/polygon><\/polygon><\/rect><\/path><\/path><\/polygon><\/polygon><\/rect><\/rect><\/rect><\/rect><\/rect><\/rect><\/g><\/path><\/path><\/g><\/path><\/path><\/g><\/path><\/g><\/polygon><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/rect><\/rect><\/polygon><\/polygon><\/g><\/path><\/polygon><\/path><\/path><\/path><\/path><\/polygon><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/polygon><\/polygon><\/rect><\/path><\/path><\/path><\/path><\/path><\/g><\/path><\/path><\/g><\/path><\/g><\/polygon><\/polygon><\/g><\/polygon><\/rect><\/rect><\/path><\/path><\/g><\/path><\/path><\/g><\/path><\/g><\/polygon><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/rect><\/rect><\/polygon><\/polygon><\/g><\/path><\/polygon><\/path><\/path><\/path><\/path><\/polygon><\/path><\/path><\/path><\/path><\/rect><\/path><\/rect><\/path><\/rect><\/path><\/g><\/path><\/path><\/g><\/path><\/g><\/polygon><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/rect><\/rect><\/polygon><\/polygon><\/g><\/path><\/path><\/path><\/path><\/path><\/polygon><\/path><\/path><\/g><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/g><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/path><\/g><\/path><\/path><\/g><\/path><\/g><\/polygon><\/polygon><\/g><\/polygon><\/rect><\/rect><\/path><\/path><\/path><\/path><\/path><\/g><\/svg>\n\n\n\n\n

A VTEX \u00e9 uma multinacional brasileira especializada em solu\u00e7\u00f5es de e-commerce com mais de 2.000 clientes dentre eles a Samsung, Coca-Cola, C&A e Sony. Sua plataforma \u00e9 amplamente reconhecida por sua capacidade de fornecer uma ampla gama de componentes altamente personaliz\u00e1veis.<\/p>\n\n\n\n

A solu\u00e7\u00e3o oferece dezenas de componentes que abrangem todas as etapas do processo de compra, desde a p\u00e1gina inicial at\u00e9 o checkout final. Esses componentes podem ser facilmente personalizados e ajustados de acordo com as necessidades espec\u00edficas de cada loja, permitindo que os varejistas criem uma experi\u00eancia \u00fanica e coerente com sua marca.<\/p>\n\n\n\n

\n

Sem tempo, pregui\u00e7a<\/s>?<\/h2>\n\n\n\n
    \n
  • VTEX \u00e9 uma plataforma para cria\u00e7\u00e3o de e-commerces composta por v\u00e1rios componentes;<\/li>\n\n\n\n
  • Eles precisavam da cria\u00e7\u00e3o de um novo componente, uma lista de desejos;<\/li>\n\n\n\n
  • Na etapa de UX Research foi feito um Benchmarking, Storyline, Jornada do Usu\u00e1rio, e mais;<\/li>\n\n\n\n
  • Foi entregue um fluxo naveg\u00e1vel em alta fidelidade com a vers\u00e3o mobile e desktop.<\/li>\n<\/ul>\n<\/blockquote>\n\n\n\n

    O Problema<\/h2>\n\n\n\n

    A fim de aprimorar o cat\u00e1logo atual da plataforma, era necess\u00e1rio desenvolver um novo componente: uma Lista de Desejos focada em casamentos, capaz de ser compartilhada, personalizada e com itens que podem ser adquiridos tanto na loja f\u00edsica quanto na loja online. T\u00ednhamos alguns meses e uma equipe pequena com 3 desenvolvedores, uma Product Owner e um UX\/UI design, vulgo eu.<\/p>\n\n\n\n

    A Solu\u00e7\u00e3o<\/h2>\n\n\n\n

    A fim de desenvolver uma maneira de acordo com as especifica\u00e7\u00f5es da VTEX, iniciou-se o processo de UX Research, que neste projeto compreende o benchmarking, a cria\u00e7\u00e3o da persona principal, um storyline, entre outros. Al\u00e9m da cria\u00e7\u00e3o de fluxogramas, telas de wireframe, design system e prot\u00f3tipo.<\/p>\n\n\n\n

    Benchmarking<\/h2>\n\n\n\n

    Ao unir-me com o projeto, recebi uma sele\u00e7\u00e3o de sites como fonte de pesquisa para a ferramenta que desenvolver\u00edamos. Decidi acrescentar outros \u00e0 lista para realizar uma an\u00e1lise comparativa aprofundada das caracter\u00edsticas mais significativas e comuns.<\/p>\n\n\n

    \n
    \"Benchmarking\"
    Benchmarking (clique para ampliar)<\/figcaption><\/figure>\n<\/div>\n\n\n

    As features mencionadas foram identificadas ao navegar por oito sites, permitindo-nos identificar as funcionalidades mais comuns e relevantes para o nosso projeto.<\/p>\n\n\n\n

    Matriz CSD<\/h2>\n\n\n\n

    A ideia em criar a matriz era principalmente dividir as funcionalidades que entrariam no primeiro MVP. Algumas features eram pr\u00e9-requisitos para essa primeira vers\u00e3o, seja por limita\u00e7\u00f5es da plataforma VTEX, seja por estrat\u00e9gias de neg\u00f3cio. Por exemplo, a funcionalidade de \u201cPresentes que viram cr\u00e9ditos na loja\u201d, em que todos os itens comprados na lista de desejos n\u00e3o seriam entregues fisicamente, mas sim convertidos em cr\u00e9ditos, funcionando como um cart\u00e3o presente (gift card).<\/p>\n\n\n

    \n
    \"Matriz
    Matriz CSD (clique para ampliar)<\/figcaption><\/figure>\n<\/div>\n\n\n

    As fun\u00e7\u00f5es de personaliza\u00e7\u00e3o de lista, como adicionar uma foto \u00e0 lista, imagem de capa, texto descritivo e URL personalizada, foram consideradas menos priorit\u00e1rias. Devido ao prazo apertado, o mais importante nesse momento era lan\u00e7ar o componente na plataforma para depois focar nas melhorias, incluindo a personaliza\u00e7\u00e3o.<\/p>\n\n\n\n

    Persona<\/h2>\n\n\n\n

    A este ponto do projeto, era necess\u00e1rio visualizar e compreender os usu\u00e1rios alvo, e assim surgir\u00e1 Denise Fogo\u00e7a. Suas metas, motiva\u00e7\u00f5es e desafios passaram a ser nossos tamb\u00e9m. As informa\u00e7\u00f5es sobre ela foram obtidas a partir de dados reais e pesquisas, embora infelizmente n\u00e3o tenha sido poss\u00edvel realizar entrevistas para esse fim.<\/p>\n\n\n

    \n
    \"Persona<\/figure>\n<\/div>\n\n\n

    Inclusive, aproveitando o embalo, fizemos o famigerado mapa de empatia que cont\u00e9m a vis\u00e3o da persona sobre a cria\u00e7\u00e3o de uma lista de casamento, assim como suas necessidades e dores.<\/p>\n\n\n

    \n
    \"Mapa<\/figure>\n<\/div>\n\n\n

    Esse mapa representa n\u00e3o apenas um primeiro e singelo v\u00ednculo emp\u00e1tico entre a equipe de desenvolvimento e os usu\u00e1rios, mas tamb\u00e9m nos ajudar\u00e1 a criar a pr\u00f3xima etapa do nosso UX Research.<\/p>\n\n\n\n

    Storyline<\/h2>\n\n\n\n

    Essa etapa do projeto \u00e9 super importante, pois ir\u00e1 ajuda a todos envolvidos entender como Denise ir\u00e1 fazer para chegar a seus objetivos, aqui criamos tr\u00eas hist\u00f3rias:<\/p>\n\n\n\n

    Criando uma lista<\/h3>\n\n\n\n

    Denise Foga\u00e7a ir\u00e1 se casar em breve, mas ainda existem v\u00e1rios detalhes a serem resolvidos, como buffet, banda, fot\u00f3grafo e a lista de presentes de casamento. Ela deseja que sua loja favorita ofere\u00e7a uma maneira pr\u00e1tica e r\u00e1pida de criar essas listas e compartilh\u00e1-las com conhecidos e familiares.<\/p>\n\n\n\n

    Denise, ent\u00e3o, acessa seu e-commerce preferido pelo smartphone durante seu hor\u00e1rio de almo\u00e7o no trabalho. Ela pega um pequeno papel com a lista dos itens que ela e seu noivo j\u00e1 haviam feito dias atr\u00e1s. Na loja online ela encontra o campo de busca e pesquisa pelo primeiro item da lista:<\/p>\n\n\n\n

    \"Afirma\u00e7\u00f5es<\/figure>\n\n\n\n

    Ap\u00f3s adicionar todos os itens Denise ent\u00e3o envia sua lista nomeada \u201cCasamento\u201d usando o bot\u00e3o compartilhar.<\/p>\n\n\n\n

    Comprando em uma lista via link<\/h3>\n\n\n\n

    Tamara Mourato acessa a lista de Denise por meio de um link recebido via WhatsApp, onde consegue visualizar todos os itens da lista. Ela tem a op\u00e7\u00e3o de comprar mais de um item, caso deseje. Tamara decide presentear com o fog\u00e3o, adiciona o item ao carrinho e, em seguida, segue para finalizar a compra no checkout.<\/p>\n\n\n\n

    \"Afirma\u00e7\u00f5es<\/figure>\n\n\n\n

    Comprando em uma loja f\u00edsica<\/h3>\n\n\n\n

    Yi Canadas visita a loja f\u00edsica onde Denise criou sua lista de casamento. Ele informa a um vendedor o ID da lista, e o vendedor acessa o sistema localizando a lista de Denise. Yi informa ao vendedor que deseja comprar a televis\u00e3o. A compra \u00e9 efetuada na loja, e o vendedor marca o item como comprado no sistema.<\/p>\n\n\n\n

    \"Afirma\u00e7\u00f5es<\/figure>\n\n\n\n

    As tr\u00eas hist\u00f3rias contadas exemplificam bem o fluxo geral dos usu\u00e1rios, onde temos nossa persona principal criando uma lista, enquanto as outras compram itens desta lista tanto de forma online quanto em lojas f\u00edsicas. Isso nos ajuda a entender as a\u00e7\u00f5es e necessidades durante essas etapas dentro da jornada.<\/p>\n\n\n\n

    As tr\u00eas hist\u00f3rias exemplificam de maneira clara o fluxo geral dos usu\u00e1rios. Temos nossa persona principal, Denise, criando uma lista de casamento, enquanto outras pessoas como Tamara e Yi compram itens dessa lista, tanto de forma online quanto em lojas f\u00edsicas. Esses exemplos nos auxiliam a compreender as a\u00e7\u00f5es e necessidades dos usu\u00e1rios ao longo dessas etapas dentro da jornada. Isso \u00e9 fundamental para o entendimento do processo e para aprimorar a experi\u00eancia do usu\u00e1rio em cada uma dessas jornadas. E por falar em jornada\u2026<\/p>\n\n\n\n

    Jornada do Usu\u00e1rio<\/h2>\n\n\n\n

    Aqui a jornada foi representada por diagramas, t\u00f3picos e fluxogramas, esse mapeamento ajudou a melhorar a compreens\u00e3o sobre os est\u00e1gios de cada intera\u00e7\u00e3o, pontos de dores e experi\u00eancias satisfat\u00f3rias. A jornada foi dividida em seis pontos:<\/p>\n\n\n

    \n
    \"Passo<\/figure>\n<\/div>\n\n
    \n
    \"Passo<\/figure>\n<\/div>\n\n
    \n
    \"Passo<\/figure>\n<\/div>\n\n
    \n
    \"Passo<\/figure>\n<\/div>\n\n
    \n
    \"Passo<\/figure>\n<\/div>\n\n
    \n
    \"Passo<\/figure>\n<\/div>\n\n\n

    Fluxo<\/h2>\n\n\n\n

    Como mencionado anteriormente, algumas decis\u00f5es de fluxo e design foram tomadas com base em limita\u00e7\u00f5es e padr\u00f5es da plataforma VTEX. Um desses pontos diz respeito ao fluxo para o usu\u00e1rio adicionar um item \u00e0 lista de casamento. A principal quest\u00e3o era decidir se o bot\u00e3o \u201cAdicionar \u00e0 lista\u201d deveria estar diretamente na p\u00e1gina do produto (PDP), inserido no fluxo normal da loja virtual, ou se abriria em uma nova aba, com o gerenciamento completo da lista de desejos sendo feito l\u00e1.<\/p>\n\n\n\n

    A vers\u00e3o com bot\u00e3o na PDP apresentaria um bot\u00e3o de \u201cAdicionar \u00e0 lista\u201d diretamente na p\u00e1gina do produto. Isso significa que, ao pesquisar o termo \u201cbicicleta\u201d e acessar a p\u00e1gina do item, al\u00e9m da descri\u00e7\u00e3o e imagens do produto, haveria um bot\u00e3o de a\u00e7\u00e3o r\u00e1pida para adicionar a mercadoria a uma lista de casamento com apenas um ou dois cliques, conforme mostrado no fluxograma abaixo.<\/p>\n\n\n

    \n
    \"Fluxo<\/figure>\n<\/div>\n\n\n

    Sem d\u00favidas, essa \u00e9 uma excelente forma de adicionar itens \u00e0 lista. No entanto, a VTEX desejava disponibilizar essa funcionalidade de lista de casamentos tamb\u00e9m para clientes que j\u00e1 tinham seus e-commerces criados como a Decathlon, Ri Happy e Lupo, de uma maneira que n\u00e3o exigisse que a loja acionasse um administrador ou programador para adicionar, configurar e personalizar esse novo componente, ao menos n\u00e3o inicialmente.<\/p>\n\n\n\n

    Ent\u00e3o para o MVP, foi optado por criar um fluxo mais longo, conforme pode ser observado no fluxograma abaixo. Essa abordagem foi escolhida por ser facilmente implement\u00e1vel nas lojas virtuais. Nesse fluxo, quando o usu\u00e1rio desejava adicionar itens a uma lista de casamento, ele era direcionado a uma nova aba no navegador, saindo do fluxo normal do e-commerce e acessando uma p\u00e1gina exclusiva para gerenciar a lista de casamento. Nessa p\u00e1gina, o usu\u00e1rio tinha a possibilidade de criar uma ou mais listas e adicionar os itens desejados.<\/p>\n\n\n

    \n
    \"Fluxo<\/figure>\n<\/div>\n\n\n

    Al\u00e9m disso, outra raz\u00e3o para adotar esse fluxo externo foi a exist\u00eancia de um sistema de gerenciamento de listas j\u00e1 estabelecido na plataforma VTEX. Esse sistema poderia ser adaptado para o novo componente de listas de casamento. Dado o prazo restrito de alguns meses para o projeto, essa abordagem se mostrou uma boa alternativa do ponto de vista administrativo, embora eu pessoalmente preferisse a vers\u00e3o com o bot\u00e3o direto na PDP como uma op\u00e7\u00e3o mais conveniente para os usu\u00e1rios.<\/p>\n\n\n\n

    Wireframes<\/h2>\n\n\n\n

    Sim, enfim a primeira tela, e fizemos dezenas deles! Na \u00e9poca eu amava usar o Balsamiq, achava maravilhoso arrastar aquelas linhas tortas e poder criar no fim um PDF naveg\u00e1vel. Os wireframes criados nessa ferramenta s\u00e3o de baixa fidelidade e isso n\u00f3s possibilitou testar, errar e aprimorar de forma r\u00e1pida sem medo de ser feliz. A vers\u00e3o final desse primeiro prot\u00f3tipo continha quase 30 p\u00e1ginas em tons de cinza naveg\u00e1veis a qual come\u00e7ava na p\u00e1gina do produto (PDP), passando por todas as etapas de cria\u00e7\u00e3o, edi\u00e7\u00e3o e manuten\u00e7\u00e3o de uma lista e por fim finalizando no checkout.<\/p>\n\n\n

    \n
    \"Wireframe\"<\/figure>\n<\/div>\n\n\n

    Com base nessas telas sem cores tivemos o aval para continuar com o prot\u00f3tipo em alta fidelidade.<\/p>\n\n\n\n

    Prot\u00f3tipo em Alta<\/h2>\n\n\n\n

    Antes de iniciar a cria\u00e7\u00e3o das telas, foi necess\u00e1rio desenvolver todo o Design System (DS). Para as cores e fontes, utilizamos o padr\u00e3o da VTEX, uma vez que o componente seria destinado a essa plataforma. A fonte utilizada foi a Fabriga, e foram escolhidos tons de rosa e azul para criar contrastes no projeto.<\/p>\n\n\n\n

    Saindo do Balsamiq e abrindo o Figma conclui a etapa do DS, depois foi mais f\u00e1cil ir criando todas as telas em alta fidelidade. Utilizando os wireframes como base e, alguns dias depois, todas as telas estavam finalizadas.<\/p>\n\n\n

    \n
    \"Prot\u00f3tipo<\/figure>\n<\/div>\n\n\n

    Conclus\u00e3o<\/h2>\n\n\n\n

    Ap\u00f3s alguns meses de trabalho, dezenas de telas criadas, v\u00e1rios caf\u00e9s tomados e algumas reuni\u00f5es que poderiam ser um e-mail o projeto foi finalizado. Ent\u00e3o se voc\u00ea usa uma lista seja ela de casamento ou de desejos em sites como a Hering, Panasonic, Motorola ou Mormaii saiba que tudo come\u00e7ou aqui.<\/p>\n\n\n\n

    Voc\u00ea pode visualizar o Figma do projeto clicando aqui<\/a>. L\u00e1, voc\u00ea ter\u00e1 como ver todas as telas dos prot\u00f3tipos tanto em alta quanto em baixa fidelidade, os componentes usados, design system, tudo o que foi falado aqui e um pouco mais.<\/p>\n\n\n\n