Alares Internet

Contexto e Objetivos

A Alares Internet possui uma plataforma que vende planos de internet para pessoas físicas e jurídicas. Quando iniciou-se o projeto, a situação era clara: o tráfego existia, mas a jornada de compra estava travada. A experiência não permitia que o usuário entendesse o valor dos serviços ofertados, limitando tanto o volume de vendas diretas quanto o ticket médio.

Os objetivos do negócio eram específicos:

• Aumentar vendas diretas
• Elevar o ticket médio através de maior percepção de valor em cada serviço ofertado

Não se tratava apenas de “melhorar a experiência por melhorar” — era resolver um problema de negócio medível. O trabalho do time foi identificar onde exatamente a jornada estava quebrada e redesenhar para que cada etapa comunicasse valor e movesse o usuário naturalmente para uma compra maior.

Processo: Da Análise à Estratégia

1. Benchmarking e Referência Competitiva

O time iniciou estudando players consolidados do mercado. O objetivo era estabelecer um ponto de referência — não copiar, mas entender o que já estava validado em termos de fluxo, padrões de apresentação e estrutura de jornada.

2. Análise Quantitativa e Comportamental

Com a referência em mente, mergulhou-se nos dados reais da Alares usando duas ferramentas:

MS Clarity:

• Mapas de calor mostrando onde os usuários clicavam e hesitavam
• Áreas de interesse e padrões de scroll
• Identificação de cliques em elementos não-clicáveis (sinalizador de frustração)
• Visualização de micro-interações que revelavam confusão

Google Analytics 4:

• Engajamento por página específica
• Taxa de retenção entre etapas da jornada
• Comportamento comparativo entre mobile e desktop
• Pontos de maior abandono

Uma descoberta crítica emergiu: 80% do tráfego vinha de smartphones. Isso reorientou completamente as prioridades de design — todo o trabalho precisaria ser mobile-first, sem negligenciar desktop.

3. Identificação de Pontos de Fricção

A análise revelou quatro áreas onde o atrito era alto:

1. Entrada no site (primeiros segundos)
2. Descoberta de ofertas (entender opções)
3. Comparação entre planos (escolher)
4. Compreensão de detalhes (convencimento)

4. Construção de Hipóteses Baseadas em Dados

Para cada ponto de fricção, o time testou hipóteses contra o comportamento observado:

• Se o mapa de calor mostra alta fricção na entrada, a hipótese é que há barreira na primeira interação
• Se usuários clicam em áreas não-clicáveis do card, a hipótese é que buscam informação que não está acessível
• Se navegam repetidamente pelas setas laterais, a hipótese é que querem comparar mas não têm ferramenta

Cada hipótese tinha suporte em dados reais.

5. Mapeamento Visual da Jornada

O time desenvolveu a jornada completa em FigJam — visualizando cada etapa, o estado emocional do usuário, os pontos de decisão e fricção. Isso serviu como base para comunicar a estratégia com o cliente e garantir alinhamento antes de qualquer wireframe.

6. Wireframing

Com a estratégia validada, foram criados wireframes de todas as telas principais:

• Comportamentos de interação detalhados
• Fluxo ponta a ponta (da entrada ao fechamento do pedido)
• Especificações técnicas e responsividade
• Padrões de navegação e estrutura de informação

7. Prototipagem e Defesa da Solução

Foi construído um protótipo interativo em alta fidelidade incorporando:

• Design system consistente
• Elementos interativos que simulam comportamento real
• Priorização mobile-first com ambas as resoluções trabalhadas (mobile e desktop)

A solução foi apresentada ao cliente junto com a análise de dados e hipóteses — não era uma proposta estética, mas uma solução fundamentada em evidência.

As Quatro Soluções Principais

1. Seletor de Cidades Automatizado

O Problema: O usuário chegava ao site e se confrontava imediatamente com um seletor de cidades que o travava na página inicial. Mapas de calor mostravam alta concentração de cliques frustrados nesse elemento. Dados de abandono confirmavam: muitos visitantes nunca avançavam além dessa primeira tela.

A hipótese construída foi que a barreira inicial estava criando fricção que o usuário rescindia imediatamente.

A Solução: Foi implementada geolocalização automática. O site agora detecta a localização do usuário e o coloca automaticamente na cidade correta — eliminando a barreira de entrada.

Resultado:

• ~20% de aumento estimado na continuidade da navegação para páginas de ofertas
• Redução mensurável dos sinais de fricção na etapa inicial

2. Redesenho dos Cards de Ofertas

O Problema: Os cards eram extensos, despadronizados e sobrecarregados de informação. A análise no Clarity revelou um padrão claro: usuários tentavam clicar em áreas do card que não eram botões, buscando informações adicionais. Além disso, o excesso de elementos (texto, ícones, preços, badges) dispersava a atenção do CTA principal.

A hipótese construída foi que o card transmitia confusão em vez de clareza. A hierarquia visual estava quebrada.

A Solução: Foram criados cards compactos e mobile-first. Cada um agora:

• Apresenta informação essencial em ordem de importância (preço primeiro, velocidade, tipo de plano)
• Estabelece hierarquia visual clara através de tamanho, peso e cor
• Coloca um CTA primário óbvio e clicável
• Segue um padrão visual consistente (padronização de altura, espaçamento, componentes)
• Reduz elementos visuais que não agregam valor

Resultado:

• 12-16% de melhora estimada na interação com CTAs mobile
• Redução perceptível dos sinais de hesitação identificados na descoberta de planos
• Cards agora funcionam como guia clara para a próxima etapa

3. Página de Comparação com Filtros Inteligentes

O Problema: A listagem anterior era simples: cards em sequência, sem recursos de comparação. A análise no Clarity identificou um padrão repetitivo: usuários clicavam nas setas de navegação lateral alternadamente — avançando e voltando entre cards. Estavam tentando comparar mentalmente, de forma manual e frustante.

A hipótese construída foi que o usuário quer comparar planos, mas a interface não oferecia ferramenta para isso. Com 80% do tráfego mobile, essa necessidade era ainda mais crítica.

A Solução: Foi desenvolvida uma página robusta de listagem com filtros funcionais:

• Categoria (gamer, trabalho, streaming, etc.)
• Faixa de preço (permitindo busca por orçamento)
• Serviços inclusos (permitindo busca por necessidade)
• Velocidade (permitindo busca por performance)

Cada combinação de filtros gera uma URL única e específica. Isso criou dois benefícios:

1. Usuário consegue comparar de forma inteligente — vê apenas planos relevantes
2. Time de performance (mídia) consegue direcionar tráfego de forma nicha e qualificada

Por exemplo: o time de performance agora pode fazer campanhas específicas para “Planos Gamer” e direcionar tráfego direto para essa página, otimizando custo de aquisição.

4. Página de Detalhes do Plano (Single Pages)

O Problema: Toda a informação de um plano estava confinada ao espaço limitado do card. Usuários clicavam em várias áreas esperando explorar — sinalizando que queriam mais profundidade. Além disso, o time de performance não conseguia fazer tráfego direcionado para planos específicos.

A hipótese construída foi que o usuário busca validação completa antes de converter. Uma página de detalhes permitiria aprofundar a percepção de valor — diretamente ligada ao objetivo de aumentar ticket médio.

A Solução: Foram criadas páginas internas individuais para cada plano:

• Especificações técnicas completas
• Benefícios adicionais e diferenciais
• Comparativos lado a lado com outros planos
• Casos de uso e argumentos persuasivos (reforçando a percepção de valor)

Isso habilitou:

1. Usuário consegue se aprofundar completamente — construindo confiança para comprar
2. Time comercial consegue reforçar argumentos persuasivos com conteúdo robusto
3. Time de performance consegue fazer tráfego direcionado (“Planos para Home Office”, “Planos para Streaming”, etc.)

Entrega Técnica Potencializada por IA

O desenvolvimento foi significativamente acelerado através de:

1. Design finalizado no Figma com componentes estruturados
2. Exportação automática para Next.js usando Figma + MCP com Claude Code
3. Time focado em lógica de negócio, funcionalidades robustas, performance e ajustes finos de front-end

Essa abordagem permitiu reduzir o ciclo de desenvolvimento mantendo qualidade de design e priorizando o que agrega valor real.

Status e Resultados

O projeto está em produção. As métricas pós-implementação confirmaram as hipóteses iniciais:

• Seletor automático: ~20% aumento na continuidade para páginas de ofertas
• Cards redesenhados: 12-16% melhora em interação com CTAs mobile, redução de sinais de hesitação

A jornada agora é mais linear, clara e orientada para conversão com percepção aumentada de valor em cada etapa.

O Que Esse Projeto Representa

Este não é um case puramente de “UX/UI bonito”. É um exemplo de design movido por dados, onde:

1. Dados guiam cada decisão — Clarity e GA4 não são ferramentas de validação, são instrumentos de descoberta
2. Hipóteses têm evidência — cada mudança está ancorada em comportamento real do usuário
3. Design serve ao negócio — a métrica não é “quantas pessoas acharam bonito”, é “qual foi o impacto em vendas e ticket médio”
4. Mobile-first não é opção — quando 80% do tráfego vem de mobile, é o ponto de partida, não um ajuste posterior

1 de 9