2023
GreenYellow do Brasil
Redesign completo e construção de design system para a BU brasileira da GreenYellow. Projeto desenvolvido em parceria com a INGAGE Digital.
Confira o protótipo completo aqui.
A GreenYellow é um player internacional, com 18 unidades espalhadas pelo mundo, que oferece soluções 360° para transição e eficiência energética de outras empresas. O redesign de site para a BU brasileira foi um projeto construído em parceria com a INGAGE Digital, onde atuo como Head de Design.
Identificando o objetivo
Apesar de estar presente em 18 países, cada BU conta com autonomia própria para desdobrar a marca global de acordo com as diretrizes locais, e o desafio principal apresentado pela GreenYellow do Brasil era formular um novo site condizente com o objetivo de posicionar a marca enquanto referência no segmento de transição e eficiência energética no Brasil.
Mapeando os desafios
Considerando o objetivo de posicionamento de marca trazido pela GreenYellow, partimos para a idenficação das reformulações possíveis e necessárias de copy e design. No papel de designer de experiência e interface do usuário, minha tarefa inicial foi mapear os desafios junto ao time do projeto e trazudir os insights para um primeiro esboço de wireframe.
A estrutura do novo site foi projetada em grid de 12 colunas para garantir flexibilidade em cada dobra e elemento. A segunda imagem representa acima traz a estrutura proposta para o **hub de conteúdos** considerando a distribuição dos cards nas 12 colunas desse grid. Essa foi uma das páginas centrais definidas pelo time do projeto para garantir tráfego orgânico e valorizar a voz da GreenYellow no segmento energético brasileiro.
Desafios e propostas
1. Diagrama de soluções
Além do hub de conteúdos, mapeamos outros X desafios centrais para garantir que o objetivo do projeto fosse atingido. O primeiro deles foi **traduzir visualmente e de forma intuitiva** que as quatro soluções oferecidas pela GreenYellow do Brasil **operam em 360°**, e após uma série de propostas e testes, chegamos ao modelo final unindo a **concepção de integração entre as soluções** e **interatividade.**
A proposta do diagrama interligado com cada solução não bastava, pois era necessário dispor os textos de apoio com o resumo explicativo de cada uma para que o usuário compreendesse, logo no primeiro momento, o que é cada uma delas. As tabs foram usadas enquanto convenção para que a experiência fosse fluida e não sobrecarregasse a página visualmente com um possível excesso de informações, prezando também pela interatividade no elemento principal.
2. Hub de conteúdos
O segundo desafio central, como mencionado anteriormente, era construir uma página de conteúdos que fosse além de um blog convencional. Com o objetivo de posicionamento de marca, identificamos a necessidade de **explorar o tráfego orgânico** como um caminho crucial de respaldo e autoridade no segmento.
A página foi estruturada considerando que a primeira dobra precisaria abordar os 4 eixos de produção de conteúdo que o pessoal da GreenYellow do Brasil já produzia: **blogposts, materiais ricos, podcasts e cases**; além de um quinto eixo para divulgação de clippings com o **GY na Mídia**. Com o grid de 12 colunas, o resultado foi uma hero mais robusta e completa, trazendo cards para acesso aos principais materiais de cada eixo.
Além da hero, dispomos as demais dobras também de acordo com cada eixo de produção de conteúdo para valorizar os materiais publicados e fortalecer a autoridade da GreenYellow no segmento brasileiro de eficiência e eficiência energética.
Foram construídas, por fim, páginas específicas para cada um dos eixos com elementos que fossem tanto padronizados para garantir consistência quanto específicos para valorizar cada eixo.
3. Página de segmentos
O terceiro desafio central, identificado especificamente a partir do time de design, foi construir as páginas para cada segmento que a GreenYellow do Brasil atende de forma escalável. Atualmente são 6 segmentos atendidos: **varejo, shoppings, hotelaria, mineração, indústria e logística.** A tarefa aqui foi desenvolver cada uma dessas páginas considerando o deadline apertado e a alta expectativa do cliente com o projeto, e partimos para escalar cada uma delas (ainda que de forma muito enxuta por serem *apenas* 6 páginas).
Foi construído um modelo padrão de página, alinhado também com o time de copywriting que desenvolveu cada copy de acordo com a estrutura definida no wireframe, replicado entre os 6 segmentos. Usamos também do diagrama de soluções para exemplificar como cada solução oferecida pela GreenYellow do Brasil se encaixa naquele segmento específico. Além disso, também foi alinhado com o time de desenvolvimento que essas páginas, por serem replicáveis, teriam a estrutura padrão e a lógica de programação precisaria considerar cada uma delas como página dinâmica.
