Como melhorei com UX/UI o site do software da empresa IbSystem para melhorar a experiência e o lucro.

Renzo Franco
5 min readJan 19, 2021

--

Este é o meu primeiro caso de UX/UI real em cima do site do software para gestão de loteamentos, LoteMobile, da empresa IbSystem, na qual eu trabalhei até fevereiro de 2021. Este trabalho visa melhorar o número de pessoas interessadas no software através do site, e ainda, melhorar a interação e usabilidade do sistema, após a assinatura do mesmo, diminuindo então o número de cancelamentos e aumentando a taxa de conversão e ROI.

Desafio

O objetivo deste estudo era de abordar como os clientes interagiam com o site de apresentação do software, para obter maiores informações, para que assim conseguisse ser realizado um trabalho de UX em cima das informações coletadas, para melhorar a performance do site, aumentando as conversões de interesse.

O estudo

Durante o estudo observei o uso dos clientes que acessavam o site antes de ser reformulado, utilizando mapa de calor de cliques e scroll, além do uso da gravação das sessões dos mesmo, nas quais notou-se que a evasão dos clientes era muito grande, cerca de 60% dos clientes entrava no site e após alguns segundos já saia, notamos que muito foi pela demora do carregamento, e pelo excesso de informação logo de cara. Para essas análises contamos com o uso da ferramenta Hotjar, esta ferramenta auxilia no monitoramento e gravação dos acessos no site.

Mapa de calor de scroll do site, antes de ser reformulado

No site antigo foi observado, principalmente no desktop, que o mapa de calor de scroll mostrava uma baixa leitura do conteúdo da página, notando novamente o nível alto de evasão e baixa leitura do conteúdo.

Quando alteramos para a leitura do mapa de calor dos cliques, o cenário era totalmente diferente entre os dispositivos mobile e desktop.

Mapa de calor de cliques do site, antes de ser reformulado

Foi observado que no mobile o botão de WhatsApp que se encontrava no menu fixo de contatos, foi onde obteve maior número de cliques, em seguida o botão de envio do formulário, quanto ao restante da página tiveram poucos ou nenhum clique.

Quando mudamos para o cenário do desktop, foi analisado que as duas primeiras seções do site obtiveram bastante cliques, diferente do mobile, o menu suspenso de contato obteve poucos cliques, inclusiva no ícone de WhatsApp, porém o campeão de cliques foram os campos do formulário e o botão de chamada de envio de formulário.

A solução

Observei que se alterássemos como e qual conteúdo iria ser exibido, poderíamos atingir uma melhor taxa de leitura e cliques, assim melhorando a qualidade e quantidade das conversões em cadastro ou contato de interesse. Além de diminuir a quantidade de conteúdo a ser carregado, melhorando o desempenho do site e a velocidade de carregamento.

Alterei a disposição dos elementos, colocando menos texto em todo o site, para evitar uma leitura maçante, e aumentei a quantidade de espaços vazios para deixar mais clean e menos poluído de como estava. Quanto as cores, foi pensado em manter somente duas cores base em todo o site, para retirar a poluição visual que estava pelo número excessivo de cores.

Modelo seguindo os conceitos abordados anteriormentes, visando o minimalismo e um visual mais limpo.

Style Guide

Foram utilizados como cores base do site somente duas, para passar uma ideia de visual mais clean, além de conseguirmos priorizar mais os botões dando enfoque com uma cor principal neles por todos os botões de chamada para ação.

Resultado das alterações

Através de teste com a ferramenta Hotjar, concluiu-se que com as alterações a taxa de leitura do site subiu em aproximadamente 70%, e a taxa de cliques em botões de chamada principal e secundária subiu cerca de 30%, podendo notar que através de menos textos e menos conteúdo, ainda sim foi passada mais informações, podendo focar em textos mais importantes das funções primordiais e de destaque do sistema.

Com queda de conteúdos a serem exibídos, e a melhora na taxa de carregamento do site, obtivemos uma melhora de cerca de 30% na taxa de evasão por causa do carregamento.

Conclusão

Concluí que através deste projeto, algumas alterações como cores e organização de informações, pode gerar um grande impacto nas vendas e como o seu usuário interege com o seu produto antes mesmo de compra-lo.

Ocultando informaçõs desnecessárias e dando enfoque maior para as principais e mais atrativas funcionalidades do sistema, podemos passar mais informações para os clientes do que somente “jogar” toda ela de uma vez.

Os clientes tendo acesso mais fácil e direto as informações, o número de conversões diretas aumentaram e devido ao fato de a taxa de leitura do site como um todo ter aumentado ocasionando os clientes estarem mais informados, o número de cancelamentos por desconhecerem de fato o produto, ou por não possuirem toda a informação ou por terem compreendido erroneamente devido a má disposição dos elementos, diminuíram bastante, aumentando assim o ROI e a geração de leads.

Contatos

--

--