Amikor a Design találkozik a Traveloka mérnökével

Ez nem egy egyszerű szerelmi történet.

Megjegyzés: Ez csak a tervezés és a tervezés közötti interakciók egyike. A tervezés és a mérnöki munka interakcióinak egy kis spektrumáról beszélek a Traveloka-ban. És ez a történetem.

Az idő múlásával a Traveloka 6 éve működik. Ezen az utazáson beismerjük, hogy nagyon sok vizuális hiba van, amelyek már jó ideje ott vannak, mint például a narancssárga színek különböző gombjai vagy a kártyák közötti eltérés.

A tervező csapat kezdeményezte a vizuális nyelv standardizálását azáltal, hogy saját tervezőkészletet készített, amely megakadályozza minden új vizuális rendellenességet, amely eltér a szabványtól. Megpróbáltuk, de valahogy ez a probléma soha nem oldódott meg. Még miután megvan a saját tervezőkészletünk, még mindig látjuk ezeket a vizuális következetlenségeket termékeinken.

Másrészt mérnökeinknek hatékonyabban kell dolgozniuk. Inkább hasonló alkatrészeket építenek a semmiből, ahelyett, hogy felkeresnék, hogy ugyanazt az alkatrészt újból felhasználják. Mivel ezen összetevők keresése súrlódás a jelenlegi munkafolyamatban.

Mindezen idők során a tervező és a mérnöki csapat megpróbálták megoldani a saját problémájukat anélkül, hogy egymással kommunikáltak volna. Felmerült a kérdés, hogy a tervezés és a mérnöki munka együtt működjön-e a probléma megoldásában, amelyben mindkettőnkkel minden nap találkozunk. Ki tudta, hogy a tervezés és a mérnöki munka kéz a kézben járhat, és szeretetét szerezheti a folyamatban?

Mikor találkoztak először?

A beszélgetések 2018 elején kezdődtek, amikor a Mérnöki csapat kutatást végzett a React Natív és a React Natív webes témákról (a React Natív keretrendszer a Java alkalmazás használatával mobilalkalmazások készítéséhez). A kutatás megkezdésekor a Design csapat webes felhasználói felületeinek fejlesztői bekapcsolódtak.

A folyamat során a mérnöki csapat arra törekedett, hogy a React Native-t használja a platformok közötti fejlesztés alapjául. Ez magában foglalja a mobil web fejlesztését, amelybe a Web UI fejlesztő bevonhatja az összetevők létrehozását.

Amikor ez a kezdeményezés elindult, annyira izgatottak voltunk, hogy megtanultuk a React Native-t, és mindent kihozhatunk belőle, mivel jelentősebb hatást gyakorolhatunk, és komponenseket hozhatunk létre az összes elérhető platformon egyetlen kódforrásból. És itt kezdtük meg először megismerni egymást.

Hogyan nőtt a szerelem?

Azután néhányszor találkoztunk egymással, de a szívünkben semmi sem robbant fel. De akkor a szikra jelenik meg, amikor megkapjuk ezt a gyakornokot. Mindez olyan egyszerű, mint egy gyakornoki projekt.

Ez a gyakornok egy React bennszülött mérnök, akitől bármilyen feladatot elvégeztek, amely simítja a tervezés és a mérnöki munka közötti együttműködést. Komponens könyvtárat, néhány észrevételező vázlat plugint épített a tervezők számára, és más együttműködési lehetőségeket kutatott a Design és a Engineering között.

Emellett a Design csapat kezdeményezte egy kód-alapú egyetlen igazságforrás (SSOT) elkészítését a tervezési jogkivonatok és alkatrészek számára. Ez a két mozgalom inspirált minket arra, hogy együttműködjünk ebben a küldetésben. Itt szikrázik a szerelem, és hisszük, hogy együtt fényesebb jövőbe lépünk.

Ahová a szerelem vezet minket?

Miután többször randevúztunk (olvasás: találkozó), végre megállapodunk abban, hogy kapcsolatunkat a következő szintre állítjuk. Nem volt könnyű az úton járni, de hittünk abban, hogy ez a megfelelő nekünk. Az egymás megértése a jó kapcsolat alapvető kulcsa, igaz? És ezt tettük, amikor úgy döntöttünk, hogy együttműködünk.

Azzal kezdtük, hogy megértettük, hogyan működnek egymás. És ezen rémálmokkal és akadályokkal teli utakkal együtt végül a jobb együttműködés felé haladunk. Itt vannak a kötelezettségvállalásaink a tervezés és a tervezés közötti jobb együttműködés elérése érdekében:

1. Kód alapú tervező rendszer.

A tervezés és a műszaki együttműködés meglehetősen kihívást jelentett. A híd a tervezés és a kód között nem elég erős, és megnehezítette a munkát köztünk.

Ezután ötletünk volt egy kód alapú tervező rendszer létrehozására. A tervezési tokent a JavaScript-be tesszük, amely a mérnökök számára a legegyszerűbb módszer, de mégis elég egyszerű a tervező számára.

Együttműködünk annak érdekében, hogy saját kézműves alkatrészeket készítsünk, amelyek megfelelnek a Design és a Engineering szabványának. Ezeket az alkotóelemeket minden platformon használják a tervezés konzisztenciájának biztosítására.

2. Vázlatos pluginek.

Ez a Sketch plugins úgy működik, mint a híd a tervezés és a kódok között. A tervezés oldalán ez megkönnyíti az együttműködést, mivel a tervezőknek nem kell újra és újra létrehozni ugyanazokat az alkatrészeket. Ez elősegíti a tervezők számára a felhasználói felület szabványosított összetevőkön alapuló felépítését is.

A Mérnöki oldalon ez a plugin a felhasználói felületet olyan kódokká fogja lefordítani, amelyeket a mérnök könnyen megvalósíthat. Ez csökkenti a mérnöki munkaidőt, mert nekik nem kell megvizsgálniuk az előző kialakításból származó meglévő alkatrészeket.

3. Tervezzen bélést és integrált vizuális tesztelést.

A felhasználói felülettel és a kóddal végzett munka után a következő lépés annak ellenőrzése, hogy mindkettő szabványosítva van-e. Itt vettek részt a dizájnban és az integrált vizuális tesztelésben. Jelenleg kutatjuk annak a lehetőségét, hogy kialakítsuk a tervezési linter és az integrált vizuális tesztelést, hogy biztonsági hálóként működhessenek mind a felhasználói felületünkben, mind a kódokat illetően. A tervezési oldalról a formatervezés ösztönzi az UI Designer-t a szabványosított alkatrészek használatára. Eközben a műszaki oldalról a vizuális tesztelés csökkenti a vizuális rendellenességek lehetőségét a termék kiadásakor. Ez megkönnyíti a tervezők és a mérnökök életét a jövőben.

4. Tervezze meg a rendszer dokumentációját.

Különböző csapatokkal való együttműködés esetén jó, ha van egy iránymutatás, amelyre mindkettő utalhat. A tervezőrendszer dokumentációja a tervezési bibliaként működik, amelyhez minden érdekelt fél hozzáférhet, ideértve a termékmenedzsereket, a mérnököket és a tervezőket. Fontos annak biztosítása, hogy mindenki ugyanazon a testülettel foglalkozzon, miért hozza meg a tervezési döntést. Ez elősegíti a csapatok közötti tervezési viták elkerülését is, mivel minden formatervezés körültekintően megfontolva készül.

Illusztráció: Ralistu Hayu Pratiwi

Mindezen csecsemő lépésekkel úgy gondoljuk, hogy jobb jövőbeli együttműködést és integrációt tudunk megvalósítani egymás között. Az együttműködés lehetőséget kínál jobb termékek létrehozására is.

Végül a termék megtervezése nemcsak az, hogy szép és érdekesnek tűnjön. Nagyon sok mérnöki erőfeszítés történik annak érdekében, hogy a tervezés hibátlanul működjön. Ez szemlélteti a tervezés és a műszaki együttműködés fontosságát; mivel nem élhetünk egymás nélkül egy jó termék gyártásában. Ahogy Steve Jobs mondta,

„A dizájn nem csak az, aminek látszik és milyen. A design hogyan működik. ”