When Design meets Engineering bij Traveloka

Dit is geen gewoon liefdesverhaal.

Opmerking: dit is slechts een van de interacties tussen Design en Engineering. Ik spreek vanuit een klein spectrum van alle interacties tussen Design en Engineering in Traveloka. En dit is mijn verhaal.

Naarmate de tijd verstrijkt, bestaat Traveloka al 6 jaar. Op deze reis geven we toe dat we veel visuele bugs hebben die er al een tijdje zijn, zoals verschillende tinten oranje voor knoppen of een inconsistente marge tussen kaarten.

Het ontwerpteam heeft de inspanning geïnitieerd om onze beeldtaal te standaardiseren door onze eigen ontwerpkit te bouwen om nieuwe visuele afwijkingen te voorkomen die van onze norm zijn afgeweken. We hebben het geprobeerd, maar op de een of andere manier is dit probleem nooit opgelost. Zelfs nadat we onze eigen ontwerpset hebben, zien we nog steeds die visuele inconsistenties in onze producten.

Anderzijds moeten onze ingenieurs efficiënter werken. Ze geven er de voorkeur aan om helemaal opnieuw vergelijkbare componenten te bouwen in plaats van op te zoeken om diezelfde component te vinden voor hergebruik. Omdat het zoeken naar deze componenten een wrijving is in hun huidige workflow.

Al die tijd probeerden het ontwerpteam en het engineeringteam hun eigen probleem op te lossen zonder met elkaar te communiceren. Het stelde de vraag naar de mogelijkheid dat Design en Engineering samenwerken om het probleem op te lossen dat we allebei elke dag tegenkomen. Wie wist dat Design en Engineering hand in hand kunnen lopen en liefde kunnen laten groeien in het proces?

Wanneer hebben ze elkaar voor het eerst ontmoet?

De gesprekken begonnen begin 2018 toen het engineeringteam wat onderzoek deed naar React Native en React Native Web (React Native is een raamwerk om mobiele apps te bouwen met behulp van JavaScript). Toen dit onderzoek begon, werden Web UI-ontwikkelaars van het ontwerpteam betrokken.

Tijdens het proces had het engineeringteam het idee om React Native te gebruiken als basis voor platformoverschrijdende ontwikkeling. Dit omvat de ontwikkeling van Mobile Web waarbij Web UI Developer kan betrekken om componenten erop te maken.

Toen dit initiatief begon, waren we zo enthousiast om React Native te leren kennen en er het beste van te maken, omdat we een grotere impact kunnen maken en componenten voor alle beschikbare platformen kunnen creëren vanuit een enkele codebron. En hier leren we elkaar voor het eerst kennen.

Hoe de liefde groeide?

We hebben elkaar daarna een paar keer ontmoet, maar er ontstond niets in ons hart. Maar dan ontstaat de vonk wanneer we deze stagiair hebben. Het begon allemaal zo eenvoudig als een intern project.

Deze stagiair is een React Native engineer en toegewezen om alles te bouwen dat de samenwerking tussen Design en Engineering kan vergemakkelijken. Hij begon met het bouwen van een componentenbibliotheek, een aantal verbluffende plug-ins voor ontwerpers en onderzoek naar andere samenwerkingsmogelijkheden tussen Design en Engineering.

Afgezien daarvan had het ontwerpteam ook het initiatief om een ​​op code gebaseerde enkele bron van waarheid (SSOT) te maken voor ontwerptokens en componenten. Deze twee bewegingen inspireerden ons om samen te werken aan deze missie. Dit is waar liefde vonk en we geloven dat we samen een betere toekomst tegemoet gaan.

Waar de liefde ons leidde?

Na verschillende keren daten (lees: ontmoeting), komen we eindelijk overeen om onze relatie naar het volgende niveau te brengen. Het was geen gemakkelijke weg om op te lopen, maar we geloofden dat dit de juiste is voor ons. Elkaar begrijpen is de essentiële sleutel tot een goede relatie, toch? En dat is wat we deden toen we besloten om samen te werken.

We begonnen door te begrijpen hoe elkaar werken. En na deze nachten vol nachtmerries en wegen vol obstakels, gaan we eindelijk op weg naar een betere samenwerking. Hier zijn onze verplichtingen om de betere samenwerking tussen Design en Engineering te bereiken:

1. Op code gebaseerd ontwerpsysteem.

De samenwerking tussen ontwerp en engineering is behoorlijk uitdagend geweest. De brug tussen ontwerp en code is niet sterk genoeg en het maakte het werk moeilijk tussen ons.

Toen kwamen we op het idee om een ​​op code gebaseerd ontwerpsysteem te maken. We hebben ons ontwerptoken in JavaScript geplaatst, wat de eenvoudigste manier is voor ingenieurs om te gebruiken, maar toch eenvoudig genoeg is voor ontwerpers om te beheren.

We werken samen om onze eigen handgemaakte componenten te bouwen die voldoen aan de standaard van Design en Engineering. Die componenten zullen op alle platforms worden gebruikt om consistentie in ons ontwerp te bewerkstelligen.

2. Schets plug-ins.

Deze Sketch-plug-ins werken als de brug tussen ontwerp en codes. Aan de ontwerpkant maakt dit de samenwerking eenvoudiger omdat ontwerpers niet steeds dezelfde componenten hoeven te genereren. Dit helpt de ontwerper ook om zijn gebruikersinterface te bouwen op basis van de gestandaardiseerde componenten.

Aan de engineeringkant vertaalt deze plug-in de gebruikersinterface in codes die eenvoudig door de ingenieur kunnen worden geïmplementeerd. Dit zal de werktijd van de ingenieur verkorten omdat ze niet hoeven op te zoeken naar bestaande componenten uit het vorige ontwerp.

3. Ontwerplinter en geïntegreerde visuele testen.

Na het werken met de gebruikersinterface en de code, is de volgende stap om ervoor te zorgen dat beide zijn gestandaardiseerd. Hier namen designlinter en geïntegreerde visuele testen deel. We onderzoeken momenteel de mogelijkheid om designlinter en geïntegreerde visuele tests te ontwikkelen om te werken als een vangnet voor zowel onze gebruikersinterface als onze codes. Van de kant van het ontwerp, zal de design-interface UI Designer aanmoedigen om gestandaardiseerde componenten te gebruiken. Ondertussen, van de technische kant, zal visuele testen de kans op visuele afwijkingen verminderen wanneer het product wordt vrijgegeven. Dit zal het leven van zowel ontwerper als ingenieur in de toekomst gemakkelijker maken.

4. Ontwerp systeemdocumentatie.

Wanneer u met een ander team samenwerkt, is het leuk om een ​​richtlijn te hebben waarnaar u beiden kunt verwijzen. Ontwerpsysteemdocumentatie werkt als de ontwerpbijbel die toegankelijk is voor alle belanghebbenden, inclusief productmanagers, ingenieurs en collega-ontwerpers. Dit is belangrijk om ervoor te zorgen dat iedereen op hetzelfde bord zit waarom een ​​ontwerpbeslissing wordt genomen. Dit zal ook helpen om elk meningsverschil tussen het team te voorkomen, omdat elk ontwerp zorgvuldig is gemaakt met zorgvuldige afweging.

Illustratie door Ralistu Hayu Pratiwi

Met al deze babystappen geloven we dat we toekomstige samenwerking en integratie tussen elkaar kunnen verbeteren. De samenwerking biedt ook mogelijkheden om betere producten te maken.

Uiteindelijk is het ontwerpen van een product niet alleen hoe het er mooi en interessant uitziet. Er zijn ook veel technische inspanningen om het ontwerp probleemloos te laten werken. Dit illustreert het belang van samenwerking tussen Design en Engineering; omdat we niet zonder elkaar kunnen leven in het bouwen van een goed product. Zoals Steve Jobs zei,

“Design is niet alleen hoe het eruit ziet en aanvoelt. Design is hoe het werkt. ”