Como construímos um site SaaS que as pessoas realmente entendem

Alguns meses atrás, minha equipe e eu finalmente assumimos o projeto que os departamentos de marketing de todo o mundo (incluindo o nosso) continuam adiando: reconstruímos nosso site.

E então, vimos um aumento de 93% na geração de leads.

Imediatamente, percebemos que deciframos a fórmula para um site SaaS que faz o impossível: na verdade, faz as pessoas entenderem o que nossa empresa faz.

Como demoramos alguns anos para chegar até aqui, como colega de marketing, queria poupar você do trabalho e compartilhar nosso processo.

1. Remoção de obstáculos: partes interessadas limitadas e um MVP sólido

A maior queda de qualquer projeto de alto risco é muitos cozinheiros na cozinha.

Para evitar essa armadilha, nomeei um único stakeholder para cada aspecto do site – um para design, um para conteúdo e outro para produto. Outras pessoas tiveram a oportunidade de fornecer feedback, mas as decisões finais foram tomadas exclusivamente por esses três proprietários. Isso era verdade mesmo quando o feedback vinha de pessoas em cargos seniores.

Além disso, para combater o extremo perfeccionismo que tenho visto com frequência no planejamento de projetos de marketing, pegamos emprestado nossa experiência com produtos e pressionamos por um lançamento gradual com um MVP (produto mínimo viável) e fases para cada página. Isso nos permitiu trabalhar mais rápido, mas também criou uma oportunidade para melhorar continuamente.

• Trabalhe de trás para frente – Comece com uma data de lançamento (realista) e trabalhe de trás para frente, para que todas as equipes se adaptem à linha do tempo em vez de fornecer estimativas excessivamente cautelosas.
• Nomeie partes interessadas únicas – Certifique-se de ter uma parte interessada para cada domínio, no nosso caso, isso significava design, conteúdo e produto. Colete feedback amplamente, mas limite as decisões a essas pessoas.
• Escolha um proprietário do projeto – Deve haver um único proprietário para o projeto como um todo. Essa pessoa será responsável por tomar decisões quando houver conflito (e haverá conflito).
• Não espere pelo produto perfeito – Crie um MVP para cada página, veja se ele move a agulha e conte com um lançamento em fases.
• Conheça os detalhes e reaja rapidamente – Use todas as suas ferramentas de análise e UX para entender rapidamente a resposta às páginas que você lança e para iterar nelas.

2. As métricas que importam: Definir metas e KPIs

Uma das primeiras coisas que fizemos foi fazer um balanço dos problemas que queríamos corrigir e estabelecer metas para sua melhoria. Estávamos lidando com muitos problemas: baixa taxa de conversão, informações desatualizadas, design desatualizado, explicação limitada de nossa oferta de vários produtos, nenhuma página de clientes e uma página de preços pouco clara.

Determinamos que a única maneira de fazer um trabalho completo em um período de tempo razoável seria identificar as páginas-chave nas quais trabalhar. Para nós, isso significava focar em:

• A página inicial
• Selecione as páginas do produto
• A página de preços
• Páginas de estudos de caso
• Criando uma página de clientes

Isso também significou desistir de várias páginas que queríamos abordar para garantir que o projeto fosse lançado a tempo.

Para acompanhar o sucesso, definimos as seguintes metas e KPIs:

• Aumentar a taxa de conversão em leads e melhorar a qualidade dos leads
• Melhorar a taxa de rejeição e aumentar o tempo no site e as páginas por sessão
• Melhorando a percepção da marca
• Criando uma melhor navegação no site
• Garantir que nossos vários produtos obtenham melhor exposição
• Aumentando o tráfego orgânico
• Configurando a infraestrutura do site que é fácil de dimensionar

Cada empresa terá objetivos diferentes e precisará acompanhar métricas diferentes, mas o processo de selecionar as páginas-chave para trabalhar primeiro lhe dará uma visão rápida e clara do que está funcionando e do que não está antes de refazer todo o seu site.

• Atenda às necessidades de toda a empresa – Métricas como taxa de conversão, taxa de rejeição etc. não são tudo. Busque feedback qualitativo no site de sua equipe de RH, gerente de marca, equipe de vendas e CEO também.
• Teste A/B – Sim, parece óbvio, e você provavelmente está com pressa para lançar seu novo site, mas não quer se livrar de nada que funcione bem. Portanto, certifique-se de liberar tudo com um teste A/B e observe atentamente os resultados.
• Defina um KPI primário – Ter uma única métrica primária ajudará você a tomar decisões quando houver conflito, no nosso caso foi a taxa de conversão para liderar.
• Lançamento em fases – Reconstruir todo o site de uma só vez é um risco. Comece com páginas de baixo esforço e alto valor e, em seguida, aprenda e adapte seu plano.
• Crie uma infraestrutura de análise – Crie uma infraestrutura de medição com antecedência para garantir que você possa acompanhar o impacto em cada KPI.

3. Inspiração: há algo a aprender com todos

Uma vez que identificamos nossas áreas problemáticas, estabelecemos metas de melhoria e identificamos o escopo do projeto, começamos a pensar no layout e no design.

Pense em quantos sites SaaS você visitou e saiu sem ter uma ideia real sobre o que a empresa faz. “Algo a ver com atendimento ao cliente? Talvez e-mail marketing?” Era isso que estávamos tentando evitar. Então começamos identificando o que os visitantes precisariam para realmente entender o Yotpo.

Criamos uma planilha, coletamos inspiração de mais de 150 outros sites, anotamos o que gostamos e não gostamos em cada um e o mais importante, observamos se conseguimos entender o que a empresa faz. Analisamos elementos tão granulares quanto um botão de CTA ou tão amplos quanto o layout geral, recursos visuais ou tom de voz.

Na maioria das vezes, analisamos sites de empresas com as quais não estávamos familiarizados, para que nosso teste de compreensão da empresa fosse genuíno.

• Não perca sua primeira impressão – Não se esqueça de fazer anotações na primeira vez que visitar um site. As primeiras impressões são críticas e, como dizem, você não terá uma segunda chance.
• Faça uma lista – Você pode aprender com todos. Crie uma lista de sites para se inspirar. Alguns sites terão um ótimo design, alguns ótimos microcópias e outros navegação incrível.
• Abrace o desconhecido – Olhe principalmente para empresas que você não conhece para ver se o site delas transmite claramente o que elas fazem.

4. O que vem primeiro, design ou conteúdo?

Nosso produto é super visual, tanto que os visitantes devem conseguir entender 70% do produto sem sequer ler uma palavra. Não se tratava apenas de encontrar o slogan certo – tratava-se de mostrar em vez de contar.

Entendendo que os visuais apresentados acima da dobra seriam fundamentais para chamar a atenção do usuário, usamos este espaço para mostrar maquetes do nosso produto em ação. Em vez de ter o conteúdo definido como líder do design, adotamos a abordagem oposta, liderando com o design e fazendo com que o conteúdo se alinhasse com a visão do nosso estúdio.

Nosso incrível profissional de marketing de conteúdo, Mel, usou a estrutura de design em primeiro lugar para refinar a estratégia de conteúdo do site e chegar ao que mais importa para os clientes em potencial: como o Yotpo pode ajudá-los. Ela fez a pesquisa para entender completamente o setor de comércio eletrônico e os pontos problemáticos típicos. Em seguida, ela enquadrou as soluções em um formato rápido e fácil de ler que complementava a estrutura do design, ao mesmo tempo em que orientava os usuários com etapas acionáveis ​​para descobrir mais sobre nossos produtos.

O resultado é um conteúdo direto e de valor que permanece fiel ao caráter e à missão da Yotpo de ajudar as marcas a terem sucesso.

• Deixe o conteúdo seguir o design – Se sua equipe de conteúdo for forte o suficiente para escrever direto ao ponto, comece com o design e faça com que eles escrevam de acordo com o limite de caracteres. É um desafio, mas também é um exercício para simplificar suas mensagens.
• Entenda a melhor maneira de descrever seu produto – se seu produto for visualmente atraente, destaque-o usando muitos modelos e exibindo o design.
• Mantenha-o interessante acima da dobra – Pode parecer óbvio, mas as pessoas geralmente esquecem que esse é o espaço mais importante em cada página. Invista pensamento extra no que você exibe lá.

5. Nos bastidores: página de preços

Objetivos da página:

Era importante para nós tornar nossos preços fáceis de entender. Optamos por agrupar nossos planos premium em um guarda-chuva e nosso plano gratuito em outro. Dessa forma, os visitantes interessados ​​em nossa assinatura paga podem falar facilmente com as vendas para saber mais, e os interessados ​​no plano gratuito podem começar imediatamente. Também queríamos incluir um FAQ detalhado para responder a quaisquer perguntas que os visitantes possam ter.

Nosso talentoso estúdio de design - especialmente nosso diretor de arte, Shiri, e designer de produto sênior, Eliko - pegou esses objetivos e correu com eles. Nesta seção e nas seguintes, eles explicarão a estratégia de design por trás de cada uma das principais páginas do novo site.

Estratégia de projeto:

Como o objetivo era fazer com que as pessoas entendessem e clicassem nos planos, nós os colocamos na hierarquia superior. O fundo foi criado intencionalmente para ser mais suave e leve para não distrair das caixas de planta. Ainda assim, usamos o fundo como uma oportunidade para representar a marca Yotpo com sombreamento degradê e formas geométricas sutis. Essa estrutura geral, desenvolvida para atender aos objetivos da página de preços, provou ser uma base realmente eficaz para outras páginas do site.

6. Nos bastidores: páginas de produtos

Objetivos da página:

Cada uma das páginas de produto incluídas no redesenho, ou seja, Avaliações e Avaliações e Marketing Visual, precisava explicar todas as funções de um produto super complexo de uma maneira que as pessoas pudessem entender em alguns segundos. Além disso, queríamos mostrar os diferentes casos de uso para cada produto. Por exemplo, na página Reviews & Ratings, isso significava explicar todos os aspectos, desde como funciona a geração de conteúdo até as integrações com Google e Facebook. Embora a página seja longa e abrangente, é leve em texto e pesada em recursos visuais.

Estratégia de projeto:

Rapidamente determinamos que os modelos de nossos produtos em ação seriam a maneira mais simples de fazer os visitantes entenderem como eles funcionam. Embora originalmente queríamos usar vídeo, mantivemos o MVP para obter as primeiras versões das páginas a tempo.

Com base no que aprendemos ao projetar a página de preços, sabíamos tornar o plano de fundo mais leve e silencioso, mantendo a ênfase nos modelos, especialmente os acima da dobra. Os mockups também são feitos em uma linguagem de design simplificada para torná-los fáceis de digerir.

O design de mockup-first responde a uma série de outras preocupações práticas. Em primeiro lugar, os mockups são compatíveis com dispositivos móveis por natureza, tanto por seu tamanho quanto por sua capacidade de transmitir muitas informações em um formato minimalista. Em geral, projetar com dispositivos móveis em mente força você a considerar o que é necessário e o que não é, e isso certamente foi verdade para os modelos. Além disso, esse formato também é facilmente escalável para futuras páginas de produtos à medida que nossa oferta cresce.

7. Nos bastidores: página de clientes

Objetivos da página:

A página de clientes foi uma nova adição ao nosso site. Estávamos procurando uma maneira eficaz de mostrar as marcas incríveis que usam o Yotpo e atualizar e criar um novo lar para nossos estudos de caso. Os elementos mais importantes desta página são os logotipos da marca e os novos estudos de caso em vídeo que criamos para o seu lançamento.

Estratégia de projeto:

Queríamos contar a história de como essas marcas cresceram com o Yotpo, mas também a importância do conteúdo gerado pelo usuário como um todo. A peça principal para contar essas histórias são os logotipos dos clientes e os estudos de caso em vídeo, que ocupam um espaço significativo na página. Além disso, criamos o novo modelo de estudo de caso, que está incorporado nesta página, para ser o mais flexível possível, de modo que possa contar a história única de cada marca, em vez de incluir apenas perguntas e respostas simples.

8. Nos bastidores: página inicial

Objetivos da página:

Acima de tudo, o objetivo da página inicial era que os visitantes entendessem rápida e facilmente o que o Yotpo faz antes de rolar para baixo. Também queríamos apresentar nossa oferta de vários produtos e mostrar nosso maior patrimônio: nossos clientes. Por fim, a página inicial precisava servir como uma página de entrada que deixasse os visitantes curiosos para saber mais sobre nossos produtos.

Para garantir que alcançamos esses objetivos, colocamos colegas de trabalho na frente de outras páginas iniciais de SaaS e, à medida que navegavam na página, perguntamos a eles qual elemento eles queriam ver em seguida. Com base em suas respostas, entendemos que o fluxo que a maioria das pessoas precisa de uma página inicial é:

Estratégia de projeto:

Nosso maior desafio para a página inicial foi chamar a atenção dos visitantes imediatamente. Nossa pesquisa nos mostrou que muitos sites SaaS hoje estão usando ilustrações bonitas para atrair visitantes - mas queríamos algo mais substancial para manter os visitantes envolvidos.

Usamos o fluxo descrito acima e a linguagem de design que aprimoramos nas páginas de preços e produtos para atrair a atenção do visitante com modelos minimalistas que fornecem uma compreensão imediata do que o Yotpo faz. Isso é seguido por uma faixa com o logotipo do cliente acima da dobra e, em seguida, uma visão geral rápida e direta de nossa oferta de produtos que leva os visitantes às páginas de produtos. Com a maior parte das maquetes no topo, pudemos usar ilustrações para apoiar o conteúdo abaixo.

O resultado geral é uma página que oferece uma espécie de “powershot” ou visão panorâmica do produto, incentivando os visitantes a continuar nas páginas do produto para saber mais.

Nossa pilha de tecnologia

Usamos todas as ferramentas que pudemos para criar o novo site e medir os resultados. Aqui está uma olhada em nossa pilha de tecnologia:

• Prototipagem e design – Balsamiq, InVision, Sketch, Photoshop, Illustrator e After Effects
• Análise e conversão – Drift, VWO, Mixpanel, Amplitude, Hotjar, FullStory
• Gerenciamento de Projetos – Smartsheet, Trello

Quando se trata de desenvolvimento, nosso assistente de desenvolvimento David trabalhou com nossa equipe de design para dar vida ao site. Ele usou componentes reutilizáveis ​​em todo o site e colocou ênfase em visuais nítidos, incluindo imagens de retina para quase todas as fotos e optando por SVG (gráficos vetoriais escaláveis) em arquivos PNG sempre que possível. Ele também trabalhou amplamente no SCSS para obter acesso a mais opções ao desenvolver o site.

Conclusão

Reconstruir um site é uma tarefa importante, mas quando você tem um processo sólido, você pode realizá-lo de forma rápida e eficaz. As coisas mais importantes que aprendemos na construção desse processo foram:

1. Nomeie um único proprietário do projeto e mantenha as partes interessadas no mínimo.
2. Defina um escopo realista para o projeto.
3. Avalie quais páginas devem ser retiradas em vez de redesenhadas.
4. Defina metas e KPIs claros.
5. Escolha um único KPI primário.
6. Colete inspiração de outros sites.
7. Entenda a maneira mais fácil e eficaz de explicar seu produto.
8. Lidere com design sempre que possível. O conteúdo pode seguir e será mais forte por isso.
9. Vá para uma liberação gradual.
10. Teste A/B de tudo.

Se você quiser saber mais sobre a reformulação do nosso site, ou se tiver alguma dúvida sobre o que escrevi aqui, sinta-se à vontade para entrar em contato aqui. Eu ficaria feliz em conversar. :)