Quand la conception rencontre l'ingénierie chez Traveloka

Ce n'est pas une histoire d'amour ordinaire.

Remarque: Ce n'est qu'une des interactions entre la conception et l'ingénierie. Je parle d'un petit spectre de toutes les interactions entre la conception et l'ingénierie à Traveloka. Et voici mon histoire.

Au fil du temps, Traveloka existe depuis 6 ans. Dans ce voyage, nous admettons que nous avons beaucoup de bugs visuels qui sont là depuis un certain temps, comme différentes nuances d'orange pour les boutons ou une marge incohérente entre les cartes.

L'équipe de conception a lancé l'effort de normaliser notre langage visuel en construisant notre propre kit de conception pour éviter toute nouvelle anomalie visuelle qui s'écarterait de notre norme. Nous avons essayé, mais ce problème n'a jamais été résolu. Même après avoir notre propre kit de conception, nous voyons toujours ces incohérences visuelles sur nos produits.

D'un autre côté, nos ingénieurs doivent travailler plus efficacement. Ils préfèrent construire des composants similaires à partir de zéro au lieu de chercher pour trouver le même composant à réutiliser. Parce que la recherche de ces composants est une friction dans leur flux de travail actuel.

Pendant tout ce temps, l'équipe de conception et l'équipe d'ingénierie essayaient de résoudre leur propre problème sans se communiquer. Cela a soulevé la question de la possibilité pour la conception et l'ingénierie de travailler ensemble pour résoudre le problème que nous rencontrons tous les jours. Qui savait que la conception et l'ingénierie peuvent marcher main dans la main et développer l'amour dans le processus?

Quand se sont-ils rencontrés pour la première fois?

Les discussions ont commencé au début de 2018 lorsque l'équipe d'ingénierie a effectué des recherches sur React Native et React Native Web (React Native est un cadre pour créer des applications mobiles à l'aide de JavaScript). Lorsque cette recherche a commencé, les développeurs de l'interface utilisateur Web de l'équipe de conception se sont impliqués.

Au cours du processus, l'équipe d'ingénierie a eu l'idée d'utiliser React Native comme base pour le développement multiplateforme. Cela inclut le développement du Web mobile dans lequel Web UI Developer peut impliquer de créer des composants sur celui-ci.

Lorsque cette initiative a commencé, nous étions tellement ravis d'apprendre React Native et d'en tirer le meilleur parti que nous pouvons avoir un impact plus important et créer des composants pour toutes les plateformes disponibles à partir d'une seule source de code. Et c'est là que nous apprenons à nous connaître.

Comment l'amour a grandi?

Nous nous sommes rencontrés à quelques reprises par la suite, mais rien n'a brillé dans notre cœur. Mais ensuite, l'étincelle émerge lorsque nous avons ce stagiaire. Tout a commencé aussi simplement qu'un projet de stagiaire.

Ce stagiaire est un ingénieur React Native et affecté à la construction de tout ce qui peut faciliter la collaboration entre la conception et l'ingénierie. Il a commencé à créer une bibliothèque de composants, des plugins d'esquisse époustouflants pour les concepteurs et à rechercher d'autres possibilités de collaboration entre la conception et l'ingénierie.

En plus de cela, l'équipe de conception a également eu l'initiative de créer une source unique de vérité (SSOT) basée sur le code pour les jetons de conception et les composants. Ces deux mouvements nous ont inspirés à collaborer à cette mission. C'est là que l'amour jaillit et nous croyons que nous courons ensemble vers un avenir meilleur.

Où l'amour nous a-t-il conduit?

Après plusieurs rencontres (lire: rencontre), nous acceptons enfin de porter notre relation au niveau supérieur. Ce n'était pas une route facile à parcourir, mais nous pensions que c'était la bonne pour nous. Se comprendre est la clé essentielle d'une bonne relation, non? Et c'est ce que nous avons fait lorsque nous avons décidé de collaborer.

Nous avons commencé par comprendre comment fonctionnaient les uns les autres. Et après ces nuits pleines de cauchemars et de routes pleines d'obstacles, nous nous dirigeons enfin vers une meilleure collaboration. Voici nos engagements pour une meilleure collaboration entre la conception et l'ingénierie:

1. Système de conception basé sur le code.

La collaboration entre la conception et l'ingénierie a été assez difficile. Le pont entre la conception et le code n'est pas assez fort et cela a rendu le travail difficile entre nous.

Nous avons alors eu l'idée de créer un système de conception basé sur du code. Nous avons mis notre jeton de conception en JavaScript, qui est le moyen le plus simple à utiliser pour l'ingénieur, mais encore assez simple à gérer pour le concepteur.

Nous collaborons pour construire nos propres composants artisanaux qui répondent aux normes de conception et d'ingénierie. Ces composants seront utilisés sur toutes les plateformes pour établir la cohérence de notre conception.

2. Plugins d'esquisse.

Ces plugins Sketch fonctionnent comme le pont entre la conception et les codes. Côté conception, cela facilite la collaboration car les concepteurs n'ont pas besoin de générer les mêmes composants encore et encore. Cela aidera également le concepteur à construire son interface utilisateur sur la base des composants standardisés.

Du côté de l'ingénierie, ce plugin traduira l'interface utilisateur en codes qui peuvent être facilement implémentés par l'ingénieur. Cela réduira le temps de travail de l'ingénieur car il n'a pas besoin de rechercher les composants existants de la conception précédente.

3. Conception de linter et tests visuels intégrés.

Après avoir travaillé avec l'interface utilisateur et le code, l'étape suivante consiste à s'assurer que les deux sont standardisés. C'est là que le design linter et les tests visuels intégrés ont pris part. Nous recherchons actuellement la possibilité de développer un design linter et des tests visuels intégrés pour fonctionner comme un filet de sécurité pour notre interface utilisateur et nos codes. Du côté de la conception, le linter de conception encouragera UI Designer à utiliser des composants standardisés. Pendant ce temps, du côté de l'ingénierie, les tests visuels réduiront la possibilité d'anomalies visuelles lors de la sortie du produit. Cela facilitera la vie du concepteur et de l'ingénieur à l'avenir.

4. Concevoir la documentation du système.

Lorsque vous collaborez avec différentes équipes, il est agréable d'avoir une directive à laquelle vous pouvez vous référer. La documentation du système de conception fonctionne comme une bible de conception accessible à toutes les parties prenantes, y compris les chefs de produit, les ingénieurs et les collègues designers. Ceci est important pour vous assurer que tout le monde est sur le même plan pour savoir pourquoi une décision de conception est prise. Cela aidera également à éviter tout désaccord de conception entre l'équipe, car chaque conception est soigneusement conçue et soigneusement étudiée.

Illustration de Ralistu Hayu Pratiwi

Avec toutes ces étapes, nous croyons que nous pouvons améliorer la collaboration et l'intégration futures entre nous. La collaboration ouvrira également des possibilités pour créer de meilleurs produits.

En fin de compte, la conception d'un produit ne consiste pas seulement à le rendre joli et intéressant. Il y a aussi beaucoup d'efforts d'ingénierie pour que la conception fonctionne parfaitement. Cela illustre l'importance de la collaboration entre la conception et l'ingénierie; car nous ne pouvons pas vivre les uns sans les autres pour construire un bon produit. Comme l'a dit Steve Jobs,

«Le design n'est pas seulement à quoi il ressemble et se sent. Le design, c'est comme ça qu'il fonctionne. »