Când Design întâlnește Inginerie la Traveloka

Aceasta nu este o poveste de dragoste obișnuită.

Notă: Aceasta este doar una dintre interacțiunile dintre proiectare și inginerie. Vorbesc dintr-un spectru mic de toate interacțiunile dintre proiectare și inginerie în Traveloka. Și aceasta este povestea mea.

Pe măsură ce trece timpul, Traveloka este în jur de 6 ani. În această călătorie, recunoaștem că avem o mulțime de bug-uri vizuale care au fost acolo de ceva vreme, precum diferite nuanțe de portocaliu pentru butoane sau marjă inconsistentă între carduri.

Echipa de proiectare a inițiat efortul de a standardiza limbajul nostru vizual prin construirea propriului set de design pentru a preveni orice anomalii vizuale noi care s-au abătut de la standardul nostru. Am încercat, dar cumva această problemă nu a fost rezolvată niciodată. Chiar și după ce avem propriul nostru kit de design, încă mai vedem acele neconcordanțe vizuale asupra produselor noastre.

Pe de altă parte, inginerii noștri trebuie să lucreze mai eficient. Ei preferă să construiască componente similare de la zero în loc să caute în sus pentru a găsi aceeași componentă pentru refolosire. Deoarece căutarea acestor componente este o frecare în fluxul lor de lucru curent.

În toate aceste timpuri, echipa de proiectare și echipa de inginerie încercau să-și rezolve propria problemă fără a se comunica reciproc. A creat întrebarea cu privire la posibilitatea proiectării și ingineriei de a lucra împreună pentru a rezolva problema pe care o întâlnim amândoi în fiecare zi. Cine știa că Proiectarea și Ingineria pot merge mână în mână și să crească dragoste în acest proces?

Când s-au întâlnit pentru prima dată?

Discuțiile au început la începutul anului 2018, când echipa de inginerie a făcut unele cercetări pe React Native și React Native Web (React Native este un cadru pentru a construi aplicații mobile folosind JavaScript). Când a început această cercetare, dezvoltatorii UI Web de la echipa de proiectare s-au implicat.

În timpul procesului, echipa de inginerie a avut ideea de a utiliza React Native ca bază pentru dezvoltarea platformelor încrucișate. Aceasta include dezvoltarea de Web Mobile în care Web UI Developer poate implica să creeze componente pe acesta.

Când a început această inițiativă, am fost atât de încântați să învățăm React Native și să profităm cât mai bine de ea, încât putem avea un impact mai semnificativ și să creăm componente pentru toată platforma disponibilă dintr-o singură sursă de cod. Și aici este prima dată când ne cunoaștem.

Cum a crescut dragostea?

Ne-am cunoscut de câteva ori după aceea, dar nimic nu a stârnit în inima noastră. Dar atunci, scânteia apare atunci când avem acest intern. Totul a început la fel de simplu ca un proiect intern.

Acest stagiar este un inginer React Native și este alocat pentru a construi orice lucru care poate facilita colaborarea dintre proiectare și inginerie. El a început să construiască o bibliotecă de componente, niște pluginuri de schiță care să creeze mintea pentru designeri și să cerceteze alte posibilități de colaborare între proiectare și inginerie.

În afară de asta, echipa de proiectare a avut și inițiativa de a crea o sursă unică de adevăr (SSOT) bazată pe cod pentru jetoane și componente de proiectare. Aceste două mișcări ne-au inspirat să colaborăm la această misiune. Aici se iubește dragostea și credem că mergem împreună într-un viitor mai luminos.

Unde ne-a condus iubirea?

După câteva întâlniri (citiți: întâlnire), suntem de acord să ducem relația la următorul nivel. Nu a fost ușor să mergeți pe drum, dar am crezut că acesta este cel potrivit pentru noi. Înțelegerea reciprocă este cheia esențială a unei relații bune, nu? Și asta am făcut când am decis să colaborăm.

Am început prin a înțelege cum funcționează reciproc. Și după aceste nopți pline de coșmaruri și drumuri pline de obstacole, ne îndreptăm în sfârșit spre o mai bună colaborare. Iată angajamentele noastre de a realiza o mai bună colaborare între proiectare și inginerie:

1. Sistem de proiectare bazat pe cod.

Colaborarea dintre proiectare și inginerie a fost destul de dificilă. Puntea dintre design și cod nu este suficient de puternică și a făcut ca munca să devină grea între noi.

Ne-am dat apoi ideea de a crea un sistem de proiectare bazat pe coduri. Punem jetonul de design în JavaScript, care este cel mai simplu mod de a folosi inginerul, dar totuși destul de simplu pentru gestionarea proiectantului.

Colaborăm pentru a construi propriile noastre componente artizanale care să corespundă standardului Design și Inginerie. Aceste componente vor fi utilizate pe toate platformele pentru a stabili consecvența în proiectarea noastră.

2. Plugin-uri de schiță.

Aceste plugin-uri Sketch funcționează ca puntea dintre design și coduri. În ceea ce privește proiectarea, acest lucru face colaborarea mai ușoară, deoarece designerii nu au nevoie să genereze aceleași componente din nou și din nou. Acest lucru va ajuta, de asemenea, designerul să își construiască interfața de utilizator pe baza componentelor standardizate.

Din partea Inginerie, acest plugin va traduce interfața utilizator în coduri care pot fi implementate cu ușurință de către inginer. Acest lucru va reduce timpul de lucru al inginerului, deoarece nu trebuie să caute componentele existente din proiectul anterior.

3. Proiectarea linterului și testarea vizuală integrată.

După lucrul cu interfața de utilizator și codul, următorul pas este să vă asigurați că ambele sunt standardizate. Aici au participat linia de design și testarea vizuală integrată. În prezent cercetăm posibilitatea de a dezvolta linter de proiectare și testare vizuală integrată care să funcționeze ca o rețea de siguranță atât pentru interfața utilizatorului cât și pentru codurile noastre. Din partea proiectării, căptușeala de design va încuraja UI Designer să folosească componente standardizate. Între timp, din partea ingineriei, testarea vizuală va scădea posibilitatea anomaliilor vizuale la lansarea produsului. Acest lucru va face viața atât a designerului, cât și a inginerului în viitor.

4. Documentarea sistemului de proiectare.

Când colaborați cu o echipă diferită, este bine să aveți un ghid la care vă puteți referi amândoi. Documentația sistemului de proiectare funcționează ca biblia de proiectare, accesibilă de toate părțile interesate, inclusiv de manageri de produse, ingineri și colegi de proiectare. Acest lucru este important pentru a vă asigura că toată lumea se află pe același consiliu de ce se ia o decizie de proiectare. Acest lucru va ajuta, de asemenea, la evitarea oricăror dezacorduri în ceea ce privește proiectul, deoarece fiecare proiect este conceput cu atenție.

Ilustrație de Ralistu Hayu Pratiwi

Cu toți acești pași ai copilului, credem că putem realiza o mai bună colaborare și integrare viitoare între noi. Colaborarea va deschide, de asemenea, posibilități de a crea produse mai bune.

Până la urmă, proiectarea unui produs nu este doar cum să-l facă să pară destul de interesant. Există, de asemenea, o mulțime de eforturi inginerești pentru ca proiectarea să funcționeze perfect. Aceasta ilustrează importanța colaborării dintre proiectare și inginerie; întrucât nu putem trăi fără să construim un produs bun. După cum a spus Steve Jobs,

„Designul nu este doar cum arată și se simte. Designul funcționează. ”