Cartman: uma ferramenta para a comunidade de ecommerce que surgiu de um desafio interno
Recentemente escrevi um texto falando sobre o Bolão Black Friday 2018, que me fez querer compartilhar outro projeto: o Cartman.
Aqui eu tento explicar, de forma bastante resumida, como foi todo o processo, da concepção até a entrega.
De onde brota esse tipo de projeto
Na VTEX temos, anualmente, duas edições do Fórmula, nossa hackathon interna. Em dois dias de intenso trabalho as pessoas interessadas em participar se organizam em pequenos times para gerar ideias e transformá-las em produtos.
Uma característica desse modelo de pensar e desenvolver soluções que me atrai bastante é o desafio de gerar valor com algo rapidamente. Foco, uso de métodos ágeis e decisões precisas são essenciais.
Shopping XP
O Shopping Experience é o grande time onde trabalho atualmente. Projetamos o fluxo de compra do consumidor desde a fase de descoberta até o fechamento da compra. Nesse fluxo, a etapa mais delicada é a última, a do checkout, que se inicia no carrinho de compras. É nesse momento que o consumidor manifesta uma real intenção de comprar o produto e o menor problema no caminho pode gerar uma desistência.
Testes e mais testes
Para minimizar o número de problemas que podem ocorrer no checkout, nosso time de QA segue um processo bastante cuidadoso de testes manuais e automáticos configurados no nosso sistema de integração contínua. Ele inclui testes unitários, testes de integração de APIs e testes de UI, além de um robô que realiza uma nova compra a cada minuto e garante o funcionamento do checkout nos principais cenários.
Durante o desenvolvimento de novas funcionalidades, o próprio time de Produto costuma realizar testes manuais em diferentes lojas, com diferentes cenários em diferentes ambientes.
Eis que surge o problema
O processo de adicionar itens ao carrinho não é nada rápido:
- Acesso a loja;
- Se o ambiente for privado, faço o login;
- Realizo uma busca ou acesso uma categoria;
- Abro a página de um produto (se eu quiser adicionar mais de um, abro várias páginas em diferentes abas do navegador);
- Se houver variações (cores, tamanhos, voltagens, etc), escolho uma opção de cada;
- Adiciono ao carrinho e posso começar a realizar minha tarefa.
Fomos percebendo que o tempo que estávamos gastando trabalhando no checkout poderia ser otimizado se houvesse uma ferramenta que nos ajudasse no fluxo de criar carrinhos.
Testamos algumas formas de agilizar esse processo, guardando links em documentos compartilhados, favoritando no navegador e até criando scripts na tentativa ter mais flexibilidade, mas que nunca funcionaram tão bem. Tínhamos um problema interessante a ser resolvido.
Voltando para o Fórmula, agora em 2018
Com o problema em mãos, montamos um time com 3 desenvolvedores, 1 designer e 1 analista de suporte. Fizemos um brainstorm para discutir outros problemas relacionados e entrevistamos algumas pessoas de times variados para entender a relação delas com o checkout. A partir daí, listamos as funcionalidades que poderiam compor o produto:
a. compartilhar uma cópia do carrinho (permitir outra pessoa gerar um carrinho com os mesmos itens);
b. gerar um novo carrinho com alguns itens;
c. gerar um novo carrinho com alguns itens e com todos os dados (pessoais, de entrega e pagamento);
d. simular carrinhos sem adicionar os itens de fato;
e. visualizar o orderform (JSON que contém todos os dados da compra) de forma amigável;
Identificamos também que o produto poderia ser útil para 3 grupos de usuários:
- designers e desenvolvedores do Shopping XP (público inicial);
- time de suporte, que atende chamados de questões relacionadas ao checkout;
- clientes e parceiros que precisam entender e validar se o checkout está funcionando da maneira como eles esperam.
Tínhamos com maior clareza nossa lista de funcionalidades e quem elas poderiam atender. Porém, obviamente, seria impossível projetar e desenvolver tudo em dois dias.
Priorizando
Considerando então os usuários e como cada funcionalidade se aplicaria no dia-a-dia deles, usamos uma adaptação simplificada do RICE para priorizar a lista e encontrar o que deveria ser feito primeiro. Consideramos dois critérios a serem avaliados com notas de 1 a 5 (1 = pouco e 5 = muito), individualmente:
- impacto: quanto a funcionalidade vai impactar os usuários?
- esforço: o desenvolvimento da funcionalidade é quão complexo?
Fazendo uma média entre as notas de cada pessoa para cada critério, chegamos nas notas finais e montamos um gráfico de impacto (eixo y) versus esforço (eixo x):
Mãos à obra
Com base nos esboços das telas, me juntei ao Pedrão (analista de suporte) e começamos a prototipar as telas usando os componentes em React do nosso Styleguide, enquanto a outra parte do time cuidava do desenvolvimento, que seria todo front-end.
À medida que o produto ia sendo desenvolvido, fomos encontrando algumas pedras no caminho:
- percebemos que erramos nas estimativas. Talvez devêssemos ter seguido o RICE mais à risca, que também considera graus de confiança nas estimativas;
- tivemos um certo grau de instabilidade no nosso ambiente de desenvolvimento que nos prejudicou na velocidade;
- nosso Styleguide também estava pouco maduro e precisamos gastar algum tempo melhorando alguns componentes para conseguir usá-los;
Ao final dos dois dias, conseguimos chegar em uma versão com as funcionalidades mais básicas, mas que infelizmente não poderia ser lançada. Como o Cartman funcionaria dentro do próprio carrinho de compras das lojas, corria o risco dele interferir no fluxo de compra de um consumidor, o que não poderia acontecer de forma alguma. Não tínhamos uma solução técnica naquele momento para resolver esse problema e tivemos que deixar o projeto em standby.
Alguns meses depois
Durante alguns meses, enquanto resolvíamos os problemas técnicos que nos impediam de publicar o Cartman, aproveitamos para, aos poucos, colher feedbacks, fazer pequenas melhorias na interface e nas funcionalidades e resolver alguns bugs, tudo com a colaboração de mais pessoas que se interessaram pelo projeto.
E finalmente lançamos.
Explicando as funcionalidades que implementamos nesta versão:
- Botão de acesso ao Cartman no canto inferior direito do carrinho de uma loja VTEX (visível apenas para pessoas com permissão);
- Tela inicial com todas as funcionalidades;
- Dados do carrinho;
- Detalhes de um item do carrinho;
- Adicionar um item através do ID;
- Adicionar itens aleatórios;
- Definir dados de marketing.
Fizemos um soft launch da primeira versão há menos de uma semana, na forma de um recurso nativo da plataforma, atendendo operadores de mais de 2.500 lojas, 580 empresas parceiras e todo o time interno da VTEX.
O que no começo tínhamos batizado de Checkout Debugger se transformou no Cartman, nome inspirado no Postman, uma ferramenta de auxílio em testes de chamadas para APIs e que é muito usada na VTEX.
Mas o desafio só começou. Os próximos passos serão colher feedbacks internos e externos (dessa vez com pessoas usando de fato) e acompanhar as métricas de uso para entender o impacto do produto no dia-a-dia dos usuários para direcionar nossas decisões a partir de agora.
Certa vez o Gabriel Galc falou que um bom designer não apenas resolve, mas encontra vários outros problemas a serem resolvidos. O Fórmula, como hackathon, cutuca nosso lado criativo e nos faz perceber, além do trabalho diário, oportunidades de criar novos produtos. E a cada ano as soluções se superam, gerando impacto positivo em toda a comunidade que trabalha com a VTEX.
Em breve volto a escrever trazendo números e resultados do Cartman!
Muito obrigado às pessoas incríveis que participaram e estão participando desse projeto: Pedro Oliveira, Ana Luiza Gomes, Gabriel Amboss, Hiran Tassinari, Pedro Coelho e Caio Oliveira.
