Kai dizainas susitiks su „Traveloka“ inžinerija

Tai nėra įprasta meilės istorija.

Pastaba: Tai tik viena iš projektavimo ir inžinerijos sąveikų. Aš kalbu iš vieno nedidelio visų „Traveloka“ projektavimo ir inžinerijos sąveikų spektro. Ir tai yra mano istorija.

Laikui bėgant, „Traveloka“ gyvuoja jau 6 metus. Šioje kelionėje mes pripažįstame, kad turime daugybę vizualinių klaidų, kurios jau seniai egzistuoja, pavyzdžiui, skirtingų spalvų oranžinės spalvos mygtukai ar nenuosekli paraštė tarp kortelių.

Projektavimo komanda pradėjo stengtis standartizuoti mūsų vaizdinę kalbą, sukurdama savo dizaino rinkinį, kad būtų išvengta naujų vizualinių anomalijų, kurios nukryptų nuo mūsų standartų. Mes bandėme, bet kažkaip ši problema neišsisprendė. Net ir turėdami savo dizaino rinkinį, mes vis tiek matome tuos savo produktų vizualinius neatitikimus.

Kita vertus, mūsų inžinieriai turi dirbti efektyviau. Jie nori kurti panašius komponentus nuo nulio, užuot ieškoję to paties komponento pakartotiniam naudojimui. Kadangi šių komponentų paieška yra trintis dabartinėje jų darbo eigoje.

Visą šį laiką projektavimo komanda ir inžinerijos komanda stengėsi išspręsti savo problemą, nebendraudami tarpusavyje. Tai iškėlė klausimą dėl projektavimo ir inžinerijos galimybės dirbti kartu siekiant išspręsti problemą, su kuria abu susiduriame kiekvieną dieną. Kas žinojo, kad dizainas ir inžinerija gali žengti kartu ir auginti meilę?

Kada jie pirmą kartą susitiko?

Pokalbiai prasidėjo 2018 m. Pradžioje, kai inžinierių komanda atliko keletą „React Native“ ir „React Native Web“ tyrimų („React Native“ yra mobiliųjų programų kūrimo sistema naudojant „JavaScript“). Pradėjus šį tyrimą, įsitraukė „Web UI“ kūrėjai iš „Design“ komandos.

Proceso metu inžinerijos komanda turėjo idėją panaudoti „React Native“ kaip pagrindą kelti platformas. Tai apima mobiliojo žiniatinklio, į kurį gali įsitraukti žiniatinklio vartotojo sąsajos kūrėjas, kūrimą.

Kai ši iniciatyva prasidėjo, mes labai džiaugėmės galėdami išmokti „React Native“ ir kuo geriau išnaudoti visas galimybes, nes galime padaryti reikšmingesnį poveikį ir sukurti komponentus visoms prieinamoms platformoms iš vieno kodo šaltinio. Ir čia mes pirmiausia susipažinome.

Kaip išaugo meilė?

Po to keletą kartų susitikome vienas su kitu, bet niekas mūsų širdyje neišblėso. Bet tada kibirkštis iškyla, kai mes turime šį interną. Viskas prasidėjo taip paprastai, kaip ir stažuotės projektas.

Šis stažuotojas yra „React“ vietinis inžinierius ir paskiriamas kurti viską, kas palengvina projektavimo ir inžinerijos bendradarbiavimą. Jis pradėjo kurti komponentų biblioteką, keletą mąstančių eskizų papildinių dizaineriams ir tyrinėti kitas bendradarbiavimo galimybes tarp projektavimo ir inžinerijos.

Be to, projektavimo komanda taip pat turėjo iniciatyvą sukurti kodais pagrįstą vieną tiesos šaltinį (SSOT) dizaino žetonams ir komponentams. Šie du judėjimai mus įkvėpė bendradarbiauti vykdant šią misiją. Čia meilė kibirkščiuoja, ir mes tikime, kad kartu einame į šviesesnę ateitį.

Kur mus vedė meilė?

Po kelių kartų pasimatymo (skaitykite: susitikimo) mes pagaliau sutinkame perkelti savo santykius į kitą lygį. Keliauti pėsčiomis nebuvo lengva, tačiau tikėjome, kad mums tai yra tinkama. Vienas kito supratimas yra esminis gerų santykių raktas, tiesa? Ir tai mes padarėme nusprendę bendradarbiauti.

Pradėjome nuo supratimo, kaip veikia vieni kiti. Po šių košmarų ir kliūčių kupinų naktų pagaliau einame link geresnio bendradarbiavimo. Tai yra mūsų įsipareigojimas pasiekti geresnį projektavimo ir inžinerijos bendradarbiavimą:

1. Kodais pagrįsta projektavimo sistema.

Dizaino ir inžinerijos bendradarbiavimas buvo gana sudėtingas. Tiltas tarp dizaino ir kodo nėra pakankamai stiprus, todėl verslas pasidarė sunkus.

Tada mums kilo idėja sukurti kodais pagrįstą projektavimo sistemą. Mes įdėjome savo dizaino ženklą į „JavaScript“, kuris yra lengviausias inžinieriaus panaudojimo būdas, tačiau vis dar pakankamai paprastas, kad dizaineris galėtų jį valdyti.

Mes bendradarbiaujame kurdami savo rankų darbo komponentus, kurie atitiktų dizaino ir inžinerijos standartus. Tie komponentai bus naudojami visose platformose, kad būtų užtikrintas mūsų projekto nuoseklumas.

2. Eskizų įskiepiai.

Šie „Eskizo“ papildiniai veikia kaip tiltas tarp dizaino ir kodų. Dizaino atžvilgiu tai palengvina bendradarbiavimą, nes dizaineriams nereikia vėl ir vėl generuoti tų pačių komponentų. Tai taip pat padės dizaineriams sukurti vartotojo sąsają, pagrįstą standartizuotais komponentais.

Iš inžinerijos pusės šis papildinys pavers vartotojo sąsają kodais, kuriuos inžinierius gali lengvai įgyvendinti. Tai sutrumpins inžinieriaus darbo laiką, nes jam nereikia ieškoti esamų ankstesnio projekto komponentų.

3. Projektavimo įdėklas ir integruotas vaizdinis testavimas.

Po darbo su vartotojo sąsaja ir kodu, kitas žingsnis yra įsitikinti, kad abu jie yra standartizuoti. Čia dalyvavo dizainas ir integruotas vizualinis testavimas. Šiuo metu mes tiriame galimybę sukurti dizaino sąsają ir integruotą vaizdinį testavimą, kad jie galėtų veikti kaip saugos tinklas tiek mūsų vartotojo sąsajai, tiek kodams. Kalbant apie dizainą, dizainas bus skatinamas „UI Designer“ naudoti standartizuotus komponentus. Tuo tarpu iš inžinerinės pusės vizualinis tikrinimas sumažins regos anomalijų galimybę, kai gaminys bus paleistas. Tai palengvins tiek dizainerio, tiek inžinieriaus gyvenimą ateityje.

4. Projektavimo sistemos dokumentacija.

Kai bendradarbiaujate su skirtinga komanda, malonu turėti gaires, kuriomis galite remtis jūs abu. Projektavimo sistemos dokumentacija veikia kaip dizaino biblija, prieinama visoms suinteresuotosioms šalims, įskaitant produktų vadovus, inžinierius ir kolegas dizainerius. Svarbu įsitikinti, kad visi yra toje pačioje lentoje, kodėl priimamas sprendimas dėl dizaino. Tai taip pat padės išvengti bet kokių komandos nesutarimų dėl dizaino, nes kiekvienas dizainas apgalvotai pagamintas kruopščiai apsvarsčius.

Iliustracija Ralistu Hayu Pratiwi

Mes tikime, kad atlikdami visus šiuos kūdikio žingsnius galime geriau bendradarbiauti ir integruotis vieni į kitus. Bendradarbiavimas taip pat atvers galimybes kurti geresnius produktus.

Galų gale gaminio dizainas yra ne tik tai, kaip padaryti jį gražų ir įdomų. Taip pat reikia daug inžinerinių pastangų, kad dizainas veiktų nepriekaištingai. Tai rodo projektavimo ir inžinerijos bendradarbiavimo svarbą; nes mes negalime gyventi vienas be kito kurdami gerą produktą. Kaip sakė Steve'as Jobsas,

„Dizainas nėra tik tai, kaip jis atrodo ir jaučiasi. Dizainas yra tai, kaip jis veikia. “