O Design System como um pilar do rebrand da Galp
O Design System surge como uma solução estratégica para unificar os esforços de design e desenvolvimento, garantindo que todos os departamentos da Galp possam implementar a nova marca de forma eficiente e coerente.
Sob a liderança do departamento da Marca, o Design System será a base que assegurará a consistência visual e funcional nos produtos digitais, independentemente do departamento ou equipa responsável.
Este caso de estudo explora a abordagem que adotámos enquanto equipa para ajudar a Galp a enfrentar este desafio, apresentando o processo, os resultados alcançados e as lições aprendidas ao longo do caminho.
Superar obstáculos para construir o futuro
Nos últimos anos, a Galp tem vindo a evoluir no desenvolvimento dos seus produtos digitais, identificando áreas com potencial de melhoria ao nível da consistência, eficiência e usabilidade.Com iniciativas como o Galp Styleguide, foram dados passos importantes na padronização e reutilização de componentes. Agora, com uma nova abordagem mais estruturada, surge a oportunidade de consolidar essas aprendizagens num Design System com apoio formal e continuidade garantida. Este novo momento permite ultrapassar os desafios anteriormente identificados e impulsionar um sistema digital mais coeso e eficaz:
Adoção e alinhamento organizacional
A criação de um processo formal de implementação surge como uma resposta às lições aprendidas com iniciativas anteriores. Com o rebranding em curso, a adoção de um Design System torna-se uma evolução natural. Esta mudança permite alinhar equipas em torno de um sistema comum, facilitando a aplicação da nova marca em todas as frentes.
Coerência da Marca
O histórico de utilização de diferentes guidelines de marca em produtos digitais gerou alguma diversidade de abordagens. O Design System vem consolidar esta evolução, garantindo uma base unificada para a consistência visual e funcional em todos os pontos de contacto da Galp, tanto interna como externamente.
Eficácia e escalabilidade
A implementação de uma biblioteca centralizada vai substituir modelos de comunicação informal, assegurando maior eficiência e clareza no desenvolvimento de soluções. Com esta nova abordagem, é também possível estruturar um modelo de governance que assegura a manutenção, atualização e escalabilidade do sistema a longo prazo.
Autonomia e eficiência das equipas
Ao fornecer blocos reutilizáveis, alinhados com a identidade da marca, o g-power dá às equipas mais espaço para trabalhar a marca. Isto permite acelerar ciclos de desenvolvimento e criar soluções eficazes com menos esforço operacional.
Transformação da cultura organizacional
A transição de ferramentas independentes para uma library viva no Figma representa um marco importante na forma como a Galp trabalha com design e desenvolvimento. Esta mudança promove uma cultura mais colaborativa, consistente e ágil, refletindo-se diretamente na qualidade e eficiência das entregas digitais.
Why Tangível?
“Houve ali uma altura em que estávamos numa versão alfa e já tínhamos produtos digitais que tinham de começar a usar, por isso tivemos que acompanhar equipas que já estavam a usar o design system enquanto ele estava a ser feito (..) e acho que a Tangível aí mostrou muita capacidade de se ajustar com a velocidade necessária”Frederico CondeBrand Design & Tech LeadGalp
Mais rápido, mais ágil, mais colaborativo
O Design System da Galp foi desenvolvido para alinhar necessidades de negócio, marca e cliente, garantindo consistência, eficiência e acessibilidade em todas as frentes. Com a sua implementação, asseguramos que os produtos digitais oferecem experiências de alta qualidade e inclusivas, enquanto simplificamos os processos internos.
Ao centralizar componentes como botões e ícones, as equipas de design ganham liberdade para focar no que realmente importa: criar experiências estratégicas e diferenciadoras para todos os utilizadores, incluindo aqueles com necessidades específicas. Adicionalmente, o Design System posiciona-se como um recurso essencial para sustentar o futuro da marca, promovendo a transição energética e reforçando o compromisso da Galp com práticas sustentáveis e inclusivas.
Mais do que uma ferramenta, o Design System é uma peça-chave para a transformação cultural e organizacional da Galp, promovendo alinhamento entre equipas, consistência na comunicação da marca, acessibilidade nos produtos e uma experiência diferenciada para o cliente final.
Activities and tools
Como construímos o g-power
A criação do Design System da Galp foi um processo colaborativo e iterativo, envolvendo pesquisa aprofundada, definição de estruturas claras, escolha de ferramentas adequadas e estabelecimento de práticas de governance. Este percurso assegurou que todas as decisões fossem informadas pelas necessidades do negócio e alinhadas com os objetivos da marca.
Pesquisa e Benchmark: definição de necessidades e requisitos
Começámos o processo com entrevistas a stakeholders e developers de várias equipas e departamentos da Galp. Estes diálogos foram cruciais para identificar os principais desafios, desde a falta de padronização e reutilização até a necessidade de autonomia e eficiência. Além disso, analisámos design systems de empresas líderes, o que nos ajudou a compreender melhores práticas e a identificar lacunas específicas no contexto da Galp.
Estrutura do Design System: fundamentos, tokens e componentes e padrões
Com base na pesquisa, definimos uma estrutura modular para o Design System. As fundações incluem cores, tipografia, espaçamento e acessibilidade, servindo como a base para todos os outros elementos. A partir destes, criámos tokens de design garantindo escalabilidade e flexibilidade.Os componentes foram construídos em torno das necessidades mais comuns das equipas (e produtos identificados no assessment inicial), como botões, campos de input e dialogs. Os padrões de design, embora ainda não desenvolvidos devido à sua exclusão do âmbito inicial, serão uma das prioridades no futuro, como parte da continuidade do projeto.
Ferramentas e colaboração: integrar design e desenvolvimento
Para promover colaboração contínua, adotámos ferramentas que facilitam o trabalho em equipa e a comunicação. O Figma foi usado para criar e manter a library de design, enquanto o Frontify se tornou o hub central para documentar guidelines. No lado do desenvolvimento, utilizámos o GitHub para versionamento e integração contínua.
A comunicação foi fortalecida por dailies entre as equipas de design e desenvolvimento, e reuniões semanais com stakeholders da marca, garantindo alinhamento constante e resolução rápida de bloqueios.
Governance: garantir a sustentabilidade e escalabilidade do g-power
O modelo de governance e manutenção foi estruturado para equilibrar flexibilidade com controle. Definimos processos claros para a criação e aprovação de novos componentes, evitando fragmentação e garantindo alinhamento com a marca. A equipa da Marca assumiu o papel de guardiã do Design System, assegurando que ele permanece consistente com a visão estratégica da Galp e servindo como ponto de referência para todas as outras equipas.
Impacto contínuo e iteração constante
O processo de criação não termina com a entrega. Construímos o Design System como uma entidade viva, com feedback contínuo das equipas e melhorias iterativas para atender às novas necessidades do negócio e do mercado.
Tornar o g-power numa realidade
A implementação do Design System da Galp foi um processo dinâmico, marcado por desafios e aprendizagens contínuas. Desde a integração com as equipas de desenvolvimento até a adaptação de componentes às necessidades das diferentes plataformas, o percurso exigiu flexibilidade, colaboração e um compromisso constante com a qualidade.
Integração com as equipas de desenvolvimento
O Design System começou a ser utilizado antes da realização de testes de usabilidade e da release do MVP. Esta antecipação trouxe vantagens, como a familiarização precoce das equipas com os novos componentes, mas também resultou em pequenos ajustes frequentes devido a bugs descobertos ao longo do caminho e ajustes ao âmbito do MVP. Estes problemas foram tratados com processos rigorosos de manutenção de código e versionamento, assegurando que todas as correções fossem documentadas e distribuídas de forma eficaz.
Desafios na escolha e uso de tecnologias
A integração inicial revelou lacunas no conhecimento técnico sobre ferramentas como StencilJS e Bit.Dev, o que impactou a eficiência do processo. Além disso, a indecisão sobre a tecnologia a usar em mobile – entre Flutter e React Native – atrasou algumas implementações específicas para este segmento. Este cenário destacou a necessidade de alinhamento técnico e formação contínua para garantir que as equipas de desenvolvimento se sentissem confortáveis com as tecnologias adotadas
Adaptação e flexibilidade na implementação
A indefinição inicial sobre os contextos de uso dos componentes, devido ao acesso limitado a cerca de 10% dos produtos da Galp para análise e estudo, trouxe desafios adicionais. Para acomodar as incertezas, algumas decisões técnicas foram mantidas abertas, proporcionando maior adaptabilidade ao Design System. Apesar disso, este modelo mais flexível exigiu um esforço extra das equipas para garantir consistência e evitar a fragmentação do sistema.
Distribuição e governance
Outro ponto crítico foi a distribuição do código, ainda não 100% otimizado. Essa dificuldade estava parcialmente ligada ao desconhecimento das ferramentas escolhidas, mas também evidenciou a importância de um plano claro de governance para assegurar a disponibilidade e o acesso correto aos componentes.
Colaboração e melhoria contínua
Ao longo do processo, a comunicação entre as equipas de design, desenvolvimento e stakeholders foi fundamental. As reuniões regulares permitiram o ajuste das prioridades e a resolução ágil de problemas. Como resultado, o Design System evoluiu como uma plataforma robusta e flexível, capaz de atender às necessidades atuais e futuras da Galp.
“A Galp já trabalhava com a Tangível há vários anos (…) responderam a todos os desafios que colocámos e não foi um processo simples, houve muitos ajustamentos ao que estava planeado e acho que aí a Tangível mostrou muita agilidade e muita capacidade de se adaptar”Frederico CondeBrand Design & Tech LeadGalp
"A named design system creates a shared language, enabling teams to collaborate more effectively. It turns a collection of rules into a unifying force within the organization."Alla KholmatovaAutora do livro “Design Systems”
O poder de um nome
Nomear o Design System foi mais do que uma decisão de branding; foi um passo estratégico para criar uma linguagem partilhada e acelerar a adoção em toda a organização.
Inspirados por esta visão, escolhemos o nome g-power, que encapsula os valores, princípios e a identidade da Galp, transmitindo poder, eficiência e criatividade. Este nome simboliza o poder que as equipas da Galp têm para criar com consistência, o poder para escalar produtos de forma eficiente e o poder para desbloquear novas formas de inovação.
Mais do que um nome, o g-power tornou-se a base para transformar a maneira como as equipas criam, colaboram e entregam valor. Este ponto de referência unificador transcende o design, impactando toda a organização de forma consistente e inspiradora.
O impacto real do g-power
Apesar de ainda não existirem métricas totalmente consolidadas, os primeiros sinais de impacto do Design System da Galp são bastante promissores. Um dos maiores desafios, a adoção pelas equipas, tem sido superado de forma encorajadora: várias equipas começaram a integrar o G‑Power nos seus fluxos de trabalho ainda antes da entrega do MVP. Este nível de antecipação demonstra a confiança na solução e reforça o seu potencial para impulsionar a consistência e a eficiência em toda a organização.
Num dos projetos acompanhados, o cliente estimou que, com o apoio do Design System, o esforço total foi de cerca de 1500 horas. Sem o G‑Power, o esforço teria aumentado aproximadamente 30%, totalizando cerca de 2000 horas, uma diferença de 500 horas poupadas. Esta estimativa teve por base um projeto de complexidade média-baixa, reforçando o valor tangível que o sistema já está a trazer.
O futuro do g-power
A implementação deste Design System trouxe aprendizagens valiosas, aplicáveis tanto ao projeto de continuidade quanto a futuros projetos. Ficou claro que os tokens de design devem ser totalmente alinhados ao código, refletindo tanto os tokens primitivos quanto os semânticos, para garantir consistência e eficiência.
Também aprendemos que dedicar mais tempo às fundações é essencial. O alinhamento entre design e desenvolvimento exigiu mais esforço do que o previsto, reforçando a importância de um planeamento sólido nesta fase inicial.
Hoje um design system, amanhã a base para toda a inovação digital da Galp.
.webp)
