Quando Design incontra Engineering a Traveloka

Questa non è una storia d'amore ordinaria.

Nota: questa è solo una delle interazioni tra Design e Engineering. Sto parlando da un piccolo spettro di tutte le interazioni tra Design e Engineering in Traveloka. E questa è la mia storia.

Con il passare del tempo, Traveloka è in circolazione da 6 anni. In questo viaggio, ammettiamo che abbiamo molti bug visivi che sono stati lì per un bel po ', come diverse sfumature di arancione per i pulsanti o margine incoerente tra le carte.

Il team di progettazione ha iniziato lo sforzo di standardizzare il nostro linguaggio visivo costruendo il nostro kit di progettazione per prevenire eventuali nuove anomalie visive che si discostassero dal nostro standard. Ci abbiamo provato, ma in qualche modo questo problema non è mai stato risolto. Anche dopo che abbiamo il nostro kit di progettazione, vediamo ancora quelle incongruenze visive sui nostri prodotti.

D'altro canto, i nostri ingegneri devono lavorare in modo più efficiente. Preferiscono costruire componenti simili da zero invece di cercare per trovare lo stesso componente da riutilizzare. Perché la ricerca di questi componenti è un attrito nel loro flusso di lavoro attuale.

In tutte queste occasioni, il team di progettazione e il team di progettazione hanno cercato di risolvere il proprio problema senza comunicare tra loro. Ha sollevato la domanda sulla possibilità che Design e Engineering lavorino insieme per risolvere il problema che entrambi incontriamo ogni giorno. Chi sapeva che Design e Engineering possono camminare mano nella mano e far crescere l'amore nel processo?

Quando si sono conosciuti?

I colloqui sono iniziati all'inizio del 2018, quando il team di ingegneri ha svolto alcune ricerche su React Native e React Native Web (React Native è un framework per creare app mobili utilizzando JavaScript). Quando è iniziata questa ricerca, sono stati coinvolti gli sviluppatori dell'interfaccia utente Web del team di progettazione.

Durante il processo, il team di ingegneria ha avuto l'idea di utilizzare React Native come base per lo sviluppo multipiattaforma. Ciò include lo sviluppo del Web mobile in cui lo sviluppatore dell'interfaccia utente Web può coinvolgere per creare componenti su di esso.

Quando è iniziata questa iniziativa, eravamo così entusiasti di apprendere React Native e trarne il meglio dal momento che possiamo avere un impatto più significativo e creare componenti per tutte le piattaforme disponibili da un'unica fonte di codice. Ed è qui che ci conosciamo per la prima volta.

Come è cresciuto l'amore?

Ci siamo incontrati poche volte dopo, ma nulla ha suscitato nel nostro cuore. Ma poi, la scintilla emerge quando abbiamo questo stagista. Tutto è iniziato semplice come un progetto di stagista.

Questo tirocinante è un ingegnere nativo di React e assegnato a costruire qualsiasi cosa che possa facilitare la collaborazione tra Design e Engineering. Ha iniziato a costruire una libreria di componenti, alcuni plugin di sketch strabilianti per i progettisti e ricercare altre possibilità di collaborazione tra Design e Engineering.

A parte ciò, il team di progettazione ha anche avuto l'iniziativa di creare una singola fonte di verità (SSOT) basata su codice per token e componenti di progettazione. Questi due movimenti ci hanno ispirato a collaborare a questa missione. Questo è dove l'amore scintilla e crediamo che stiamo correndo insieme in un futuro più luminoso.

Dove ci ha portato l'amore?

Dopo diverse occasioni di incontri (leggi: incontro), finalmente accettiamo di portare la nostra relazione al livello successivo. Non è stato facile percorrere la strada, ma credevamo che questa fosse la strada giusta per noi. Comprendersi è la chiave essenziale per una buona relazione, giusto? Ed è quello che abbiamo fatto quando abbiamo deciso di collaborare.

Abbiamo iniziato capendo come funzionano a vicenda. E dopo queste notti piene di incubi e strade piene di ostacoli, ci stiamo finalmente dirigendo verso una migliore collaborazione. Ecco i nostri impegni per raggiungere la migliore collaborazione tra Design e Engineering:

1. Sistema di progettazione basato su codice.

La collaborazione tra Design e Engineering è stata piuttosto impegnativa. Il ponte tra design e codice non è abbastanza forte e ha reso il lavoro diventato duro tra di noi.

Abbiamo quindi avuto l'idea di creare un sistema di progettazione basato su codice. Inseriamo il token di progettazione in JavaScript, che è il modo più semplice da utilizzare per gli ingegneri, ma ancora abbastanza semplice da gestire per i designer.

Stiamo collaborando per costruire i nostri componenti artigianali che soddisfano gli standard di progettazione e ingegneria. Tali componenti verranno utilizzati su tutte le piattaforme per stabilire coerenza nel nostro progetto.

2. Plugin di sketch.

Questo plugin Sketch funziona come il ponte tra design e codici. Dal punto di vista del design, ciò semplifica la collaborazione perché i progettisti non devono generare gli stessi componenti più e più volte. Ciò aiuterà anche i progettisti a costruire la propria interfaccia utente in base ai componenti standardizzati.

Dal punto di vista ingegneristico, questo plugin tradurrà l'interfaccia utente in codici che possono essere facilmente implementati dall'ingegnere. Ciò ridurrà il tempo di lavoro dell'ingegnere perché non è necessario cercare componenti esistenti dal progetto precedente.

3. Design linter e test visivi integrati.

Dopo aver lavorato con l'interfaccia utente e il codice, il passaggio successivo è assicurarsi che entrambi siano standardizzati. È qui che hanno preso parte linter di progettazione e test visivi integrati. Attualmente stiamo cercando la possibilità di sviluppare linter di progettazione e test visivi integrati per funzionare come una rete di sicurezza sia per la nostra interfaccia utente che per i nostri codici. Dal punto di vista del design, la linter del design incoraggerà UI Designer a utilizzare componenti standardizzati. Nel frattempo, dal punto di vista ingegneristico, i test visivi ridurranno la possibilità di anomalie visive al rilascio del prodotto. Ciò renderà la vita di designer e ingegneri più facile in futuro.

4. Progettare la documentazione del sistema.

Quando si collabora con diversi team, è bello avere una linea guida a cui entrambi si possano fare riferimento. La documentazione del sistema di progettazione funziona come la bibbia di progettazione accessibile da tutte le parti interessate, inclusi Product Manager, ingegnere e colleghi designer. Questo è importante per assicurarsi che tutti siano sulla stessa lavagna del motivo per cui viene presa una decisione di progettazione. Ciò contribuirà anche a evitare qualsiasi disaccordo di progettazione tra il team, poiché ogni progetto è realizzato con cura e attenzione.

Illustrazione di Ralistu Hayu Pratiwi

Con tutti questi piccoli passi, crediamo di poter migliorare la collaborazione e l'integrazione future tra di noi. La collaborazione aprirà anche possibilità per creare prodotti migliori.

Alla fine, progettare un prodotto non è solo come renderlo bello e interessante. Ci sono anche molti sforzi ingegneristici per far funzionare perfettamente il design. Ciò illustra l'importanza della collaborazione tra Design e Engineering; poiché non possiamo vivere l'uno senza l'altro nella costruzione di un buon prodotto. Come ha detto Steve Jobs,

“Il design non è solo quello che sembra e come si sente. Il design è come funziona."