Recriando a comunicação, as interfaces e o posicionamento digital.

O projeto consistiu no redesign completo do site da green4T, entendendo as necessidades e dores pelas quais passavam por conta da interface antiga, e desenvolver algo que fidelizasse mais a marca com seus clientes e colaboradores.

Cargo

UX/UI Designer

Cliente

green4T

Duração

20 dias

Opa, fico feliz que você tenha tido o interesse em ver como trabalhei nesse produto. Estou melhorando a escrita, organização e imagens desse case, que serão finalizadas em breve, mas pode seguir com a leitura, pois a história está toda contada abaixo!

Sobre o projeto

A green4T é uma empresa holding, criada em 2016, presente em 12 países da América Latina, atuando no ramo da inovação tecnológica, trabalhando em soluções que tornem empresas e cidades tecnologicamente mais sustentáveis e seguras.

Product Discovery

Estaríamos iniciando um projeto da pior forma se não fosse pela descoberta, você não acha? Seguindo a metodologia Double Diamond como base para esse projeto, o primeiro contato foi por meio de uma dinâmica chamada Discover Canvas, criada pela Homem Máquina, empresa que atuei durante essa construção.

Eu já escrevi sobre essa metodologia na Code Dimension, e claro que você também pode conferir isso pela publicação no próprio blog da Homem Máquina, mas resumindo o processo: fazemos um workshop com o cliente, tendo como base um canvas dividido em quatro seções, que são "cenários", "dores", "personas" e "como poderíamos". A ideia é fazer algo oposto a um briefing clássico. Fazemos perguntas aos stakeholders presentes, buscando entender os problemas da atual situação deles, e conforme a dinâmica for se desenrolando, chegamos num ponto em que listamos algumas questões para nós mesmos da equipe, que vão gerar os insights para a construção do produto. Minutos antes do fim do workshop, realizamos uma votação, incluindo equipe e cliente, para decidir quais dos CP's são prioridade para o projeto.

green4t-discovery.png

Arquitetura da informação

O passo inicial foi analisar todo o fluxo da versão antiga, e responder perguntas como "onde estou e para onde posso ir?". O foco nessa etapa foram de analisar como a arquitetura atual estava trazendo mais problemas do que soluções, e entender como isso poderia ser melhorado para facilitar a navegação das pessoas usuárias, e atender as necessidades atuais da empresa.

Foi identificado a partir dessa análise que boa parte dos conteúdos eram difíceis de serem encontrados, pela grande quantidade de subpáginas, principalmente envolvendo os serviços da empresa. Outra questão envolvia a baixa quantidade de informação em determinados lugares, e em alguns, textos extremamente longos.

Como solução, recriei toda a estrutura navegacional do site, deixando ela mais curta, bem evidente, e melhores categorizadas para facilitar o encontro do conteúdo ideal. Para determinadas paginas, como forma de ajudar a empresa a conseguir mais leads, e pessoas usuárias a conseguir entrar em contato para obter mais informação, algumas seções e call to actions foram organizados em "páginas chave", que tiveram o SEO melhor trabalhado para que essa pessoa desse de encontro com aquilo que estava buscando.

Desenvolvimento

Algumas ideias, no quesito UI, foram geradas na etapa de arquitetura da informação, e esboçadas num protótipo em média fidelidade desenvolvido no Figma, para validar determinados componentes de navegação e pontos de contato entre empresa e pessoa usuária.

Antes de começar a transformar os wireframes na versão em alta fidelidade, optei por criar o guia de estilo completo do site, contando com elementos de cor, sombra e tipografia, e componentes como buttons, headers, e alguns form components.

Trabalhei inicialmente com as cores, construindo uma paleta com cinco variações de luminosidade para a cor da márca, e uma variação maior, de dez cores, para uma escala de cinza, voltada para elementos neutros e tipográficos da plataforma.

green4t-color-palette.png

Para a tipografia, selecionei a fonte Inter pela grande variedade de pesos e glifos que podem ser trabalhados, considerando trazer uma boa legibilidade para o produto tanto em dispositivos pequenos quanto grandes. Após isso, trabalhei com escalas modulares para criar o sistema de hierarquia do site, tendo como tamanho base o valor 16 pixels, utilizando a proporção 1:1.25 (Major third). O mesmo valor foi utilizado também para alturas de linha das escalas iguais e maiores que 24 pixels, sendo que os textos com tamanho menores a esse, decidi manter a proporção 1:1.5, para manter uma legibilidade agradável para leituras que pudessem ser longas.

green4t-type-scale.png

Resultado

Na construção das interfaces, se tratando da composição visual, busquei não apenas garantir a identidade da marca como trazer elementos que indicassem movimentação, sinalizando as vertentes da empresa que atua em vários setores tecnológicos e está sempre na procura de inovar.

green4t-site.png