A história por trás da landing page de planos da Nuvemshop

Bruno Rodrigues
tech nuvemshop
Published in
6 min readNov 13, 2019

--

O que fizemos com a landing page de Preços da Nuvemshop

O ano de 2019 vem sendo um ano de muitos projetos estratégicos da Nuvemshop e grande parte deles estão passando pelas equipes de Design e Research. Um dos grandes exemplos é nosso rebranding, que você já deve ter acompanhado em maio deste ano. :)

Neste artigo eu, Bruno, e o Pedro, User Researcher da Nuvemshop, vamos contar um pouco sobre um novo desafio que tivemos desde janeiro: repensar nosso sistema de precificação, bem como a página de planos e preços no site.

Já dá pra perceber que é uma iniciativa de pesquisa, com uma interface grande com muitas áreas da empresa, né? Vamos lá! 😉

Primeiro, vamos alinhar! Por que ”repensar”?

Quando falamos dessa forma, significa que queremos ir além da construção do design/layout; é sobre pensar de forma estratégica antes mesmo de colocar em prática qualquer ideia visual que a gente tenha em mente.

Mas para que isso seja real, precisamos de um processo para seguir um determinado fluxo e trabalhar em colaboração com diferentes equipes, mas com o mesmo objetivo.

Início

Tudo começou quando recebemos algumas demandas top-down, que, ao mesmo tempo, foram solicitações de pesquisa. Isso mesmo, não somente recebemos ações para executar soluções, mas principalmente para entender problemas e desafios.

Iniciamos uma fase de conversas com clientes, buscando entender principalmente a geração de valor da nossa plataforma e ecossistema de parceiros. É claro que foi uma pesquisa de precificação, mas aqui já vai uma dica: jamais fizemos aquela famosa pergunta: “O que você pensa sobre nossos preços?”

Ação!

À medida que íamos entrevistando clientes, começamos a formatar nosso sistema de planos e preços baseados no que ouvimos e também do que monitoramos no mercado. Fizemos alguns Testes A/B, envolvendo tanto conteúdo, quanto layout e pudemos concluir muitas coisas importantes, interpretando os resultados. Mas algo ainda não estava “redondo”, como costumamos falar na empresa… Foi aí que pensamos em unir ainda mais os esforços de Research e Design.

O poder da colaboração

A página de planos e preços da Nuvemshop tem impacto em diversas áreas da empresa e fomos maturando isso ao longo das semanas. Daí entendemos que, além das conversas com clientes, para deixar essa página ainda melhor, precisaríamos juntar pessoas-chave das principais equipes que têm contato com clientes e parceiros, para trabalhar todos juntos na solução. A partir de então começarmos a nos aproximar de pessoas de Finanças, Customer Success, UX, Research, Design, Sales, AppStore, Partners e as convidamos para uma ação colaborativa.

O processo

Depois de termos o objetivo muito bem definido, que foi o de recriar nossa página de planos e preços, precisamos criar um processo. É fato que existem diversos caminhos, mas precisávamos de algo mais dinâmico e interativo, levando em consideração que temos profissionais de áreas totalmente diferentes trabalhando junto e o tempo que era escasso na época.

Desde o início já pensamos em utilizar muito do nosso conhecimento em Design Thinking e UX Research e foi assim que nasceu o que chamamos de Workshop de Co-criação, o qual é dividido em três partes.

No nosso caso, como tínhamos cerca de 8 pessoas numa sala, dividimos em 2 grupos.

Agora explicamos, em linhas gerais, como funciona o Workshop de Co-criação da Nuvemshop.

#1 Solução atual

Nesta parte inicial, exploramos literalmente a solução atual, neste caso, a landing page de planos e preços da Nuvemshop. Dividimos a exploração em dois quadros:

Quadro de Problemas e Oportunidades da ‘Solução atual’ (landing page)

Explicando a imagem acima:

Problemas

  • Durante 10 minutos pedimos que todos analisassem a landing page e documentassem todos os problemas, de copywriting a visibilidade de botões, imagens, banners, etc.

Oportunidades

  • Todos tiveram 10 minutos para documentar tudo que entendiam ser útil para o usuário e que não estávamos levando em consideração na solução atual (landing page).

Depois de preencherem tudo, cada grupo teve que apresentar para todos, em 5 minutos.

#2 Negócio atual

Aqui deixamos de lado a landing page e pensamos no negócio como um todo, pensando do lado do produto e da empresa em si. A partir disso separamos em Vantagens e Desvantagens:

Quadro de Desvantagens e Vantagens do ‘Negócio atual’

Desvantagens

  • Foram 10 minutos para olhar “dentro de casa” e ver o que está fora do lugar. Os participantes documentaram tudo que deixa a empresa em desvantagem.

Vantagens

  • Todos tiveram 10 minutos para analisar e documentar as vantagens do nosso negócio e o que podemos explorar mais efetivamente no projeto.

Assim como na etapa anterior, depois de preencherem tudo, cada grupo teve que apresentar para todos, em poucos minutos.

#3 Prototipagem

Nessa etapa, sem a ajuda de um Designer, os dois times criaram modelos visuais no papel de como seria a landing page baseado no que foi consolidado das etapas anteriores, esse processo é realizado com lápis e papel, neste caso cartolinas, para que todos tenham total liberdade e não fiquem presos a nenhum software de criação.

Prototipagem — Processo realizado em cartolinas

Resultado

Com uma dinâmica super simples, que durou cerca de 2 horas, conseguimos entender perfeitamente quais eram nossos desafios e nas semanas seguintes começamos a atuar em soluções envolvendo UI e UX.

Dentre os principais resultados positivos com os insights do Workshop de Co-criação e do nosso processo de pesquisa, podemos destacar alguns:

#1- Inclusão de um componente interativo com exibição dos valores finais de forma dinâmica (mensal, trimestral e anual). Em média 90% dos usuários utilizam esse recurso antes de escolher um plano.

Heatmap com cliques

#2- Sobre a ancoragem que fizemos do plano “Influência. As pessoas estão realmente vendo mais esse plano e lendo todas as informações relacionadas a custos e recursos diferenciais.

Eyetracking do card com detalhes do plano “Influência”

#3- Esse era um dos nossos maiores receios, pois era diferente de tudo o que já havíamos feito na história dessa landing page. Decidimos não mostrar uma tabela comparativa com todos os recursos logo “de cara”, mas sim deixar um botão logo abaixo dos cartões comparativos: “Ver todos os recursos”. Os resultados mostram que as pessoas sim, estão clicando ali.

Heatmap do link para ‘Ver todos os recursos’

#4- Sobre o nosso plano Empresarial, resolvemos destacá-lo ainda mais na landing page nessa nova versão e, mesmo sendo um plano bem sênior, as pessoas estão parando muito mais neste banner para ler o que está escrito.

Heatmap da seção para o plano Empresarial

Conclusão

Esses são alguns dos resultados que obtivemos desde o lançamento, que tem sido satisfatórios até o momento. Inclusive, vem dado tão certo, que aplicamos o mesmo padrão para a landing page de Tiendanube, nossa operação na Argentina.

Mas não paramos por aqui, ainda temos um longo caminho pela frente, continuamos aprendendo e melhorando com a ajuda dos nossos clientes, porque, antes de potencializar histórias de sucesso, precisamos oferecer uma experiência incrível no momento de aquisição dos nossos planos e, é claro, em toda a trajetória com nossos serviços.

Quer mais?

Além desse conteúdo temos muito mais sobre produto, engenharia, design, UX, marketing, SEO, etc. Pega uma xícara de café e explore:

--

--