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.
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.
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.
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.
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.
“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.
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.
“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.
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.
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.
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.
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
Last modified: 27/05/2020