{"id":626,"date":"2025-09-20T00:43:40","date_gmt":"2025-09-20T00:43:40","guid":{"rendered":"https:\/\/mavicoutinho.com\/?p=626"},"modified":"2025-11-11T16:45:09","modified_gmt":"2025-11-11T16:45:09","slug":"wine-subscription-renewal","status":"publish","type":"post","link":"https:\/\/mavicoutinho.com\/pt\/wine-subscription-renewal\/","title":{"rendered":"Renova\u00e7\u00e3o de assinatura do Clube Wine"},"content":{"rendered":"

Projeto desenvolvido para implementar um checkout de renova\u00e7\u00e3o de assinaturas para o Clube Wine no app e site da Wine.com.br.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Problema<\/strong><\/h2>\n\n\n\n

A renova\u00e7\u00e3o de assinatura pelo cliente \u00e9 totalmente manual pela equipe de atendimento da Wine. Ao receber a oferta para renovar a assinatura, o cliente pode manifestar o interesse atrav\u00e9s de uma landing page e, ao resgatar a oferta, \u00e9 inserido em uma lista de renova\u00e7\u00f5es que a equipe de atendimento realiza manualmente um a um posteriormente.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Minha fun\u00e7\u00e3o<\/strong><\/h2>\n\n\n\n

Como Product Designer respons\u00e1vel pelo projeto, desenhei todo o projeto me baseando no design system atual da Wine, alinhei as decis\u00f5es de design junto com os stakeholders para atingir os objetivos do projeto e realizei a documenta\u00e7\u00e3o para o handoff com a equipe de desenvolvimento.
<\/p>\n\n\n\n

<\/p>\n\n\n\n

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

Para trazer um checkout simples, intuitivo e que pudesse concentrar todas as informa\u00e7\u00f5es importantes, utilizei a base do nosso checkout atual para trazer as informa\u00e7\u00f5es importantes:<\/p>\n\n\n\n

    \n
  • Checkout de assinatura do Clube Wine<\/strong>: neste checkout, o cliente pode fazer uma nova assinatura. Nele, h\u00e1 as informa\u00e7\u00f5es de endere\u00e7o de entrega, forma de pagamento, tipo de assinatura (modalidade e plano), itens da WineBox (caixa de vinhos enviada mensalmente), e detalhes dos valores pago.<\/li>\n<\/ul>\n\n\n\n

    <\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n
      \n
    • Outras refer\u00eancias utilizadas de inspira\u00e7\u00e3o para a constru\u00e7\u00e3o do checkout de renova\u00e7\u00e3o:<\/li>\n<\/ul>\n\n\n\n

      <\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Nestas refer\u00eancias, pude observar os seguintes aspectos:<\/strong><\/p>\n\n\n\n

        \n
      • Checkout resumido<\/strong>: Campos e seletores menos relevantes foram ocultados, exibindo apenas informa\u00e7\u00f5es essenciais (entrega e pagamento). Isso reduz a carga cognitiva, segue o princ\u00edpio de progressive disclosure e direciona o foco do usu\u00e1rio para a finaliza\u00e7\u00e3o da compra.<\/li>\n\n\n\n
      • Resumo de produtos<\/strong>: Itens adicionados aparecem em miniaturas compactas com informa\u00e7\u00f5es essenciais (nome e pre\u00e7o), economizando espa\u00e7o e refor\u00e7ando a hierarquia visual.<\/li>\n\n\n\n
      • Endere\u00e7o e pagamento resumidos<\/strong>: Informa\u00e7\u00f5es j\u00e1 preenchidas s\u00e3o apresentadas em resumo, fornecendo feedback r\u00e1pido, aumentando a confian\u00e7a do usu\u00e1rio e minimizando intera\u00e7\u00f5es desnecess\u00e1rias.<\/li>\n<\/ul>\n\n\n\n

        <\/p>\n\n\n\n

        Destaques visuais observados na imagem:<\/strong><\/p>\n\n\n\n

          \n
        • Hierarquia clara, com blocos bem delimitados para cada etapa do checkout.<\/li>\n\n\n\n
        • Miniaturas de produtos e resumos visuais que economizam espa\u00e7o.<\/li>\n\n\n\n
        • Bot\u00e3o de a\u00e7\u00e3o (\u201cFinalizar compra\u201d) com contraste forte, refor\u00e7ando o call-to-action.<\/li>\n\n\n\n
        • Tipografia e espa\u00e7amento consistentes, garantindo legibilidade e organiza\u00e7\u00e3o mental.<\/li>\n<\/ul>\n\n\n\n

          <\/p>\n\n\n\n

          Componentes<\/strong><\/h2>\n\n\n\n
          \"\"<\/figure>\n\n\n\n

          Checkout de renova\u00e7\u00e3o<\/strong><\/h2>\n\n\n\n
          \"\"<\/figure>\n\n\n\n\n\n

          Para a interface, foram usados os componentes que pudessem transmitir todas as informa\u00e7\u00f5es necess\u00e1rias:<\/p>\n\n\n\n

            \n
          • Detalhamento da renova\u00e7\u00e3o<\/strong>: quais valores est\u00e3o sendo inclu\u00eddos no pagamento.<\/li>\n\n\n\n
          • Forma de pagamento<\/strong>: uma vez que o cliente est\u00e1 renovando uma assinatura que j\u00e1 possui dados inseridos, em forma de pagamento aparece a op\u00e7\u00e3o selecionada atualmente, sendo poss\u00edvel trocar.<\/li>\n\n\n\n
          • Endere\u00e7o de entrega<\/strong>: assim como na forma de pagamento, o endere\u00e7o atual \u00e9 exibido, tamb\u00e9m sendo poss\u00edvel trocar.<\/li>\n\n\n\n
          • Cupom promocional<\/strong>: cada oferta de renova\u00e7\u00e3o possui um cupom atrelado, e este cupom possui uma porcentagem de desconto, al\u00e9m de poder contar tamb\u00e9m com brindes.<\/li>\n\n\n\n
          • Habilitar renova\u00e7\u00e3o autom\u00e1tica<\/strong>: o cliente pode decidir passar a renovar automaticamente a assinatura nas pr\u00f3ximas vezes, sem precisar passar pelo checkout de renova\u00e7\u00e3o novamente.<\/li>\n<\/ul>\n\n\n\n

            <\/p>\n\n\n\n

            Fluxo do usu\u00e1rio:<\/strong><\/h2>\n\n\n\n
              \n
            • Direcionamento<\/strong>: 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, \u00e9 direcionado para o app ou site Wine.<\/li>\n\n\n\n
            • Link din\u00e2mico<\/strong>: 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\u00e3o tenha o app instalado no celular.<\/li>\n\n\n\n
            • Checkout da renova\u00e7\u00e3o<\/strong>: Permite renovar imediatamente ou, caso ainda haja algum pedido a ser enviado para o cliente no ciclo atual, a renova\u00e7\u00e3o pode ser agendada com a oferta recebida.<\/li>\n<\/ul>\n\n\n\n

              <\/p>\n\n\n\n

              Fluxo do usu\u00e1rio no app Wine<\/strong><\/h2>\n\n\n\n
              \"\"<\/figure>\n\n\n\n

              Fluxo do usu\u00e1rio no site Wine<\/strong><\/h2>\n\n\n\n
              \"\"<\/figure>\n\n\n\n

              <\/p>\n\n\n\n

              Resultados<\/strong><\/h2>\n\n\n\n

              Implementado com sucesso tanto no app quanto no site, agilizando o processo de renova\u00e7\u00e3o para clientes e para a equipe de atendimento.<\/p>\n\n\n\n

              \n