Unindo e readaptando duas marcas num único produto

A Levee é uma empresa atua com o B2B, numa plataforma de gestão de vagas para varejo, e que atua juntamente com a plataforma Emprego Ligado, no lado B2C, para a divulgação e aplicação dessas vagas. A identidade e interação distintas de ambas as plataformas fez com que houvesse a necessidade de uni-las numa só.

Cargo

UI/Visual Designer

Cliente

Levee

Duração

12 semanas

O problema

A Levee é uma empresa que possui uma plataforma voltada para empresas que desejam contratar profissionais para atuar no varejo. Do outro lado, com o público voltado a pessoas que buscam emprego, existe a Emprego Ligado, funcionando como uma plataforma de banco de vagas. Apesar de serem duas empresas e plataformas diferentes, uma única equipe era responsável por cuidar, manter e atualizá-las.

A dor por parte do cliente nasceu do fator de trabalho dobrado, já que ao atualizar uma feature que envolvesse o sistema de contratação em uma das plataformas, na outra obrigatoriamente deveria acontecer o mesmo incremento, mas ambas plataformas não se conversavam por identidade, interação, componentes e outros elementos visuais. Para que houvesse um padrão e agilidade de desenvolvimento por parte da empresa, e interfaces consistentes, harmônicas e acessíveis por parte das pessoas usuárias, sugeri construirmos um Design System.

Planejamento

O planejamento inicial envolveu analisar as interfaces e funcionalidades dos dois produtos, buscando entender quais elementos são utilizados com grande e baixa frequência, e dentre esses, quais são os utilizados em ambos produtos, sendo classificados como os mais importantes.

Para um primeiro contato entre mim e a equipe de tecnologia, decidi realizar uma apresentação com uma seção de tira-dúvidas a respeito do tema "Design System" para aqueles que nunca foram introduzidos ou não se aprofundaram no assunto.

Construção

Com a análise dos produtos, elaborei um roadmap que envolveu 6 sprints de duas semanas cada, sendo que a Sprint 1 teve como foco a estruturação dos princípios e valores do Design System, junto com a preparação dos elementos base, sendo esses os pilares para todos os componentes criados a partir da Sprint 2. Como todas as interfaces dos produtos da Levee e Emprego Ligado estavam construídas no Sketch, a decisão foi de manter tudo centralizado numa mesma ferramenta.

Foundation

Podemos dizer que os elementos que compõem essa categoria são fundamentais para tudo o que virá a seguir. Costumo associar com os pilares de um prédio, que são a sustentação para tudo esteja em pé e funcionando da maneira que deve. Se vamos produzir componentes, independente do nível de complexidade que possuem, então existem algumas coisas que precisam ser trabalhadas previamente.

Se tratando de uma marca que já possui alguns anos de mercado, está atuando tanto com B2B quanto B2C, e há uma equipe de tecnologia que possui viabilidade para tratar e melhorar o desempenho dos produtos, tratei ao máximo os elementos "básicos" de uma interface digital: cores, iconografia, layers (elevations), layout (breakpoints e grids) e tipografia.

Parte do trabalho costuma ser facilitado quando uma empresa da valor a sua marca, e possui um Manual de Identidade bem trabalhado, especificando não só os elementos visuais que a definem, como as essências e regras de uso. Isso é extremamente importante para um Design System, pois muitas vezes ele atende, se desenvolve e se adapta a essas decisões.

levee-colors.png

levee-elevation.png

levee-layout.png

Componentes

Para as próximas cinco sprints, priorizei os componentes que mais eram presentes em ambos os produtos, e que poderiam ser melhorados não apenas no aspecto visual quando falamos de "beleza", mas também em personalização, responsividade e o mais importante: acessibilidade.

As sprints de número 2 e 3 envolveram os componentes mais básicos dos produtos, e que tinham maior frequência de uso, como os botões, dropdowns e campos de formulário. Se classificássemos nos itens do Atomic Design, essas sprints seriam os moléculas, enquanto as sprints 4, 5 e 6 são os organismos, contendo componentes como modal, notification bar e steppers. Ao todo foram desenvolvidos 20 componentes para o Design System, sendo que boa parte desses possuíam estados de interação, ou modelos diferentes para se adaptar ao dispositivo ou conteúdo ideal.

Documentação

Para a construção, usamos o Sketch, mas para a documentação, usamos duas ferramentas úteis tanto para designers quanto para desenvolvedores, mas que também atendesse ao público externo interessado.

O zeroheight foi a escolha para a documentação especificada de cada elemento e componente, já que é uma ferramenta que possui integração com o Sketch, facilitando a publicação, contando ainda com a possibilidade de criar uma seção de "Dos and don'ts", servindo como um guia de padrões, indicando boas e más práticas. Para que a documentação fizesse sentido e houvesse um padrão de escrita, defini os tópicos "Modo de usar", "Tipos", "Elementos" e "Fazer e não fazer".

No que envolveu tecnologia, utilizamos o storybook por, talvez, ser a ferramenta mais famosa para construções de Design System, já que permite documentar os componentes, tal como o zeroheight permite, mas que possui algumas funcionalidades extras que permite se aprofundar melhor na interação e personalização, além de tratar melhor a parte de código.