Quando o Design encontra a Engenharia na Traveloka

Esta não é uma história de amor comum.

Nota: Essa é apenas uma das interações entre Design e Engenharia. Estou falando de um pequeno espectro de todas as interações entre Design e Engenharia em Traveloka. E esta é a minha história.

Com o passar do tempo, a Traveloka existe há 6 anos. Nesta jornada, admitimos que temos muitos bugs visuais que existem há um bom tempo, como diferentes tons de laranja para botões ou margem inconsistente entre os cartões.

A equipe de design iniciou o esforço para padronizar nossa linguagem visual criando nosso próprio kit de design para evitar novas anomalias visuais que se desviassem de nosso padrão. Tentamos, mas de alguma forma esse problema nunca foi resolvido. Mesmo depois de termos nosso próprio kit de design, ainda vemos essas inconsistências visuais em nossos produtos.

Por outro lado, nossos engenheiros precisam trabalhar com mais eficiência. Eles preferem construir componentes semelhantes do zero em vez de procurar o mesmo componente para reutilização. Porque pesquisar esses componentes é um atrito no fluxo de trabalho atual.

Durante todo esse tempo, a equipe de design e a equipe de engenharia tentavam resolver seu próprio problema sem se comunicar. Surgiu a pergunta sobre a possibilidade de o Design e a Engenharia trabalharem juntos para resolver o problema que ambos enfrentamos todos os dias. Quem sabia que Design e Engenharia podem andar de mãos dadas e cultivar amor no processo?

Quando eles se conheceram?

As conversas começaram no início de 2018, quando a equipe de Engenharia fez uma pesquisa sobre o React Native e o React Native Web (o React Native é uma estrutura para criar aplicativos móveis usando JavaScript). Quando essa pesquisa começou, os desenvolvedores da interface do usuário da Web da equipe de design se envolveram.

Durante o processo, a equipe de engenharia teve a idéia de usar o React Native como base para o desenvolvimento de plataforma cruzada. Isso inclui o desenvolvimento da Web móvel, na qual o desenvolvedor da interface do usuário da Web pode envolver a criação de componentes.

Quando essa iniciativa começou, ficamos muito empolgados em aprender o React Native e tirar o melhor proveito dela, pois podemos causar um impacto mais significativo e criar componentes para todas as plataformas disponíveis a partir de uma única fonte de código. E é aqui que nos conhecemos primeiro.

Como o amor cresceu?

Nós nos conhecemos algumas vezes depois disso, mas nada despertou em nosso coração. Mas então, a faísca surge quando temos esse estagiário. Tudo começou tão simples quanto um projeto interno.

Esse estagiário é um engenheiro do React Native e designado para criar qualquer coisa que possa facilitar a colaboração entre Design e Engenharia. Ele começou a criar uma biblioteca de componentes, alguns plugins de esboço impressionantes para designers e pesquisar outras possibilidades de colaboração entre Design e Engenharia.

Além disso, a equipe de Design também teve a iniciativa de criar uma fonte única de verdade baseada em código (SSOT) para tokens e componentes de design. Esses dois movimentos nos inspiraram a colaborar nessa missão. É aqui que o amor acende, e acreditamos que estamos juntos em um futuro melhor.

Para onde o amor nos levou?

Depois de várias vezes namorando (leia-se: reunião), finalmente concordamos em levar nosso relacionamento para o próximo nível. Não era fácil seguir o caminho, mas acreditávamos que este é o caminho certo para nós. Entender um ao outro é a chave essencial para um bom relacionamento, certo? E foi o que fizemos quando decidimos colaborar.

Começamos entendendo como o outro funciona. E depois dessas noites cheias de pesadelos e estradas cheias de obstáculos, finalmente estamos caminhando para uma melhor colaboração. Aqui estão nossos compromissos para obter uma melhor colaboração entre Design e Engenharia:

1. Sistema de design baseado em código.

A colaboração entre Design e Engenharia tem sido bastante desafiadora. A ponte entre design e código não é suficientemente forte e tornou o trabalho difícil entre nós.

Em seguida, tivemos a ideia de criar um sistema de design baseado em código. Colocamos nosso token de design em JavaScript, que é a maneira mais fácil para o engenheiro utilizar, mas ainda assim é simples o suficiente para o designer gerenciar.

Estamos colaborando para criar nossos próprios componentes artesanais que atendem aos padrões de design e engenharia. Esses componentes serão usados ​​em todas as plataformas para estabelecer consistência em nosso design.

2. Sketch plugins.

Os plug-ins deste Sketch funcionam como a ponte entre design e códigos. No lado do Design, isso facilita a colaboração, porque os designers não precisam gerar os mesmos componentes repetidamente. Isso também ajudará o designer a criar sua interface com o usuário com base nos componentes padronizados.

No lado da engenharia, este plugin converterá a interface do usuário em códigos que podem ser facilmente implementados pelo engenheiro. Isso reduzirá o tempo de trabalho do engenheiro, pois eles não precisam procurar componentes existentes do design anterior.

3. Projete o linter e teste visual integrado.

Depois de trabalhar com a interface do usuário e o código, a próxima etapa é garantir que os dois sejam padronizados. É aqui que participam o linter do projeto e os testes visuais integrados. Atualmente, estamos pesquisando a possibilidade de desenvolver projetos de design e testes visuais integrados para funcionar como uma rede de segurança para nossa interface e códigos de usuário. Do lado do design, o design linter incentivará o UI Designer a usar componentes padronizados. Enquanto isso, do lado da engenharia, os testes visuais diminuirão a possibilidade de anomalias visuais quando o produto for lançado. Isso facilitará a vida do designer e do engenheiro no futuro.

4. Projete a documentação do sistema.

Ao colaborar com equipes diferentes, é bom ter uma orientação à qual vocês dois possam se referir. A documentação do sistema de design funciona como a Bíblia de design acessível a todos os interessados, incluindo gerentes de produto, engenheiro e colegas designers. Isso é importante para garantir que todos estejam no mesmo quadro sobre por que uma decisão de design é tomada. Isso também ajudará a evitar qualquer desacordo no projeto entre a equipe, porque todo projeto é feito com consideração cuidadosa.

Ilustração de Ralistu Hayu Pratiwi

Com todas essas etapas básicas, acreditamos que podemos fazer uma melhor colaboração e integração futura entre elas. A colaboração também abrirá possibilidades para criar produtos melhores.

No final, projetar um produto não é apenas como torná-lo bonito e interessante. Também há muitos esforços de engenharia para fazer o design funcionar perfeitamente. Isso ilustra a importância da colaboração entre Design e Engenharia; como não podemos viver um sem o outro na construção de um bom produto. Como Steve Jobs disse,

“O design não é apenas o que parece e parece. Design é como funciona. ”