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?

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.

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.

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