Kad Dizajn naiđe na Inženjering u Traveloka

Ovo nije obična ljubavna priča.

Napomena: Ovo je samo jedna od interakcija dizajna i inženjerstva. Govorim iz jednog malog spektra svih interakcija dizajna i inženjeringa u Traveloki. I ovo je moja priča.

Kako vrijeme prolazi, Traveloka postoji već 6 godina. Na ovom putovanju priznajemo da imamo puno vizualnih grešaka koji su prisutni već duže vrijeme, poput različitih nijansi narančaste boje za gumbe ili nedosljedne margine između kartica.

Dizajnerski tim pokrenuo je napor da standardiziramo naš vizualni jezik tako što smo izgradili vlastiti dizajnerski komplet kako bi se spriječile nove vizualne anomalije koje su odstupile od našeg standarda. Pokušali smo, ali nekako se ovaj problem nikada nije riješio. Čak i nakon što imamo vlastiti dizajnerski komplet, i dalje vidimo te vizualne nedosljednosti na našim proizvodima.

S druge strane, naši inženjeri moraju raditi učinkovitije. Radije grade slične komponente ispočetka, umjesto da traže da bi tu istu komponentu mogli koristiti ponovo. Budući da potraga za tim komponentama trenje je u njihovom trenutnom procesu rada.

Svo to vrijeme tim dizajnera i inženjerski tim pokušavali su riješiti vlastiti problem ne komunicirajući jedni s drugima. Postavljalo se pitanje mogućnosti projektiranja i inženjeringa da rade zajedno na rješavanju problema s kojim se obojica susrećemo svaki dan. Tko je znao da dizajn i inženjering mogu ići ruku pod ruku i povećati ljubav u tom procesu?

Kada su se prvi put upoznali?

Razgovori su započeli početkom 2018. godine kada je Inženjerski tim izveo neko istraživanje o React Native i React Native Web (React Native je okvir za izgradnju mobilnih aplikacija pomoću JavaScript-a). Kad je ovo istraživanje počelo, uključili su se Web UI Developers iz dizajnerskog tima.

Tijekom procesa, inženjerski tim imao je ideju koristiti React Native kao bazu za razvoj više platformi. To uključuje razvoj Web-a za mobilne uređaje u kojem se Web UI Developer može uključiti u stvaranje komponenti na njemu.

Kada je ova inicijativa započela, bili smo toliko uzbuđeni da naučimo React Native i najbolje iz nje napravimo što možemo iz značajnijeg učinka i stvoriti komponente za svu dostupnu platformu iz jednog izvora koda. I tu se prvo upoznajemo.

Kako je ljubav rasla?

Upoznali smo se nekoliko puta nakon toga, ali ništa nam nije iskrivilo u srcu. Ali onda se iskra pojavi kad imamo tu pripravnicu. Sve je počelo jednostavno kao pripravnički projekt.

Ovaj stažista je inženjer React Native i zadužen je za izgradnju svega što može umanjiti suradnju između Dizajna i inženjeringa. Započeo je graditi biblioteku komponenata, neke fantastične dodatke za skice za dizajnere, a istraživao je i druge mogućnosti suradnje između Dizajna i Inženjeringa.

Osim toga, tim za dizajn je također pokrenuo inicijativu za izradu jedinstvenog izvora istine (SSOT) za kodiranje dizajnerskih tokena i komponenti. Ta dva pokreta nadahnula su nas za suradnju na ovoj misiji. Ovdje ljubi ljubav i vjerujemo da zajedno trčimo u svjetliju budućnost.

Kamo nas je vodila ljubav?

Nakon nekoliko puta druženja (čitaj: sastanak), konačno se slažemo da svoj odnos prebacimo na novu razinu. Kroz put nije bilo lako, ali vjerovali smo da je to prava stvar za nas. Razumijevanje jednoga drugog je ključni ključ dobre veze, zar ne? To smo napravili kada smo odlučili surađivati.

Započeli smo s razumijevanjem kako djeluju jedni druge. I nakon ovih noći punih noćnih mora i cesta prepunih prepreka, konačno krećemo prema boljoj suradnji. Evo naših obveza za postizanje bolje suradnje između dizajna i inženjeringa:

1. Sustav dizajna temeljen na kodu.

Suradnja između dizajna i inženjeringa bila je prilično izazovna. Most između dizajna i koda nije dovoljno jak i zato je posao postao težak između nas.

Tada smo dobili ideju za stvaranje dizajnerskog sustava temeljenog na kodu. Dizajnerski token postavljamo u JavaScript, što je inženjer najjednostavniji način upotrebe, a opet dovoljno jednostavan da dizajner upravlja.

Surađujemo na izradi vlastitih ručno izrađenih komponenti koje zadovoljavaju dizajn i inženjerski standard. Te će se komponente koristiti na svim platformama za uspostavljanje dosljednosti u našem dizajnu.

2. Skice dodataka.

Ovi dodaci za Sketch djeluju poput mosta između dizajna i kodova. Sa dizajnerske strane ovo olakšava suradnju jer dizajneri ne moraju generirati iste komponente iznova i iznova. To će također pomoći dizajneru da izgradi svoje korisničko sučelje na temelju standardiziranih komponenti.

Na strani Inženjeringa ovaj će dodatak prevesti korisničko sučelje u kodove koje inženjer može lako implementirati. To će smanjiti radno vrijeme inženjera, jer oni ne trebaju tražiti postojeće komponente iz prethodnog dizajna.

3. Dizajn lintera i integrirano vizualno testiranje.

Nakon rada s korisničkim sučeljem i kodom sljedeći je korak osigurati da se oboje standardiziraju. Tu su sudjelovali dizajnerski sloj i integrirano vizualno testiranje. Trenutno istražujemo mogućnost da razvijemo dizajn dizajna i integrirano vizualno testiranje kako bismo funkcionirali kao sigurnosna mreža i za naše korisničko sučelje i kodove. Sa strane dizajna, dizajnerski sloj ohrabrit će UI Designer da koristi standardizirane komponente. U međuvremenu, sa inženjerske strane, vizualno testiranje će smanjiti mogućnost vizualnih anomalija nakon puštanja proizvoda. Tako će život i dizajnera i inženjera ubuduće biti lakši.

4. Dokumentacija projektnog sustava.

Kad surađujete s drugim timom, lijepo je imati smjernice na koje vas oboje možete uputiti. Dokumentacija dizajnerskog sustava djeluje kao biblija dizajna koja je dostupna svim dionicima, uključujući rukovoditelje proizvoda, inženjere i druge dizajnere. Ovo je važno kako biste bili sigurni da su svi na istoj ploči zbog čega se donosi odluka o dizajnu. To će također pomoći da se izbjegne bilo kakva neslaganja u dizajnu između tima, jer je svaki dizajn zamišljeno rađen s pažnjom.

Ilustracija Ralistu Hayu Pratiwi

Uz sve ove dječje korake vjerujemo da možemo poboljšati suradnju i integraciju u budućnosti. Suradnja će također otvoriti mogućnosti za stvaranje boljih proizvoda.

Na kraju, dizajniranje proizvoda nije samo način kako da izgleda lijepo i zanimljivo. Također je potrebno puno inženjerskih napora kako bi dizajn bio besprijekoran. Ovo ilustrira važnost suradnje između Dizajna i inženjeringa; kao što ne možemo jedni bez drugih u stvaranju dobrog proizvoda. Kao što je Steve Jobs rekao,

„Dizajn nije samo ono što izgleda i izgleda. Dizajn tako funkcionira. "