Estudo de caso de UX: como a Hubspot redesenhou sua home

A página inicial da HubSpot é visitada por mais de 4 milhões de usuários/as por mês, atendendo a mais de 18.000 empresas em mais de 90 países.

A home deles é o ponto principal de todo o ecossistema online da empresa. Portanto, quando a Hubspot cresceu massivamente e passou de uma empresa privada para uma organização global pública com vários produtos, foi necessário criar um novo design para sua página inicial.  

E isso precisava acontecer rapidamente, a tempo de um grande lançamento de uma linha de produtos totalmente nova, que aconteceu no evento anual da indústria da HubSpot, o INBOUND, a apenas 1,5 meses do início do projeto.

O UX designer, Austin Knight, liderou o projeto, apoiado por uma equipe de três pessoas (um designer visual, um desenvolvedor e um gerente de marketing). 

Fora da equipe principal, Knight também trabalhou com outros/as seis profissionais para posicionamento de produto, direitos autorais e desenvolvimento técnico.

Esta é a história de como um designer aplicou pesquisa focada, colaboração e o foco inabalável do Lean UX no/a cliente para fornecer resultados de ótimo desempenho em um cronograma apertado.

Estudo de caso de UX: como a Hubspot redesenhou sua home 1

 A seguir, um trecho do Guia de Projeto para Design de Produtos Corporativos. O guia gratuito explica as melhores práticas baseadas em projetos reais.

Etapa 1: pesquisa aprofundada e testes constantes

O projeto da HubSpot começou quando Knight estava introduzindo uma abordagem mais iterativa de Lean UX para sua equipe. 

Criado por Jeff Gothelf, o Lean UX alinha a estratégia de negócios ao processo de design, por meio de constantes "loops de aprendizado" (construir - medir - aprender).

Nesse caso, a primeira etapa deste trabalho foi mergulhar na análise de dados e na pesquisa de usuários/as para validar rapidamente suposições.

Analytics e mapa de calor

Ao contrário de alguns processos em que uma pessoa analista de marketing fornece à equipe de design insights sobre dados da web, Knight mergulhou diretamente nos dados por conta própria. 

Grandes quantidades de dados estavam disponíveis na HubSpot, Google Analytics e Mixpanel. O principal desafio foi classificar os dados para revelar padrões significativos.

Estudo de caso de UX: como a Hubspot redesenhou sua home 2

Knight encontrou um número significativo de usuários/as que exibiam os seguintes comportamentos:

  • Seguiam diretamente da página inicial para o preço (pré-desqualificando-se dos benefícios do produto)
  • Seguiam diretamente da página inicial para uma FAQ (sinalizando que eles não estavam encontrando as respostas para suas perguntas)
  • Seguiam diretamente da página inicial para a pesquisa no site (geralmente fazendo consultas de produtos, o que significa que eles não estavam obtendo rapidamente as informações das quais precisavam).

Ficou claro que, apesar de aprofundada, a página inicial carecia de informações críticas que diminuíam a conversão.

Knight também examinou os mapas de calor e os mapas de rolagem de página conduzidos com 25.000 usuários/as cada, fornecendo 467.308 pontos de dados exclusivos. 

Com informações de vários anos até os dias atuais, os mapas ajudaram Knight a entender melhor onde estava ocorrendo o desengajamento, incluindo a descoberta de que apenas 25% dos usuários/as rolavam a página inicial. 

Estudo de caso de UX: como a Hubspot redesenhou sua home 3

Gravação de Sessão

Finalmente, as gravações das sessões dos/as usuários/as agiram como uma pesquisa quantitativa/qualitativa híbrida.

Como as gravações eram ao vivo, anônimas e não detectadas, os resultados eram razoavelmente confiáveis, pois representavam o comportamento do/a usuário/a em um ambiente natural.

As gravações de sessões foram executadas continuamente durante todo o projeto de design, fornecendo um fluxo de dados para validar entrevistas com usuários/as e testes de usabilidade.

Estudo de caso de UX: como a Hubspot redesenhou sua home 4

Pesquisa qualitativa

Embora a pesquisa quantitativa te ajude a ver o "o quê", ela nem sempre revela o "porquê". Para mergulhar nas motivações por trás do comportamento e dos requisitos de experiência do/a usuário/a, os/as designers precisam entrevistar usuários/as e partes interessadas.

Leia também: Um case de UX Writing baseado em User Research

1. Entrevistas com clientes

Como 10% do tráfego da página inicial da HubSpot consistia em clientes da HubSpot efetuando o login ou procurando recursos, o novo design não podia negligenciar um grupo de usuários/as tão valioso.

Knight entrevistou clientes não apenas para validar as outras fontes de dados, mas também como base para determinar como a nova página inicial poderia fornecer conteúdo dinâmico para segmentos específicos.

Ao desenvolver um processo rigoroso de entrevista com o/a usuário/a e vincular perguntas aos resultados, ele obteve um feedback altamente focado.

2. Entrevistas com as partes interessadas

Como esse projeto mudaria literalmente a cara digital da HubSpot, Knight também entrevistou equipes de liderança executiva e produto, marketing, vendas e suporte ao cliente.

Ele então fez uma referência cruzada dos resultados com o feedback das entrevistas com usuários/as, transcrições de chamadas de suporte, redesenhos não solicitados da HubSpot, tweets, e-mails e até mesmo conversas que Knight teve com participantes de suas próprias palestras. 

Estudo de caso de UX: como a Hubspot redesenhou sua home 5

"Design centrado no ser humano, inspirado em dados - é isso que fazemos", disse Knight. “Os designers precisam interpretar os dados por conta própria e justificar objetivamente suas decisões de design sempre que possível. Trabalhamos em um setor em que os designers estão se tornando cada vez mais empoderados por dados quantitativos e qualitativos. Como tal, geralmente não tomamos decisões com base na opinião ou no que alguém "gosta". Tem que haver mais do que isso. A verdadeira mágica do designer de hoje é como eles podem interpretar dados implícitos e explícitos e transformar essas informações cuidadosamente em soluções de design".

Teste multivariado de pequenos ajustes

Finalmente, com base em toda a pesquisa inicial, Knight logo conseguiu projetar rapidamente algumas alterações incrementais para validação com testes multivariados.

Os testes ajudaram a qualificar ou desqualificar elementos de design específicos, o que influenciaria as decisões estratégicas de toda a equipe à medida que passavam para o completo redesenho da página inicial. 

Estudo de caso de UX: como a Hubspot redesenhou sua home 6

Etapa 2: Criando um design vivo

Conforme explicado no Guia de Projeto para Design de Produtos Corporativos, Knight seguiu um processo estruturado de “começar de forma ampla, testar, aprender, iterar e restringir a solução ideal a cada rodada”.

Prototipagem de baixa fidelidade (lo-fi)

Depois que a equipe decidiu três grandes variações, eless criaram protótipos de baixa fidelidade e acrescentaram fidelidade de acordo com a necessidade para apresentar aos stakeholders e obter feedback. 

Depois que uma direção principal foi selecionada, Knight permaneceu no estágio lo-fi por várias iterações antes de passar para o design visual.

De fato, os protótipos lo-fi têm uma semelhança impressionante com o produto final, dado todo o tempo gasto obtendo feedback e direcionamento de usuários/as neste momento crítico.

Estudo de caso de UX: como a Hubspot redesenhou sua home 7

"Nós testamos com usuários durante todo o projeto, desde o teste de protótipos de papel até o trabalho com nossos wireframes e o design visual", disse Knight. “A voz do cliente esteve presente durante todo o processo. Como designer, essa voz extra no seu ouvido é fundamental. Ela não toma todas as decisões por você, mas te ajuda a encontrar sua direção."

Mockups

Durante a fase de design visual, Knight trabalhou em estreita colaboração com seu designer visual.

Também é importante observar que Knight já estava discutindo o design com seu desenvolvedor em cada etapa do processo. 

Embora eles não fossem começar a codificar extensivamente até a prototipagem de alta fidelidade, todos trabalharam nas interações, garantindo que toda a equipe estivesse na mesma página.

A equipe criou uma estética moderna com cores ousadas, imagens em HD e uma estrutura de grade atípica. Essa estrutura de grade foi inspirada pela necessidade da nova página inicial representar um "design vivo". 

A estrutura modular baseada em grade se adapta bem aos dispositivos, o conteúdo poderia ser facilmente alterado ou movido e as seções principais poderiam ser atualizadas com conteúdo inspirado por stakeholders e sugestões de usuários/as. 

Estudo de caso de UX: como a Hubspot redesenhou sua home 8

Outro elemento interessante da estrutura atípica da grade foi o enquadramento da foto.

A equipe tirou um conjunto muito exclusivo de fotos com a intenção de encaixá-las perfeitamente na estrutura, permitindo que uma imagem fora de foco se expandisse para revelar a foto completa e informações adicionais.

O tratamento fotográfico tornou-se um elemento distinto de design e interação que aumentou muito o envolvimento do/a usuário/a. 

A equipe também desenvolveu conteúdo dinâmico personalizado para o/a usuário/a, que foi revelado como uma grande oportunidade nas primeiras entrevistas com os clientes.

Por fim, como 16% dos/as usuários/as da HubSpot acessam o site via celular e mais de 19% da população dos EUA têm necessidades específicas de acessibilidade, os elementos de compatibilidade e acessibilidade foram essenciais para o design e foram levados em consideração em todas as etapas do processo, incluindo o código.

Estudo de caso de UX: como a Hubspot redesenhou sua home 9

Como em todos os outros aspectos do projeto, as versões móvel e desktop foram iteradas juntas em um caminho paralelo.

Etapa 3: codificação e teste

O próximo passo foi criar um código limpo, usando o CMS próprio da empresa.

Knight, seu designer visual e seu desenvolvedor trabalharam lado a lado para garantir que o código fosse compatível com todos os dispositivos, testando o controle de qualidade dos protótipos regularmente.

Estudo de caso de UX: como a Hubspot redesenhou sua home 10

A equipe testou o site em vários dispositivos e resoluções e em várias versões do Chrome, Safari, Firefox, Internet Explorer, Edge, Opera e Yandex. 

A equipe usou o BrowserStack para emular o site em dispositivos reais e, como eles conheciam a porcentagem de usuários/as em cada plataforma, puderam priorizar as correções de acordo com o tamanho e a criticidade da audiência. 

Etapa 4: teste e iteração constantes

O novo site foi colocado no ar, como planejado, no palco do evento INBOUND, estreando à medida que os novos produtos e recursos eram anunciados pelos co-fundadores da empresa. 

O lançamento foi um enorme sucesso.

No entanto, como praticantes de Lean UX, os membros da equipe principal não podiam apenas descansar sobre os louros obtidos. 

A equipe fez uma referência cruzada dos dados do site que estava no ar no Google Analytics e na HubSpot, prestando muita atenção às seguintes métricas:

  • Taxa de conversão
  • Taxa de envio
  • Taxa de desistência
  • Conclusão do objetivo
  • Resumo da navegação (página de origem e página de destino)
  • Consultas de pesquisa específicas.

A equipe examinou apenas métricas personalizadas, como taxa de rejeição e tempo na página, para criar contexto para os principais KPIs mencionados acima.

Para continuar otimizando o design, a equipe executou mais testes de mapeamento de calor (25.000 usuários em várias sessões) e mais testes de usabilidade.

Estudo de caso de UX: como a Hubspot redesenhou sua home 11

Resultado: sucesso de UX baseado em dados

Este foi o primeiro projeto que Knight e sua equipe concluíram usando todo o processo de Lean UX, combinando dados e formulário para fornecer resultados comerciais rápidos. 

E como o site resultante é tão colaborativo e flexível quanto o próprio processo, as iterações podem ser feitas com facilidade e com frequência, mantendo o design atualizado e responsivo a quaisquer necessidades do/a usuário/a e objetivos de negócios que possam surgir.

Embora não possamos mergulhar em todos os números do projeto, podemos revelar os seguintes resultados comerciais pós-lançamento:

  • Maior envolvimento em CTAs críticos
  • Maior envolvimento com elementos de navegação
  • Aumento dos signups para teste
  • Menos estresse relatado entre a equipe de produto

A HubSpot agora acredita firmemente na abordagem do Lean UX: "Nossa equipe foi eficiente e colaborou bem", disse Knight. “Os usuários estiveram envolvidos durante todo o processo. E, como resultado, produzimos algo impactante do qual todos realmente podemos nos orgulhar.”

Este é um artigo traduzido, você pode acessar a versão original em inglês aqui.
Todos os créditos para o autor: Jerry Cao

twitterfacebooklinkedinyoutube-playinstagram