Ko se Design sreča z inženiringom na Traveloki

To ni običajna ljubezenska zgodba.

Opomba: To je le ena od interakcij med oblikovanjem in inženiringom. Govorim iz enega majhnega spektra vseh interakcij med oblikovanjem in inženiringom v Traveloki. In to je moja zgodba.

S časom Traveloka traja že 6 let. Na tej poti priznamo, da imamo veliko vizualnih napak, ki so tam že kar nekaj časa, na primer različne oranžne odtenke za gumbe ali neskladen rob med karticami.

Oblikovalska ekipa je sprožila prizadevanje za standardizacijo vizualnega jezika z izdelavo lastnega dizajnerskega kompleta, da bi preprečili morebitne nove vizualne anomalije, ki odstopajo od našega standarda. Poskušali smo, a nekako se ta težava ni nikoli rešila. Tudi potem, ko imamo lasten komplet za oblikovanje, še vedno opazimo tiste vizualne nedoslednosti na naših izdelkih.

Po drugi strani pa morajo naši inženirji delati učinkoviteje. Raje gradijo podobne komponente iz nič, namesto da bi iskali tisto komponento za ponovno uporabo. Ker iskanje teh komponent trenja v njihovem trenutnem poteku dela.

V vseh teh časih sta oblikovalska in inženirska ekipa poskušala rešiti svoj problem, ne da bi drug drugemu komunicirali. Odprlo se je vprašanje o možnosti, da Design and Engineering sodelujeta pri reševanju problema, s katerim se vsak dan srečujemo. Kdo je vedel, da lahko Oblikovanje in inženiring hodita z roko v roki in si v njem raste ljubezen?

Kdaj sta se prvič srečala?

Pogovori so se začeli v začetku leta 2018, ko je inženirska ekipa opravila nekaj raziskav na področju React Native in React Native Web (React Native je okvir za gradnjo mobilnih aplikacij s pomočjo JavaScript). Ko se je raziskovanje začelo, so se vključili razvijalci spletnih UI iz ekipe za oblikovanje.

Med postopkom je inženirska ekipa imela idejo, da uporabi React Native kot osnovo za razvoj platform. To vključuje razvoj mobilnega spleta, v katerega lahko razvijalec Web UI sodeluje pri ustvarjanju komponent na njem.

Ko se je začela ta pobuda, smo bili tako navdušeni, da smo se naučili React Native in iz njega kar najbolje izkoristili, saj lahko naredimo pomembnejši vpliv in iz enega vira kode ustvarimo komponente za vso razpoložljivo platformo. In tu se najprej spoznamo.

Kako je zrasla ljubezen?

Spoznala sva se nekajkrat po tistem, a v srcu nam ni nič iskrilo. Potem pa se iskrica pojavi, ko imamo to staž. Vse se je začelo tako preprosto kot pripravniški projekt.

Ta staž je inženir React Native in zadolžen za gradnjo vsega, kar bi lahko omililo sodelovanje med Design in Engineering. Začel je graditi knjižnico komponent, nekaj osupljivih vtičnikov za oblikovalce in raziskal druge možnosti sodelovanja med Design in Engineering.

Poleg tega je Design tim tudi pobudo za izdelavo enotnega vira resnice (SSOT), ki temelji na kodi, za oblikovalske žetone in komponente. Ta dva gibanja sta nas navdihnila za sodelovanje pri tej misiji. Tu vlada ljubezen in verjamemo, da skupaj trčimo v svetlejšo prihodnost.

Kam nas je vodila ljubezen?

Po večkratnih zmenkih (beri: srečanju) se končno strinjamo, da svoj odnos popeljemo na naslednjo raven. Na pot ni bilo enostavno, vendar smo verjeli, da je to pravi za nas. Razumevanje drug drugega je bistveni ključ do dobrih odnosov, kajne? In to smo storili, ko smo se odločili sodelovati.

Začeli smo z razumevanjem, kako delujeta drug drugega. In po teh nočeh, polnih nočnih mor in cest, polnih ovir, se končno odpravljamo proti boljšemu sodelovanju. Tu so naše zaveze za boljše sodelovanje med oblikovanjem in inženiringom:

1. Sistem zasnove na osnovi kode.

Sodelovanje med oblikovanjem in inženiringom je bilo precej zahtevno. Most med oblikovanjem in kodo ni dovolj močan, zato je delo postalo naporno med nami.

Nato smo dobili idejo, da bi ustvarili sistem zasnove na osnovi kode. Svoj dizajnerski žeton smo dali v JavaScript, ki ga inženir najlažje uporablja, vendar je oblikovalec še vedno dovolj preprost za upravljanje.

Sodelujemo pri izdelavi lastnih ročno izdelanih komponent, ki ustrezajo dizajnerskim in inženirskim standardom. Te komponente bodo uporabljene na vseh platformah, da se ustanovi doslednost našega oblikovanja.

2. Sketch vtičniki.

Ta vtičniki Sketch delujejo kot most med dizajnom in kodami. Na strani Design to sodelovanje olajša, saj oblikovalcem ni treba ustvarjati istih komponent znova in znova. To bo tudi oblikovalcu pomagalo zgraditi svoj uporabniški vmesnik na podlagi standardiziranih komponent.

Na strani Inženiringa bo ta vtičnik uporabniški vmesnik prevedel v kode, ki jih lahko inženir enostavno izvede. To bo zmanjšalo delovni čas inženirja, saj jim ni treba iskati obstoječih komponent iz prejšnjega dizajna.

3. Oblikovalski liner in integrirano vizualno testiranje.

Po delu z uporabniškim vmesnikom in kodo je naslednji korak zagotovitev, da sta oba standardizirana. Tu so sodelovali oblikovalni linijski in integrirani vizualni testi. Trenutno raziskujemo možnost, da bi razvili oblikovalski pas in integrirano vizualno testiranje, ki bi delovale kot varnostna mreža za uporabniški vmesnik in kode. Z vidika oblikovanja bo oblikovalski vodnik UI Designer spodbudil k uporabi standardiziranih komponent. Medtem bo z inženirske strani vizualno testiranje zmanjšalo možnost vidnih nepravilnosti ob izdaji izdelka. Tako bo življenje oblikovalca in inženirja v prihodnosti olajšano.

4. Dokumentacija sistemskega dokumentacije.

Kadar sodelujete z drugo ekipo, je lepo imeti smernice, na katere se lahko sklicujete oba. Dokumentacija oblikovalskega sistema deluje kot oblikovalska biblija, ki je dostopna vsem zainteresiranim stranem, vključno z vodji izdelkov, inženirjem in kolegi oblikovalci. To je pomembno, da se prepričate, ali so vsi na isti plošči, zakaj je sprejeta oblikovalska odločitev. To bo tudi pomagalo, da se izognete morebitnim nesoglasjem glede oblikovanja med ekipo, saj je vsak dizajn premišljeno narejen s skrbnim premislekom.

Ilustracija Ralistu Hayu Pratiwi

Z vsemi temi otroškimi koraki verjamemo, da lahko medsebojno boljše sodelovanje in povezovanje. Sodelovanje bo odprlo tudi možnosti za ustvarjanje boljših izdelkov.

Na koncu oblikovanje izdelka ni samo to, kako narediti lep in zanimiv. Obstaja tudi veliko inženirskih prizadevanj, da bi oblikovanje delovalo brezhibno. To kaže na pomembnost sodelovanja med Oblikovanjem in Inženiringom; saj ne moremo živeti drug brez drugega v ustvarjanju dobrega izdelka. Kot je rekel Steve Jobs,

„Oblikovanje ni samo tisto, kar izgleda in je videti. Kako deluje oblikovanje. "