REGISTRO DE DOMÍNIO
Redesign da página de domínio da Hostgator.
Introdução
Empresa
A Hostgator é um companhia multinacional provedora de hospedagem de sites, registro de domínios, servidor VPS e dedicado, ferramentas para criação de websites, entre outros. Na sede presente no Brasil são desenvolvidos também os sites da Hostgator do México, Chile e Colômbia.
Indústria: e-commerce e hosting.
Desafio
Em 2020 a marca ganhou atualizações em sua identidade, com alterações de cores, iconografia, estilos de botões e de mudanças de posicionamento também. Com isso surgiu a oportunidade de rever toda a estrutura da página de registro de domínio que estava defasada tanto em identidade quanto em informação, sendo assim pouco atrativa para o usuário.
Plataforma: desktop e mobile.
Processo
Minha atribuição
Descoberta: Realizar pesquisa e analisar dados coletados.
Definição: Gerar insights através dos resultados e definir o problema.
Ideação: Formular a tangibilizar hipóteses.
Validação: Validar solução em protótipo com usuários e receber feedbacks.
Atuação em dupla em análise de dados, análise de heatmaps, pesquisa quantitativa, prototipação e teste de usabilidade.
Ferramentas
XD, Hotjar e Analytics.
Dúvidas sobre domínio
-
O que é domínio
-
Registro mais de um domínio
-
Transferência de domínio
-
Vinculação de e-mail ao domínio
Dúvidas sobre valores
-
Valores de renovação
-
Valores de extensões
-
Valores de domínio + hospedagem
Problemas técnicos
-
Falha no processamento do pedido
-
Dúvidas sobre a documentação para compra da extensão .com.br
Descoberta
Pesquisa
Para validar a usabilidade da página no Brasil e fundamentar os insights para uma nova página no site, inicialmente os recursos do Hotjar foram utilizados com a análise de mapa de calor das interações dos usuários identificando os pontos de maiores cliques e também os que não possuíam um grau de relevância elevado. Juntamente com esta análise foi realizada uma pesquisa qualitativa com usuários presentes na página interagindo em tempo real com os objetivos de entender a facilidade de navegação, a clareza do conteúdo e os pontos de melhoria.
Os dados coletados foram obtidos a partir de 1.297 respostas e compilados da seguinte forma:
O Hotjar também foi utilizado para fazer análise de mapa de calor e mapa de clique tanto do desktop quanto do mobile, onde os dois ambientes tem comportamentos parecidos.
A faixa vermelha abrange nitidamente o campo de busca de domínio que é a principal ação da página, mas uma fato que chamou a atenção foi o fato de ter a explicação do que é domínio juntamente com o vídeo logo abaixo na faixa laranja, contudo a interação com o vídeo era baixíssima.
A sessão sobre transferência de domínio estava já na faixa cinzenta do mapa, evidenciando que esta informação não estava em um posicionamento favorável.
Consultoria
Em sequência foi realizada uma consultoria com especialistas e departamentos internos para validar as seguintes questões:
-
Google EUA: explorar o mercado do mesmo seguimento e avaliar a experiência mobile.
-
Suporte e Vendas: identificar a relevância de assuntos abertos por clientes em tickets relacionados a domínio.
-
Supersonic: analisar a experiência de ciclos de pagamento e preço.
Os especialistas do Google trouxeram algumas referências de players de outros países com insights de posicionamento de informação na estruturação da página e uma avaliação bem detalhada de usabilidade e experiência do usuário, sinalizando também pontos de atenção na objetividade da página reforçando as palavras-chave por questão de SEO.
Os times de suporte e vendas trouxeram que as maiores dúvidas era sobre a falta de clareza no valor pago principalmente na renovação do domínio, a falta de clareza que o valor pago era somente pelo domínio e não por domínio mais hospedagem e muitos chamados sobre a falta de atenção e conferência no momento do registro resultando em erros de digitação.
A Supersonic é um consultoria especializada em CRO (Conversion Rate Optimization) focada em taxa de conversão e o time apresentou algumas melhorias que foram baseadas em análise de dados e teste A/B de periodicidade de ciclos de pagamento visando aumentar os resultados da conversão em domínio.
Teste de usabilidade
O objetivo do teste de usabilidade logo no início do projeto foi analisar a página original e diagnosticar a efetividade da página com a navegação, identidade e informações presentes na época através usuários reais e identificar com quais dúvidas e obstáculos eles se deparavam. Para isso, o escopo do teste era validar o entendimento sobre o que é um domínio, a clareza dos preços, a efetividade do carrossel de extensões, a usabilidade da busca por um domínio e o fluxo para encontrar a opção de transferência de domínio.
O teste foi realizado remotamente com 7 participantes com níveis diferentes de conhecimento sobre o tema, com idade de 25 a 40 anos, residentes de Santa Catarina, São Paulo e Rio de Janeiro. Totalizando 3 pessoas de times internos com pouco contato com o site e 4 pessoas externas sendo 2 clientes e 2 não clientes.
Os testes foram divididos entre dispositivos: 4 em desktop e 3 em mobile. Os resultados foram compilados da seguinte maneira:
Resultados sintetizados
-
Não têm certeza se entenderam corretamente quanto vão pagar pelo domínio no momento da renovação.
-
Usuários mais leigos não entenderam o que é um domínio e o que é uma extensão.
-
Comentaram que as ilustrações não chamam a atenção.
-
Alguns não encontraram ou não sabiam onde encontrar a opção de transferência do domínio.
-
Comentaram que gostam do seletor de extensões para ver outras opções além dos convencionais.
-
Comentaram que ao clicar em uma opção de extensão disposta no carrossel não fica claro que esta opção está selecionada.
-
Comentaram que as informações não ficam claras, talvez pela forma que estão distribuídas na página.
-
Não chegariam até o fim da página por acreditarem que não teria nada muito relevante (princpalmente no mobile).
-
Comentaram que ao digitar um domínio já existente no campo de busca, o feedback e a lista de opções não são visualmente atrativos.
Definição
Insights
Mantivemos as pesquisas e os dados em mente para validar e fundamentar nossas decisões de design, e assim foi possível mapear pontos de dores dos usuários e melhorias. Para oferecer uma experiência mais completa, sem atritos e de fácil navegação consideramos os itens abaixo como prioridades:
Requisitos
-
Atualização da página para a nova proposta de identidade e posicionamento da marca.
-
Melhoria do conteúdo das sessões e das perguntas frequentes de acordo com novo posicionamento.
-
Atualização informações e identidade do vídeo sobre domínio.
-
Auxílio ao usuário no entendimento simples e claro sobre o que é domínio e extensão.
-
Melhoraria no fluxo e reposicionamento da transferência de domínio.
-
Melhoraria em nomenclaturas e clareza de preços de domínio e renovação.
-
Melhoraria dos feedbacks quando os usuários digitam um domínio no campo de busca.
-
Apresentação eficiente todas as extensões disponíveis.
-
Melhoria na navegação mobile com práticas de usabilidade.
-
Navegação mais profunda na página através das âncoras.
Ideação
Benchmarking
Foram considerados as referências que o time do Google proporcionou na consultoria e também um estudo de concorrentes e similares nacionais e internacionais. Através desse estudo foi possível identificar melhoria de posicionamento de elementos, navegação mais fluida, insights de conteúdo de ajuda ao usuário e mudanças relacionadas a ux writing.
Nova identidade
O foco foi manter a consistência de acordo com o novo style guide global que tinha como premissa evidenciar o Snappy protagonista, utilizar a nova paleta básica de cores, estilo de botão, estilo padronizado de iconografia e tipografia maior, além de espaçamentos padronizados também.
Esta etapa foi importante para o desenvolvimento de novos componentes com a nova identidade que resultou em um ganho de tempo para a construção de outras páginas.
Design da solução
Para incentivar o ímpeto e minimizar a sobrecarga, mantivemos as tarefas simples e diretas. A interface do usuário foi projetada para ser calma, acolhedora e intuitiva, e o conteúdo é apresentado em blocos pequenos para não sobrecarregá-lo cognitivamente.
Começando pela área principal da página, foi invertida a ordem dos elementos, começando com a barra de busca com mais destaque e as sugestões de extensões já com o valor e desconto em seguida. Ainda na barra de busca foi tomada a decisão de remover o select de extensões e deixar o usuário livre para buscar livremente, então frase do input foi alterada de "pesquisar"para "seudominioperfeito.com"exemplificando para o usuário como fazê-lo. Caso o usuário clicasse em alguma extensão disposta embaixo da busca ela era adicionada ao campo de busca.
Para facilitarmos o fluxo da transferência de domínio e diminuirmos a quantidade de tickets abertos em relação a isso a sessão foi removida da página e se tornou um link logo abaixo do campo de busca do domínio, no campo de visão do usuário, levando-o para uma página dedicada apenas a transferência. Nesta página apresentamos todas as informações necessárias para se fazer uma transferência, incluindo um passo a passo e perguntas frequentes.
Adicionamos um carrossel de extensões mais populares com uma breve descrição de suas finalidades, contemplando também seus respectivos valores e descontos. Para direcionar o usuário a outras opções utilizamos uma âncora levando para a sessão que será descrita mais a frente.
Na intenção de ajudar o usuário mais leigo a compreender o que é domínio e extensão, todo o conteúdo da página foi revisto e simplificado. A sessão com explicação sobre domínio sofreu alteração textual e visual com bullets evidenciando os benefícios de se criar um domínio exclusivo. Como suporte a este conteúdo duas novas sessões foram adicionadas, uma com dicas de como criar um bom domínio que reflita o negócio do usuário e outra com um passo a passo explicando de forma simples como acontece o registro do domínio, além de mostrar visualmente o que é o domínio e o que é a extensão.
Como parte do novo posicionamento da marca, queríamos mostrar que a Hostgator era referência em hospedagem e registro de domínio, feita por especialistas, proporcionando segurança e confiança ao usuário. Para isso, uma sessão foi construída evidenciando os benefícios em fazer um registro com a empresa.
O que antes era uma sessão sem destaque, com ícones defasados e que não cumpriam a função de chamar a atenção do usuário com extensões direcionadas a empresas ou área de atuação e de localização também, passou a ter destaque através do conteúdo melhor construído, com imagens que refletiam o conteúdo que também sofreu alterações. As opções de extensões passaram a ter valores e serem clicáveis, e ao clicar, a extensão é adicionada automaticamente na barra de busca flutuante que permanece presente durante toda a rolagem da página.
As âncoras desta sessão e da sessão do carrossel de extensões populares conduzem o usuário até uma tabela que apresenta as extensões divididas por categorias, sendo elas destaques, novos, nacionais, internacionais e profissionais. Todas possuem os respectivos valores de contratação e renovação e ao clicar em uma opção a extensão é adicionada automaticamente na barra de busca flutuante.
Assim como todo o conteúdo da página foi revisto, as perguntas frequentes também foram atualizadas em informações e novas perguntas foram adicionadas de acordo com as dúvidas retiradas dos tickets abertos no suporte. Ao invés de de perguntas abertas, elas foram colapsadas com a intenção de dar liberdade o usuário abrir quando necessário e otimizar espaço da página.
Como especialistas no assunto, queríamos ajudar o usuário em toda sua jornada, principalmente fornecendo conteúdos explicativos e com dicas relevantes. Para isso, o blog da Hostgator também foi totalmente reestruturado ganhando maior relevância e assim adicionamos uma sessão ao final da página com conteúdos relacionados.
Um dos fatores que a consultoria do Google nos alertou foi otimizar e facilitar a navegação da página, principalmente no mobile. As âncoras adicionadas estrategicamente em algumas sessões ajudam os usuários a encontrarem com mais praticidade os assuntos de interesse. Essa interação favorece a navegação mais profunda da página, que antes constatamos que não estava satisfatória.
Outra maneira de proporcionar conforto ao usuário nesta navegação foi adicionar um menu interno na versão mobile, ele é acionado quando o usuário faz menção de subir a página. Entendemos que devido a proporção menor de tela de dispositivo a página se torna muito mais extensa do que a versão desktop e o menu foi uma forma de oferecer atalhos às sessões da página.
Validação
Teste de usabilidade
Para validar nossas hipóteses de solução decidimos fazer um novo teste e, com o protótipo pronto e navegável, conduzimos o total de 5 testes remotos com clientes e não clientes de 25 a 40 anos, residentes de Santa Catarina, São Paulo e Rio de Janeiro. Divididos entre dispositivos: 3 em desktop e 2 em mobile.
A estruturação da pesquisa tinha como objetivo validar a nova arquitetura da página, o fluxo para transferência de domínio, os conteúdos explicativos e a clareza dos valores. Algumas questões do roteiro do primeiro teste foram reutilizadas para uma comparação e novas tarefas foram adicionadas como, por exemplo, encontrar um domínio disponível para uma padaria.
Nesta tarefa conseguimos validar também os novos feedbacks positivo e negativo ao digitar um domínio na barra de busca além do entendimento dos valores a serem pagos. Adicionamos também uma outra tarefa para encontrar onde poderia ser feita a transferência e validar o entendimento do conteúdo da página.
Os resultados foram compilados da seguinte maneira:
Resultados sintetizados
-
Não entendem a informação e os preços relativos a compra do domínio + hospedagem
-
Não esperavam/acharam estranho a opção default de extensão na busca ser o ".com"
-
Esperavam que ao buscar o radical do domínio, todas as opções disponíveis estariam listadas (não apenas o .com)
-
Comentaram que um select de extensões poderia ajudar na busca (como era anteriormente)
-
Ao buscar um domínio sentiram falta do resultado .com.br
-
Não encontraram a explicação do asterisco sobre a hospedagem de sites
-
Disseram que não consideraram relevantes as informações dos bullets do feedkback e acharam as informações confusas e/ou redundantes
-
Questionaram sobre a possibilidade de encontrar domínio profissional não listado na página
Através desses dados foi possível listar todos os problemas relatados no teste em uma planilha e fazer uma análise de insights e sugestão de solução para cada item. Em seguida foi realizada uma avaliação baseada no grau de severidade de 0 a 4 e a soma desses valores indicaram os pontos mais críticos, sendo possível analisá-los e como time definir as prioridades.
Com esta definição conseguimos agilizar o desenvolvimento da página e lançá-la com oobjetivo de obter resultados da solução com interações de usuários em grande escala.
Aprendizados
Este projeto me ensinou o quão importante foi testar o cenário atual para já corrigirmos algumas falhas antes mesmo de projetarmos qualquer solução e não carregá-las adiante. Com o time focado em embasar cada decisão em dados resultou em um projeto robusto, focado no usuário e nos interesses da empresa também.
O processo todo de pesquisa foi essencial porque o contato com o usuário é poderoso demais na validação das hipóteses, dos fluxos, do entendimento dos termos e assim por diante. É preciso sensibilidade na escuta, mas também no que o usuário está fazendo, mas não está falando.
Um grande aprendizado que levo a partir deste projeto é que UX não é apenas resolver o problema, mas sim facilitar conversas sobre design, é analisar, processar e transformar as informações em algo útil para resultar em ótimo design de uma solução de fato efetiva. Uma solução que não está travada, porque a iteração é que vai mantê-la suscetível ao êxito.