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

Alguns meses atrás, minha equipe e eu finalmente assumimos o projeto que os departamentos de marketing em 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 havíamos decifrado a fórmula de um site SaaS que faz o impossível: ele realmente faz as pessoas entenderem o que nossa empresa faz.

Como levamos alguns anos para chegar aqui, como um profissional de marketing, gostaria de evitar que você trabalhasse e compartilhar nosso processo.

1. Removendo barreiras: partes interessadas limitadas e um MVP sólido

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

Para evitar essa armadilha, indiquei uma única parte interessada para cada aspecto do site - uma para design, uma para conteúdo e uma 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 se manteve verdadeiro mesmo quando o feedback veio de pessoas em cargos seniores.

Além disso, para combater o perfeccionismo extremo que frequentemente vejo no planejamento de projetos de marketing, pegamos emprestado nossa experiência com o produto 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 de melhorar continuamente.

• Trabalhe retroativamente - comece com uma data de lançamento (realista) e trabalhe retroativamente, para que todas as equipes se adaptem ao cronograma em vez de fornecer estimativas excessivamente cautelosas.
• Indique partes interessadas únicas - certifique-se de ter uma parte interessada para cada domínio, em nosso caso, que significa design, conteúdo e produto. Colete feedback de forma ampla, 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 uma liberação em fases.
• Veja os detalhes e reaja rapidamente - Use todas as suas ferramentas analíticas e UX para entender rapidamente a resposta às páginas que você libera e para iterar nelas.

2. As métricas que importam: Definição de metas e KPIs

Uma das primeiras coisas que fizemos foi avaliar os problemas que queríamos corrigir e definir 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 identificando as páginas principais para trabalhar. Para nós, isso significou focar em:

• A homepage
• Selecione as páginas do produto
• A página de preços
• Páginas de estudos de caso
• Criação de 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 no prazo.

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

• Aumentando a taxa de conversão para leads e melhorando a qualidade dos leads
• Melhorar a taxa de rejeição e aumentar o tempo no site e nas páginas por sessão
• Melhorar a percepção da marca
• Criação de melhor navegação no site
• Garantir que nossos vários produtos tenham melhor exposição
• Aumentando o tráfego orgânico
• Configurando a infraestrutura do site que é fácil de escalar

Cada empresa terá objetivos diferentes e precisará rastrear métricas diferentes, mas o processo de seleção das páginas principais 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 várias empresas - 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 provavelmente você está com pressa para lançar seu novo site, mas não quer se livrar de nada que funcione bem. Portanto, certifique-se de lançar tudo com um teste A / B e observe cuidadosamente 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 vez é um risco. Comece com páginas de baixo esforço e alto valor e, em seguida, aprenda e adapte seu plano.
• Construir uma infraestrutura analítica - Construa uma infraestrutura de medição com antecedência para garantir que você possa rastrear o impacto em cada KPI.

3. Inspirando-se: há algo a aprender com todos

Depois de identificar nossas áreas de problema, definir metas de melhoria e identificar o escopo do projeto, começamos a pensar sobre o layout e 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 marketing por email? ” Isso é o que estávamos tentando evitar. Então, começamos identificando o que os visitantes precisariam para realmente entender o Yotpo.

Criamos uma planilha, buscamos inspiração em mais de 150 outros sites, anotamos o que gostamos e não gostamos em cada um e, o mais importante, observamos se pudéssemos entender o que a empresa faz. Vimos elementos tão granulares como um botão de CTA ou tão amplos como layout geral, visuais ou tom de voz.

Na maioria das vezes, procuramos sites de empresas com as quais não estávamos familiarizados, portanto, nosso teste de compreensão da empresa seria 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 uma navegação incrível.
• Abrace o que não é familiar - observe principalmente as 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 o visitante deve conseguir entender 70% do produto sem nem mesmo ler uma palavra. Não se tratava apenas de encontrar o slogan certo - era mais mostrar do que contar.

Compreendendo que os visuais apresentados acima da dobra seriam essenciais para chamar a atenção do usuário, usamos este espaço para mostrar maquetes do nosso produto em ação. Em vez de deixar o conteúdo definir a liderança para o design, optamos pela abordagem oposta, liderando com design e tendo o conteúdo alinhado com a visão do nosso estúdio.

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

O resultado é um conteúdo direto e com valor em primeiro lugar, que permanece fiel ao caráter e à missão de Yotpo para 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 de simplificação de suas mensagens.
• Entenda a melhor maneira de descrever seu produto - se seu produto for visualmente atraente, destaque-o usando vários modelos e exibições de design.
• Mantenha-o interessante acima da dobra - pode parecer óbvio, mas as pessoas costumam esquecer que esse é o imóvel mais importante em todas as páginas. Invista mais no que você exibe lá.

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

Metas 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 facilmente falar com o setor de 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 o 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 páginas principais do novo site.

Estratégia de design:

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

6. Nos bastidores: páginas de produtos

Metas da página:

Cada uma das páginas de produtos 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 forma 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 de Comentários e avaliações, isso significava explicar todos os aspectos, desde como funciona a geração de conteúdo até as integrações com o Google e o Facebook. Embora a página seja longa e abrangente, é leve em texto e pesada em recursos visuais.

Estratégia de design:

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 quiséssemos usar vídeo, nos limitamos ao MVP para lançar as primeiras versões das páginas a tempo.

Com base no que aprendemos com o design da página de preços, sabíamos como deixar o fundo mais claro e silencioso, mantendo a ênfase nas maquetes, especialmente aquelas acima da dobra. As maquetes também são feitas em uma linguagem de design simplificada para torná-las fáceis de digerir.

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

7. Nos bastidores: página de clientes

Metas 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 de atualizar e criar um novo lar para nossos estudos de caso. Os elementos mais importantes nesta página são os logotipos da marca e os novos estudos de caso em vídeo que criamos para seu lançamento.

Estratégia de design:

Queríamos contar a história de como essas marcas cresceram com a 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 os logotipos do cliente e os estudos de caso em vídeo, que ocupam um espaço significativo na página. Além disso, construímos o novo modelo de estudo de caso, que está incorporado nesta página, para ser o mais flexível possível, de modo que pudesse contar a história única de cada marca, em vez de apenas incluir perguntas e respostas pré-fabricadas.

8. Nos bastidores: página inicial

Metas da página:

Acima de tudo, o objetivo da página inicial era que os visitantes entendessem rápida e facilmente o que 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 o cumprimento dessas metas, colocamos nossos colegas de trabalho diante de outras páginas iniciais de SaaS e, enquanto navegavam na página, perguntamos a eles qual elemento eles gostariam de ver a seguir. Com base em suas respostas, entendemos que o fluxo que a maioria das pessoas precisa de uma página inicial é:

Estratégia de design:

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

Usamos o fluxo descrito acima e a linguagem de design que aprimoramos nas páginas de preços e produtos para chamar a atenção do visitante com maquetes minimalistas que dão uma compreensão imediata do que Yotpo faz. Isso é seguido por uma tira do logotipo do cliente acima da dobra e, em seguida, uma visão geral rápida e objetiva de nossa oferta de produtos que leva os visitantes às páginas dos 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 " visão geral " ou visão panorâmica do produto, incentivando os visitantes a continuar nas páginas do produto para aprender mais.

Nossa pilha de tecnologia

Usamos todas as ferramentas que podíamos 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
• Analytics & Conversion - 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 enfatizou visuais nítidos, incluindo imagens de retina para quase todas as fotos e optando por SVG (gráficos vetoriais escaláveis) em vez de arquivos PNG sempre que possível. Ele também trabalhou amplamente em 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 em funcionamento, pode executá-lo com rapidez e eficácia. As coisas mais importantes que aprendemos na construção desse processo foram:

1. Nomeie um único proprietário para o projeto e mantenha as partes interessadas em um nível mínimo.
2. Defina um escopo realista para o projeto.
3. Avalie quais páginas devem ser removidas em vez de reprojetadas.
4. Estabeleça metas e KPIs claros.
5. Escolha um único KPI primário.
6. Obtenha inspiração de outros sites.
7. Compreenda a maneira mais fácil e eficaz de explicar o 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 o redesenho 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. :)