REDESIGN DE WEBSITE
ENTENDA O PROJETO


Durante meu período de trabalho na Gerência de Marketing e Comunicação (GEMAC) da SCGÁS, fui designado para colaborar com a equipe de Gerência de Tecnologia da Informação (TI), responsável pela programação do site, atuei na atualização do site institucional da empresa. Essa iniciativa surgiu da necessidade de modernizar a plataforma, cujo prazo de atualização está estipulado para o ano de 2026.
Neste case, apresento o processo de redesign do site da SCGÁS, destacando as etapas de pesquisa, análise e implementação de soluções centradas no usuário, com o objetivo de melhorar a usabilidade e a eficácia da comunicação digital da empresa.
EMPATIZAR


BRIEFING
Nesta etapa busquei entender a problemática como um todo. Tracei as principais reclamações dos colaboradores e stakeholders através de um briefing, para começar a entender a problemática e necessidades tanto dos colaboradores quanto dos clientes.
“The main tenet of design thinking is empathy for the people you're trying to design for. ”
David M. Kelley
PERGUNTAS
Qual imagem você gostaria de passar com o novo layout do site?
O que você acha que poderia ser incluído no site?
O que você acha que poderia ser excluído do site?
O que você gostaria de manter no site?
Qual seria público-alvo do seu segmento no site?
Algum site de outra empresa, do ramo ou não, lhe encanta ou acha que seria uma boa fonte de inspiração para o site da SCGÁS?
Nota: Decidi fazer presencialmente para coletar mais informações com os colaboradores, além das perguntas que estavam no briefing
Identificou-se a necessidade de transformar a plataforma em uma ferramenta atrativa para potenciais clientes e de suporte para os já existentes, com foco principal no mercado urbano e em empreiteiras.
Os entrevistados destacaram a importância de transmitir uma imagem de modernidade, sustentabilidade e excelência, além de reorganizar o conteúdo para melhorar a experiência do usuário, removendo informações redundantes e corrigindo erros. Foram sugeridas inclusões como uma seção de eventos futuros, destaque para a frota de caminhões movidos a GNV e depoimentos de clientes satisfeitos. Sites como os da Petrobras, Comgás e Apple foram citados como referências para o aprimoramento do site da SCGÁS.


Páginas: Home page, História da SCGÁS, Mapa da tubulação, contato "para seu lar"










FORÇAS
Menos conteúdo com;
Seção para clientes;
Design mais acessível;
Hierarquia dos setores claras;
FRAQUEZAS
Atalhos dentro de atalhos;
Mal otimizado;


ANÁLISE DO SITE ATUAL
Para entender melhor o funcionamento, problemas e começar a visualizar melhor possíveis soluções, foi feita uma análise extensa do site como um todo. Foram feitas pesquisas sobre a estrutura, estética e conteúdo como um todo.
ANÁLISE GRÁFICA
Com a análise gráfica, foi possível identificar os primeiros problemas, a falta de padrão de cores ao longo do site, fugindo do branding da marca e mudando constantemente os tons da cores padrão: Branco, azul claro, azul escuro e amarelo
SITE MAP
Fazer o site map foi um dos grandes desafios deste projeto. A gerência de TI não tinha a informação de quais páginas do site estavam fora do ar, como funcionava o fluxo delas e muito menos uma representação visual do site como um todo, então se mostrou necessário realizar este método.
Ao longo de todo o site map foram feitos comentários quanto a necessidade ou não de certas páginas, sua locação em determinado local etc.
A confecção do site map facilitou muito futuras conversas com stakeholders que não tinham noção do tamanho e funcionalidades do site.
FORÇAS
Informações de contato claras;
Seção para clientes;
Atalhos para facilitar acesso dos mais procurados;
Vantagens do gás natural na home;
FRAQUEZAS
Cabeçalho não convencional;
Navegação confusa e complexa;
FORÇAS
Navegação fluida;
Seção para clientes;
Atalhos divididos pro categorias de clientes;
Seção de perguntas frequentes
Propagandas chamativas e cativantes;
FRAQUEZAS
Pouca informação visual;
Falta de explicação;
BENCHMARK
Por ser uma concessão do estado, a SCGÁS não possui concorrentes diretos, porém, durante a etapa de briefing, foram apontados possíveis inspirações de outros estados, como: Sulgás (RS) e COMGÁS (SP). Além disso, foi analisado a distribuidora de gás de Tóquio, pois o maior acionista da empresa é a Mitsui, empresa japonesa.
RECLAMAÇÕES E RELATOS
Optou-se por coletar as principais reclamações e feedbacks por meio de duas fontes internas: o call center e os colaboradores da empresa.
Essa abordagem foi necessária devido às restrições impostas pela SCGÁS quanto à realização de entrevistas diretas com clientes, o que limita o acesso a insights externos.
As reclamações mais recorrentes, identificadas a partir desses canais, serviram como base para orientar as melhorias no redesign do website, garantindo que as mudanças atendam às principais dores dos usuários dentro das possibilidades disponíveis.


Após traçar as forças e fraquezas das "concorrentes", foi feita uma tabela comparativa para descobrir quais a features mais presentes em ambos os sites, para termos como base o que realmente é necessário ou não.
INDICADORES DE DESEMPENHO
Durante o desenvolvimento do projeto, a SCGÁS ainda estava em fase de implementação do seu sistema de Net Promoter Score (NPS), o que limitava a disponibilidade de métricas diretas de satisfação do cliente.
Diante disso, optou-se por analisar os dados de acesso ao website em parceria com a equipe de Tecnologia da Informação (TI), identificando as páginas mais visitadas. O que comprovou que as áreas que deveriam ser as mais estratégicas para a resolução de problemas da empresa, eram pouco acessadas, enquanto noticias, concursos públicos, e licitações eram as mais procuradas.


Para facilitar a compreensão e a tomada de decisão, os dados foram organizados em uma tabela segmentada por cores e complementada por um "mapa de calor", garantindo uma visualização clara para os três diretores responsáveis pela aprovação do projeto.
Essa abordagem permitiu embasar as decisões de priorização de forma assertiva e apresentar argumentos sólidos aos stakeholders.




Nota: Por mais que o mapa de calor não seja realizado desta maneira, este tipo de visualização auxilio na interpretação dos dados
MATRIZ CSD
Como parte do processo de empatizar, utilizou-se a Matriz CSD para organizar identificar lacunas críticas que demandavam maior investigação. Essa ferramenta foi essencial para direcionar as decisões estratégicas do redesign, especialmente em um contexto com restrições de acesso a feedbacks diretos dos clientes.






DEFINIR
"If you want to create a great product, you have to start by understanding the people who will use it.”
Don Norman
PERSONAS
Para alinhar o redesign às estratégias da SCGÁS, durante o briefing os gestores, apontaram que da SCGÁS nos próximos anos seria o mercado urbano. Com base nos dados levantados na fase e empatia e outros estudos da empresa, defini três personas estratégicas: potenciais clientes urbanos (para captação), clientes urbanos ativos (para retenção) e clientes industriais (responsáveis por 90% do faturamento). Essa segmentação garantiu que o novo site atendesse tanto aos objetivos de crescimento quanto à manutenção dos negócios mais relevantes.




PROBLEMAS E DESAFIOS
Ao longo dos quatro anos de operação do site, diversos problemas foram relatados, impactando diretamente a comunicação com os usuários, incluindo clientes, colaboradores e parceiros. Através as etapas anteriores, foi possível identificar os seguintes principais problemas.
Problemas de Navegação e Arquitetura da Informação
Site com páginas apresentando erros de carregamento;
Informações desorganizadas e difíceis de localizar;
Identidade Visual Desatualizada
Falta de alinhamento com as tendências atuais de mercado;
Inconsistências na aplicação do branding (cores, tipografia);
Dificuldade em transmitir o posicionamento humano da empresa;
Limitações no Processo de Desenvolvimento
Prazo extremamente curto (apenas 3 meses para execução)
Restrições na pesquisa com usuários devido a políticas de privacidade
Dependência da equipe de TI interna com tecnologia e linguagens obsoletas
Primeira experiência do time de TI com prototipagem de alta fidelidade
Desafios de Comunicação
Baixo reconhecimento da marca e seus serviços
Confusão frequente dos clientes entre GN e GLP
PRIORIDADE
★★★★
★★★★
PRIORIDADE
PRIORIDADE
PRIORIDADE
★★★★
★★★★
SOLUÇÕES
Para solucionar os problemas apontados, foram idealizadas as seguintes soluções
Melhorias na Navegação e Arquitetura da Informação
Redesenho completo da estrutura de navegação do site
Reorganização lógica do conteúdo e informações
Padronização dos elementos de interface em todas as páginas
★★★★
DIFICULDADE DE APLICAÇÃO
★★★★
Atualização da Identidade Visual
Desenvolvimento de novo sistema de identidade visual
Criação de guia de estilo com padrões de cores, tipografia e elementos
Soluções Técnicas Implementadas
Desenvolvimento de soluções compatíveis com a infraestrutura existente
Reformulação completa do header e menu principal
Exclusão das páginas inativas e conteúdo obsoleto
Desenvolvimento das telas restantes pela equipe interna
★★★★★
★★★
Desafios de Comunicação
Utilizar mais imagens do GN logo no inicio das páginas, para melhorar a compreesão
Criação de conteúdo mais claro e objetivo
Implementação de linguagem mais acessível e humana
DIFICULDADE DE APLICAÇÃO
DIFICULDADE DE APLICAÇÃO
DIFICULDADE DE APLICAÇÃO
CARD SORTING


Durante a etapa e idealização, identificou-se a necessidade de reestruturar a arquitetura da informação do site. Para atender a essa demanda, foi realizada uma sessão de card sorting, uma técnica que envolve pedir aos usuários que agrupem informações e funcionalidades em categorias que façam sentido para eles . Essa abordagem permite compreender a lógica dos usuários sobre o sistema, facilitando a criação de uma estrutura mais intuitiva.
Na prática, foram preparados cartões representando todas as páginas do site atual, que foram entregues a um grupo de colaboradores composto por um estagiário, um gerente de marketing e comunicação, uma engenheira e dois analistas organizacionais. Sem acesso prévio ao site existente, os participantes reorganizaram o conteúdo conforme seu entendimento, utilizando canetas e post-its para criar e nomear novas categorias baseadas em seu conhecimento sobre gás natural e a estrutura da empresa.


NOVO MAPA DO SITE
Com base nas atividades de card sorting, entrevistas e briefing, foi iniciado o desenvolvimento do novo mapa do site da SCGÁS, com foco em melhorar a usabilidade, especialmente para públicos menos experientes digitalmente. Na página principal, a arquitetura da informação sofreu poucas alterações, com a adição de uma seção destacando as vantagens do gás encanado. A página "Vai Escavar ou Construir" foi removida devido a erros e substituída por um redirecionamento para o mapa da rede e o número de contato da SCGÁS.


No restante do site, a seção "Institucional" foi dividida em "A SCGÁS" e "Editais e Concursos", conforme sugerido durante o card sorting. Outras seções também tiveram suas nomenclaturas atualizadas: "Para seu lar" tornou-se "Residências", "Para seu negócio" virou "Negócios", "Para seu veículo" foi alterado para "Veículos" e "Para a indústria" passou a ser "Indústrias". Essas mudanças foram inspiradas no briefing, que indicou o site da COMGÁS como principal referência para a SCGÁS, adotando uma nomenclatura semelhante.


PROTOTIPAR
”A user interface is like a joke. If you have to explain it, it’s not that good.”
Martin LeBlan
WIREFRAMES
Para desenvolver as oito telas do novo site da SCGÁS, iniciei com wireframes de baixa fidelidade no papel, focando na estrutura e organização dos elementos sem detalhes visuais. Em seguida, elaborei versões de média fidelidade, adicionando mais informações e refinando a disposição dos componentes.
Por fim, criei wireframes de alta fidelidade, incorporando elementos visuais próximos ao design final, como: tamanho de fonte, textos, espaços para imagens etc.




PROTÓTIPO DE ALTA FIDELIDADE
Após a definição da solução visual mais adequada, foram implementadas alterações estilísticas baseada nos testes com o usuário. Foram desenvolvidas as principais telas do site, selecionadas com base em sua relevância, frequência de acesso e padrões visuais, servindo como modelos para a criação das demais páginas. As páginas escolhidas incluem: Home, A SCGÁS, Residências, Canais de Comunicação, Mapa de Rede, Tarifas, Licitações e Área do Cliente.


TESTAR
Para garantir a eficácia do novo site e validar as decisões de interface, foi fundamental observar diretamente como os usuários interagiam com o sistema.
Embora o ideal fosse aplicar testes em diferentes etapas do desenvolvimento, no contexto de um redesign optou-se por concentrar a avaliação ao final do processo. Essa abordagem se mostrou insuficiente porem adequada devido a situação da empresa.


“If you want a great site, you’ve got to test. After you’ve worked on a site for even a few weeks, you can’t see it freshly anymore. You know too much. The only way to find out if it really works is to test it.”
Steve Krug
Implementar
Para padronizar as páginas existentes e futuras, bem como fornecer suporte aos técnicos de informação da SCGÁS, elaborou-se um guia de estilo destinado a auxiliar na criação e manutenção do site. Este guia detalha cada um dos elementos visuais do site, como cores, tipografia, espaçamento e outros componentes essenciais de design.
“I strive for two things in design: simplicity and clarity. Great design is born of those two things.”
Lindo Leader


