Projeto desenvolvido para implementar um checkout de renovação de assinaturas para o Clube Wine no app e site da Wine.com.br.
Problema
A renovação de assinatura pelo cliente é totalmente manual pela equipe de atendimento da Wine. Ao receber a oferta para renovar a assinatura, o cliente pode manifestar o interesse através de uma landing page e, ao resgatar a oferta, é inserido em uma lista de renovações que a equipe de atendimento realiza manualmente um a um posteriormente.
Minha função
Como Product Designer responsável pelo projeto, desenhei todo o projeto me baseando no design system atual da Wine, alinhei as decisões de design junto com os stakeholders para atingir os objetivos do projeto e realizei a documentação para o handoff com a equipe de desenvolvimento.
Benchmarking
Para trazer um checkout simples, intuitivo e que pudesse concentrar todas as informações importantes, utilizei a base do nosso checkout atual para trazer as informações importantes:
- Checkout de assinatura do Clube Wine: neste checkout, o cliente pode fazer uma nova assinatura. Nele, há as informações de endereço de entrega, forma de pagamento, tipo de assinatura (modalidade e plano), itens da WineBox (caixa de vinhos enviada mensalmente), e detalhes dos valores pago.
- Outras referências utilizadas de inspiração para a construção do checkout de renovação:
Nestas referências, pude observar os seguintes aspectos:
- Checkout resumido: Campos e seletores menos relevantes foram ocultados, exibindo apenas informações essenciais (entrega e pagamento). Isso reduz a carga cognitiva, segue o princípio de progressive disclosure e direciona o foco do usuário para a finalização da compra.
- Resumo de produtos: Itens adicionados aparecem em miniaturas compactas com informações essenciais (nome e preço), economizando espaço e reforçando a hierarquia visual.
- Endereço e pagamento resumidos: Informações já preenchidas são apresentadas em resumo, fornecendo feedback rápido, aumentando a confiança do usuário e minimizando interações desnecessárias.
Destaques visuais observados na imagem:
- Hierarquia clara, com blocos bem delimitados para cada etapa do checkout.
- Miniaturas de produtos e resumos visuais que economizam espaço.
- Botão de ação (“Finalizar compra”) com contraste forte, reforçando o call-to-action.
- Tipografia e espaçamento consistentes, garantindo legibilidade e organização mental.
Componentes
Checkout de renovação
Para a interface, foram usados os componentes que pudessem transmitir todas as informações necessárias:
- Detalhamento da renovação: quais valores estão sendo incluídos no pagamento.
- Forma de pagamento: uma vez que o cliente está renovando uma assinatura que já possui dados inseridos, em forma de pagamento aparece a opção selecionada atualmente, sendo possível trocar.
- Endereço de entrega: assim como na forma de pagamento, o endereço atual é exibido, também sendo possível trocar.
- Cupom promocional: cada oferta de renovação possui um cupom atrelado, e este cupom possui uma porcentagem de desconto, além de poder contar também com brindes.
- Habilitar renovação automática: o cliente pode decidir passar a renovar automaticamente a assinatura nas próximas vezes, sem precisar passar pelo checkout de renovação novamente.
Fluxo do usuário:
- Direcionamento: O fluxo no app e web possuem a mesma origem: o cliente recebe a oferta em um canal externo (e-mail, SMS, ou outros), e ao interagir com a oferta, é direcionado para o app ou site Wine.
- Link dinâmico: A oferta pode ser aberta no app, caso o cliente esteja usando o celular e tenha o app instalado, ou aberta no site, caso o cliente esteja pelo computador ou não tenha o app instalado no celular.
- Checkout da renovação: Permite renovar imediatamente ou, caso ainda haja algum pedido a ser enviado para o cliente no ciclo atual, a renovação pode ser agendada com a oferta recebida.
Fluxo do usuário no app Wine
Fluxo do usuário no site Wine
Resultados
Implementado com sucesso tanto no app quanto no site, agilizando o processo de renovação para clientes e para a equipe de atendimento.