Keď sa Design stretne s inžinierstvom v spoločnosti Traveloka

Toto nie je obyčajný milostný príbeh.

Poznámka: Toto je len jedna z interakcií medzi návrhom a inžinierstvom. Hovorím z jedného malého spektra všetkých interakcií medzi dizajnom a inžinierstvom v Traveloka. A toto je môj príbeh.

Ako plynie čas, Traveloka je tu už 6 rokov. Na tejto ceste pripúšťame, že máme veľa vizuálnych chýb, ktoré tu boli už dosť dlho, napríklad rôzne odtiene oranžovej farby pre tlačidlá alebo nekonzistentný okraj medzi kartami.

Dizajnový tím inicioval úsilie o štandardizáciu nášho vizuálneho jazyka vytvorením našej vlastnej súpravy na zabránenie akýmkoľvek novým vizuálnym anomáliám, ktoré sa odchyľujú od nášho štandardu. Snažili sme sa, ale tento problém sa nejako nevyriešil. Aj keď máme vlastnú konštrukčnú súpravu, stále vidíme tieto vizuálne nezrovnalosti v našich produktoch.

Na druhej strane naši inžinieri musia pracovať efektívnejšie. Radšej stavajú podobné komponenty od nuly, než hľadajú a nájdu tú istú súčasť na opätovné použitie. Pretože vyhľadávanie týchto komponentov predstavuje trenie v ich súčasnom pracovnom toku.

Po celú dobu sa tím dizajnu a tím inžinierov snažili vyriešiť svoj vlastný problém bez vzájomnej komunikácie. Vyvstala otázka o možnosti spolupráce dizajnu a inžinierstva pri riešení problému, s ktorým sa obaja stretávame každý deň. Kto vedel, že dizajn a inžinierstvo môžu v tomto procese kráčať ruka v ruke a rozvíjať lásku?

Kedy sa prvýkrát stretli?

Rozhovory sa začali začiatkom roku 2018, keď inžiniersky tím vykonal určitý výskum v oblasti React Native a React Native Web (React Native je rámec na vytváranie mobilných aplikácií pomocou JavaScriptu). Na začiatku tohto výskumu sa do projektu zapojili vývojári webového používateľského rozhrania z dizajnérskeho tímu.

Počas tohto procesu mal tím inžinierov myšlienku použiť produkt React Native ako základ pre vývoj na viacerých platformách. Zahŕňa to vývoj mobilného webu, v ktorom môže vývojár webového používateľského rozhrania zahrnúť vytváranie komponentov na ňom.

Keď sa táto iniciatíva začala, boli sme tak nadšení, že sme sa naučili React Native a z toho vyťažili maximum, pretože z jediného zdroja kódu môžeme urobiť výraznejší vplyv a vytvoriť komponenty pre všetku dostupnú platformu. A tu sa najprv vzájomne spoznávame.

Ako láska rástla?

Potom sme sa párkrát stretli, ale v našom srdci nič nevyžarovalo. Ale potom, keď máme tohto stážistu, sa objaví iskra. Všetko to začalo rovnako jednoduché ako interný projekt.

Táto stážista je inžinierom spoločnosti React Native a je poverená zostavením všetkého, čo môže zjemniť spoluprácu medzi dizajnom a inžinierstvom. Začal stavať knižnicu komponentov, niektoré nadštandardné doplnky pre návrhárov a skúmať ďalšie možnosti spolupráce medzi dizajnom a inžinierstvom.

Okrem toho mal tím Design aj iniciatívu vytvoriť kódový jediný zdroj pravdy (SSOT) pre tokeny a komponenty dizajnu. Tieto dve hnutia nás inšpirovali k spolupráci na tejto misii. Toto je miesto, kde láska iskrí a my veríme, že spolu bežíme do svetlejšej budúcnosti.

Kam nás láska priviedla?

Po niekoľkonásobnom datovaní (čítanie: stretnutie) sme sa konečne dohodli, že posunieme náš vzťah na ďalšiu úroveň. Cesta nebola ľahká, ale verili sme, že toto je pre nás to pravé. Porozumenie jeden druhému je nevyhnutným kľúčom k dobrému vzťahu, však? A to sme urobili, keď sme sa rozhodli spolupracovať.

Začali sme tým, že sme pochopili, ako navzájom fungujú. A po týchto nociach plných nočných morí a ciest plných prekážok konečne smerujeme k lepšej spolupráci. Tu sú naše záväzky dosiahnuť lepšiu spoluprácu medzi dizajnom a inžinierstvom:

1. Dizajnový systém založený na kóde.

Spolupráca medzi dizajnom a inžinierstvom bola pomerne náročná. Prepojenie medzi dizajnom a kódom nie je dosť silné a práca medzi nami bola náročná.

Potom sme dostali nápad vytvoriť kódový návrhový systém. Náš dizajnový token sme vložili do JavaScriptu, čo je najjednoduchší spôsob, ako ho môže inžinier využiť, ale stále dosť jednoduchý na to, aby ho dizajnér mohol spravovať.

Spolupracujeme na vývoji vlastných ručne vyrábaných komponentov, ktoré zodpovedajú štandardom Design and Engineering. Tieto komponenty sa použijú na všetkých platformách na zabezpečenie konzistentnosti nášho dizajnu.

2. Doplnky náčrtu.

Tieto doplnky Skica fungujú ako most medzi dizajnom a kódmi. Na strane dizajnu to uľahčuje spoluprácu, pretože návrhári nemusia generovať rovnaké komponenty znova a znova. Pomôže to tiež návrhárovi vybudovať svoje užívateľské rozhranie na základe štandardizovaných komponentov.

Na strane inžinierstva tento doplnok prevedie používateľské rozhranie na kódy, ktoré môže inžinier ľahko implementovať. Tým sa skracuje pracovný čas inžiniera, pretože nemusia hľadať existujúce komponenty z predchádzajúceho návrhu.

3. Návrh linteru a integrované vizuálne testovanie.

Po práci s používateľským rozhraním a kódom je ďalším krokom zabezpečenie, aby boli obidve štandardizované. Tu sa zúčastnil dizajnový linter a integrované vizuálne testovanie. V súčasnosti skúmame možnosť vyvinúť dizajnové rozhranie a integrované vizuálne testovanie, ktoré by fungovalo ako bezpečnostná sieť pre naše používateľské rozhranie a kódy. Z dizajnérskeho hľadiska bude dizajn linter povzbudiť UI Designer k používaniu štandardizovaných komponentov. Medzitým zo strany inžinierstva vizuálne testovanie zníži možnosť vizuálnych anomálií pri uvoľnení produktu. Tým sa v budúcnosti zjednoduší život dizajnéra a inžiniera.

4. Dokumentácia systému projektovania.

Pri spolupráci s iným tímom je dobré mať návod, na ktorý sa môžete obaja odvolávať. Dokumentácia konštrukčného systému funguje ako konštrukčná biblia, ktorá je prístupná všetkým zúčastneným stranám vrátane produktových manažérov, technikov a ostatných dizajnérov. To je dôležité, aby sa ubezpečil, že každý je na tej istej tabuli, prečo sa rozhoduje o dizajne. Pomôže to tiež zabrániť akémukoľvek nesúhlasu v dizajne medzi tímom, pretože každý dizajn sa premýšľa s opatrnosťou.

Ilustrácia Ralistu Hayu Pratiwi

Vďaka všetkým týmto krokom pre deti sme presvedčení, že môžeme v budúcnosti zlepšiť vzájomnú spoluprácu a integráciu. Spolupráca tiež otvorí možnosti na vytváranie lepších výrobkov.

Nakoniec, navrhovanie produktu nie je len o tom, ako vyzerať pekne a zaujímavo. Existuje tiež veľa technického úsilia, aby dizajn fungoval bezchybne. Toto ilustruje dôležitosť spolupráce medzi dizajnom a inžinierstvom; pretože pri budovaní dobrého produktu nemôžeme žiť bez seba. Ako povedal Steve Jobs,

„Dizajn nie je len to, ako vyzerá a vyzerá. Dizajn je, ako to funguje. “