Caso de estudo · UX/UI Design & Motion
Website institucional e material promocional — Transgest
Criação do website, vídeo promocional animado e manual de instruções do software de gestão de transportes Transgest, em colaboração com a empresa Enovo.
Um software robusto sem presença digital à altura
A Enovo, sediada na zona industrial de Abraveses em Viseu, é reconhecida como uma das líderes nacionais no desenvolvimento de software de logística para transportadoras. O desafio foi criar uma estratégia de comunicação eficaz para o software Transgest e destacá-la no mercado.
Website desactualizado
O website existente não comunicava eficazmente as vantagens do Transgest. Era necessário redesenhá-lo de raiz para reflectir a maturidade e o valor real do software.
Sem materiais promocionais
Não existiam vídeos, manuais nem materiais de vendas que pudessem apoiar a equipa comercial em feiras, reuniões e apresentações.
Posicionamento no mercado
Era fundamental compreender as estratégias dos concorrentes para posicionar a Enovo de forma competitiva no mercado de software de transportes.
Como criar comunicação digital que transmita claramente as vantagens do Transgest e se destaque da concorrência?
Do problema à solução em seis fases
Abordagem centrada no utilizador: investigar o contexto antes de prototipar, validar com utilizadores reais antes de desenvolver. Cada fase gerou entregáveis que alimentaram a seguinte.
Análise do software existente, entrevistas com a equipa da Enovo e estudo de concorrentes nacionais e internacionais (Softingal, Vonzu).
Definição da estrutura do website com segmentação por páginas HTML (Sobre, Funcionalidades, Módulos, FAQ, Contactos) e fluxos de navegação.
Esboços em papel de 5 secções da homepage para validar estrutura e fluxo com stakeholders antes de avançar para alta fidelidade.
Sistema visual com grid de 8pt, paleta cromática, tipografia Poppins e ícones vectoriais. Desenvolvimento em HTML, CSS e JavaScript responsivo.
Testes em baixa e alta fidelidade com utilizadores reais. Identificação e correcção de problemas de navegação e interpretação de conteúdos.
Produção de vídeo com filmagens reais do processo, vídeo animado vectorial e estrutura de manual ilustrado — entregáveis para suporte comercial.
O que o mercado estava a fazer
Foram analisados websites de empresas concorrentes no sector de software para transportes, tanto nacional como internacionalmente, para compreender os padrões visuais actuais e identificar oportunidades de diferenciação.
Softingal — Nacional
Website bem estruturado e de fácil navegação. Destaca-se pelas imagens nítidas, ícones representativos e conteúdo textual envolvente. Referência em termos de clareza comunicativa no mercado português.
Vonzu — Internacional
Linguagem vectorial (requisito da Enovo), secções de funcionalidades com ícones representativos, dados quantitativos sobre o software e feedback de clientes. Paleta de cores eficiente e contrastante.
Uma página principal, múltiplas páginas especializadas
Foi solicitado que a página principal reunisse todos os conteúdos, mas para facilitar a navegação os conteúdos foram segmentados em páginas HTML distintas: Sobre, Funcionalidades, Módulos Adicionais, FAQ e Contactos.
↑ Clica para ampliar o diagrama
Princípio de segmentação
A página principal agrega o conteúdo essencial, mas cada área temática tem a sua própria página HTML — evita sobrecarga cognitiva e melhora o SEO.
Estrutura de navegação
Navbar fixa com 6 destinos: Sobre · Funcionalidades · Módulos · FAQ · Blog · Contactos. Fluxo pensado para dois perfis — visitante novo e cliente existente.
Fluxo principal
Homepage → Funcionalidades → Módulo específico → Pedido de demonstração. Cada passo tem um CTA que conduz ao seguinte.
Estrutura antes de estética
Foram desenhados à mão 5 wireframes da homepage, cada um correspondendo a uma secção distinta. O objectivo foi validar a estrutura e o fluxo com a Enovo antes de investir tempo em alta fidelidade.
Resultado do teste lo-fi
O teste alcançou os objectivos propostos. Identificou-se dificuldade na compreensão do texto devido à caligrafia pouco clara nos esboços.
Iteração aplicada
Passagem para wireframes digitais com texto legível, mantendo a mesma estrutura validada em papel. Simplificação da secção inicial.
Ordem e consistência em cada pixel
O sistema visual foi construído com base numa grelha de 8pt, paleta cromática definida e tipografia Poppins — escolhida pela sua legibilidade e carácter técnico-profissional.
Grelha de layout
Espaçamento — 8pt grid
Espaçamentos múltiplos de 8px (16, 24, 32, 40px…). Elementos relacionados têm distâncias menores; elementos distintos têm distâncias maiores.
Paleta cromática
Tipografia — Poppins
O resultado do processo de design
12 ecrãs do website final, desenvolvido em HTML, CSS e JavaScript responsivo. Clica na imagem para abrir a galeria completa.
O website em funcionamento
Vídeo que demonstra a navegação e as funcionalidades do website desenvolvido para o Transgest.
Motion design para comunicação de produto
Vídeo animado com elementos vectoriais criado em Adobe After Effects. Comunica as funcionalidades principais do Transgest de forma dinâmica, para uso em campanhas digitais e eventos.
Três iterações até ao resultado final
Os testes de usabilidade consistiram em três iterações distintas, cada uma avaliando a interacção dos utilizadores com o website e identificando problemas a corrigir.
Iteração 01 — Baixa fidelidade
Objectivo: Compreender o funcionamento da estrutura inicial do website.
Resultado: O teste alcançou os objectivos, mas identificou-se dificuldade na compreensão do texto devido à caligrafia pouco clara nos esboços em papel.
Iteração 02 — Alta fidelidade
Resultado (1.º teste): Feedback positivo, mas dificuldade em encontrar a opção para expandir texto na secção da solução.
Resultado (2.º teste): Dificuldades na interpretação de alguns conteúdos ao nível da escrita. Texto revisto e simplificado.
Iteração 03 — Resultado final
Resultado: Testes globalmente positivos com poucos problemas identificados. Surgiram questões sobre os botões "Agende uma Demonstração" e "Conheça outros módulos", esclarecidas após os testes.
Observação: Os utilizadores não usaram o botão de retorno ao topo, preferindo navegar por scroll — botão removido na versão final.
Aplicação real do sistema visual
Cartaz de apresentação do projecto em contexto real, demonstrando a aplicação coerente do sistema visual desenvolvido para o Transgest.
O que este projecto me ensinou
Um projecto de âmbito alargado — website, dois vídeos e um manual — que exigiu gestão de prioridades, comunicação constante com o cliente e disciplina no processo de design.
O âmbito expande-se — é necessário gerir expectativas desde o início
O projecto começou com um website e terminou com website, dois vídeos e um manual. Esta expansão foi positiva, mas exigiu renegociação de prazos. Documentar desde o início o que está e não está incluído protege todas as partes.
Testar cedo evita retrabalho tardio
Os testes de usabilidade em baixa fidelidade identificaram problemas estruturais antes de qualquer linha de código. O custo de iterar num esboço é uma fracção do custo de refazer código implementado.
A linguagem visual tem de falar com o sector
A análise da concorrência revelou que o sector de software B2B usa linguagem vectorial e paletas contrastantes. Adoptar esses padrões — e superá-los em qualidade — foi a estratégia de posicionamento que definiu o projecto.