Nova identidade visual no site do GetNinjas

O GetNinjas é o maior marketplace de contratação de serviços da América Latina. Presente no Brasil e no México, em 2019 a plataforma já contava com mais de 1 milhão de profissionais cadastrados em mais de 150 tipos de serviço como pedreiros, diaristas, cozinheiros, fotógrafos e etc.

Os produtos web e aplicativo da GetNinjas são mantidos por squads, times multidisciplinares que contam com Product Designers, Product Managers, Desenvolvedores Front-End e Back End, User Researchers e Data Analysts. Sendo assim, os designers da GetNinjas são responsáveis por projetos realizados com os seus próprios squads e por projetos realizados com os designers de outros squads, ou seja, com o chapter de Design. Foi assim que no início de 2019 o chapter de Design se reuniu para repensar a identidade visual do GetNinjas. 

Os problemas da identidade visual antiga

Até então, o GetNinjas nunca tinha passado por um projeto de concepção de marca e identidade visual. A identidade visual do produto era um conjunto de contribuições pensadas por designers diferentes e em momentos diferentes. Problemas com inconsistência eram enormes, o que prejudicava diretamente a usabilidade do produto.

A marca não era forte e não estava presente na jornada dos nossos clientes e profissionais. Através de pesquisas, percebemos que muitos clientes se esqueciam do GetNinjas logo após solicitarem um serviço. Eles não criavam uma relação com a marca.

O Ninja, nosso mascote antigo, não representava a relação de confiança que gostaríamos de estabelecer com nossos clientes e profissionais. Além disso ele possuía muitos detalhes, o que gerava diversos problemas de aplicação e tornava difícil para qualquer designer não ilustrador realizar alterações ou desenhá-lo em novas posições.

Como o chapter de Design propôs uma nova identidade visual

Foi pensando em todos os problemas citados acima que o chapter de Design se reuniu e durante uma semana pausamos nossas atividades junto aos squads para focar na formulação de uma nova identidade visual para o GetNinjas. Realizamos estudos e experimentações em conjunto e testes qualitativos para pegar a percepção dos usuários sobre o caminho que estávamos seguindo. 

O resultado dessa semana de trabalho foi a proposta de redesign para a página em que os clientes realizam uma solicitação de serviço no GetNinjas. Com essa página, realizamos um teste A/B com as duas identidades para verificar qual seria o impacto dessa alteração. 

O objetivo da nova identidade não era aumentar a conversão do nosso produto, mas sim contribuir para o fortalecimento da marca, diminuir problemas de inconsistência e corrigir erros de usabilidade. Mesmo assim, era importante fazer esse teste para garantir que não estávamos propondo uma identidade visual que pudesse prejudicar o nosso produto e também para ajudar a envolver restante da empresa no projeto.

Feito o teste, concluímos com relevância estatística que o impacto da nova identidade poderia ser neutro ou positivo. Esse era o aval que precisávamos para seguir com uma estratégia de implementação.

Qual foi a minha contribuição

Com os resultados do teste, começamos talvez uma das etapas mais difíceis: envolver o restante da empresa no projeto, conversando com a liderança e com os squads que seriam impactados. Pedro Naif, o até então Director of Design & UX, teve um papel muito importante nesse momento, mas todos os estudos e testes que realizamos ao longo do projeto foram de grande importância e nos forneceram insumos para essas discussões.

Ficou combinado que cada Designer seria responsável por inserir a nova identidade de acordo com o escopo do squad em que atua. Nesse momento eu atuava como Product Designer no squad de Experiência do Cliente, responsável pela jornada dos clientes que utilizam o GetNinjas para solicitar serviços. Nosso principal canal de solicitação são as páginas web, sendo assim, fui responsável por redesenhar essas páginas na nova identidade.

Quais foram os desafios

O principal desafio foi pensar em uma forma de implementar a nova identidade com baixo esforço. O squad de Experiência do Cliente é um time enxuto e seria inviável parar completamente as atividades do time para realizar essa implementação. Tínhamos que pensar em uma forma na qual o time poderia dividir seus esforços entre a implementação da nova identidade e as outras atividades.

Até então, algumas páginas web utilizavam o styleguide em CSS do GetNinjas, o Gaiden. Ele foi projetado pelos desenvolvedores sem muita participação dos designers, o que tornava difícil para os designers utilizarem seus padrões. Essa dificuldade, por sua vez, gerou diversos problemas para os desenvolvedores, como a sobrescrição de CSS dentro dos nossos sistemas. Mesmo assim, sabíamos que utilizar a estrutura do Gaiden para implementar a nova identidade poderia diminuir o esforço da tarefa.

Além disso, nesse momento estávamos discutindo a necessidade de ter um Design System no GetNinjas. Sabíamos também que o ponto de partida de um Design System são os Design Tokens. 

Os Design Tokens são as menores partes constituintes de uma página, como cor, tipografia, espaçamento e etc. São partes que não podem ser divididas e que podem ser reutilizadas para a construção de diversas páginas.

Qual foi a estratégia?

Levando esses desafios em consideração, decidimos adotar a seguinte estratégia para a implementação da nova identidade nas páginas web:

1. Criar os Design Tokens para a nova identidade visual;
2. Aplicar os Tokens no Gaiden, o nosso styleguide CSS;
3. Priorizar as páginas com o maior volume de acessos;
4. Implementar o Gaiden com os Tokens nessas páginas priorizadas.

Quais foram os resultados e aprendizados?

Utilizei o Style Dictionary na criação dos Tokens. Ele é um sistema capaz de transformar os mesmos Tokens para serem utilizados em sistemas web, Android ou iOS. Isso garante que todos os squads consigam consumir os mesmos Tokens, o que contribui para manter a consistência em todos os produtos.

Criei os Tokens em conjunto com os desenvolvedores. Dessa forma, não cometemos o mesmo erro cometido com o Gaiden, onde a pouca participação dos designers fez com que não conseguíssemos utilizá-lo posteriormente. Além disso, participei ativamente na construção do repositório de Tokens e isso me permitiu fazer alterações futuras nos Tokens sem depender dos desenvolvedores, já que saber básico de JavaScript já torna isso possível.

Sobre a implementação das páginas, conseguimos realizá-la em um tempo menor do que esperado sem interferir negativamente nas atividades do squad de Experiência do Cliente.

Por último, a criação dos Tokens foi um primeiro passo para a criação do Design System do GetNinjas, projeto pelo qual fui responsável posteriormente.