Contexto
Quem é a empresa e de onde partimos
A KG Construções executa obras públicas de construção, manutenção e pavimentação em Fortaleza e no interior do Ceará, atendendo prefeituras, o governo do estado e órgãos públicos.
São mais de 40 construções e 230 manutenções entregues. O histórico existia; o site é que não comunicava esse porte.
O site anterior tinha sido montado sobre um tema de blocos prontos. A estrutura funcionava, mas a ordem da informação seguia a lógica do template, e não a de quem chega precisando decidir se aquela empresa dá conta da obra.
O desafio
O que não estava funcionando
Percorrendo o site anterior e registrando o que cada seção respondia, cinco pontos apareceram como os que mais atrapalhavam a leitura do negócio:
- A abertura não dizia a que a empresa se dedica, para quem trabalha nem onde atua.
- Não existia uma seção de serviços, então não dava para saber o que era possível contratar.
- As obras entregues apareciam como um carrossel de nomes, sem tipo, cidade ou descrição.
- Os números que comprovam capacidade ficavam no meio da página, bem abaixo da dobra.
- O espaço de maior destaque depois do topo era ocupado por missão, visão e valores.
A direção
As decisões que guiaram o redesign
A reestruturação partiu de uma pergunta simples: o que alguém de uma prefeitura precisa entender, e em que ordem, para considerar a KG para um contrato?
Posicionar antes de convidar
A abertura passa a declarar o campo de atuação e a promessa, com escopo e região logo abaixo. O convite para ver os projetos vem depois de a pessoa já saber do que se trata.
Trazer a prova para a primeira tela
Os números já existiam no site antigo, mas só apareciam depois de duas seções. Subiram para o rodapé do hero, onde funcionam como confirmação imediata do porte da operação.
Criar a camada que faltava
Seis serviços descritos por tipo de obra e tipo de equipamento público. É a seção que responde à pergunta que o site anterior deixava em aberto.
Dar contexto a cada obra
Cada projeto entregue virou um card com categoria, município, cliente e descrição do que foi executado, com filtro por tipo de obra para quem procura algo específico.
Manter o institucional, mas no lugar certo
Missão, visão e valores continuam no site. Deixaram de ocupar a posição logo abaixo do topo e passaram a compor a seção sobre a empresa, depois de serviços e obras.
Antes e depois
O que mudou, tela a tela
Cada bloco abaixo mostra um trecho da experiência com a leitura do que motivou a mudança. Alguns são comparações diretas; outros são camadas que o site anterior não tinha.
Abertura
A primeira tela pedia uma ação antes de explicar o negócio
O site anterior abria com “Conheça nossas obras” e um botão “Clique aqui” sobre um vídeo do escritório. É uma instrução, não um posicionamento: quem chegava por busca ou por um link não tinha como saber o que a empresa faz, para quem ou onde. A nova abertura declara o campo, a promessa, o escopo e a região, e traz os números que antes só apareciam no meio da página.
Institucional
Missão, visão e valores sem nada que os situasse
No site anterior, o bloco logo abaixo do topo eram três cards de missão, visão e valores, sem uma linha antes deles explicando o que a empresa faz ou para quem trabalha. O conteúdo continua no novo site, mas dentro da seção sobre a empresa: primeiro vem a descrição da operação, os clientes atendidos e a região, e só então os três pilares aparecem, agora como complemento de algo já explicado.
Inclusão
Uma seção de serviços que o site não tinha
Nada no site anterior respondia o que dava para contratar. Quem precisava saber se a KG faz pavimentação, manutenção predial ou construção tinha que deduzir pela lista de obras entregues. O redesign criou essa camada do zero: seis frentes de atuação, cada uma explicando o que é executado e em que tipo de equipamento público.
Obras
As obras entregues eram uma lista de nomes
Cada obra aparecia num carrossel com apenas foto e título. Sem categoria, sem município, sem cliente e sem descrição do que tinha sido feito, e para ver as demais era preciso usar as setas. A nova listagem transforma cada obra em um card com tipo, cidade, cliente e descrição, com filtro por categoria.
No celular
No celular, o vídeo tomava a tela e o conteúdo se perdia
No site anterior o vídeo de fundo ocupava toda a primeira tela e o texto ficava sobre a área de maior ruído da imagem, com o botão logo abaixo. A nova abertura mantém no celular a mesma hierarquia do desktop (rótulo, título, subtítulo, ação e números), adaptada à leitura vertical.
O processo
Como o projeto foi conduzido
- 01
Leitura da experiência atual
Percorri o site anterior registrando a ordem das seções, o que cada uma respondia e o que ficava sem resposta. Esse mapa virou a base das decisões seguintes.
- 02
Arquitetura da informação
Reordenei as seções pela sequência de perguntas de quem contrata: o que fazem, o que dá para contratar, o que já entregaram, quem são e como falar com eles.
- 03
Design da interface
Defini hierarquia tipográfica, sistema de cards e estados de filtro, usando as fotos das próprias obras como material visual em vez de imagens de banco.
- 04
Desenvolvimento e entrega
Construí o site em Next.js com imagens otimizadas e layout responsivo, publiquei e entreguei o código-fonte para a empresa.
O resultado
O que o site passou a comunicar
O cliente procurou um redesign, não uma mudança de operação: não havia meta de conversão nem métrica combinada no escopo. O que dá para afirmar é o que se observa na própria experiência.
- A atividade da empresa fica clara na primeira tela, sem depender de rolagem.
- Existe uma resposta direta para “o que vocês fazem”, que antes não estava escrita em lugar nenhum do site.
- Cada obra entregue carrega tipo, cidade e descrição, em vez de só um nome.
- A mesma hierarquia de leitura se mantém no celular.
Depoimento
Depoimento de exemplo, ainda não validado com o cliente
“O site novo mostra o que a gente faz de um jeito que o antigo não mostrava. Ficou mais fácil mandar o link para uma prefeitura e a pessoa entender o tamanho da nossa operação sem eu precisar explicar.”