Když se Design setká s Engineeringem na Traveloka

Toto není obyčejný milostný příběh.

Poznámka: Toto je pouze jedna z interakcí mezi návrhem a inženýrstvím. Mluvím z jednoho malého spektra všech interakcí mezi designem a inženýrstvím v Traveloce. A to je můj příběh.

Jak plyne čas, Traveloka je tu už 6 let. Na této cestě připouštíme, že máme spoustu vizuálních chyb, které tam byly už nějakou dobu, jako různé odstíny oranžové pro tlačítka nebo nekonzistentní okraje mezi kartami.

Tým konstruktérů zahájil úsilí o standardizaci našeho vizuálního jazyka vytvořením vlastní sady návrhů, aby se zabránilo jakýmkoli novým vizuálním anomáliím, které se odchylují od našeho standardu. Snažili jsme se, ale tento problém se nějak nevyřešil. I když máme vlastní konstrukční sadu, stále vidíme tyto vizuální nesrovnalosti na našich produktech.

Na druhé straně musí naši inženýři pracovat efektivněji. Raději staví podobné komponenty od nuly, než hledají, aby našli stejnou komponentu pro opětovné použití. Protože hledání těchto komponent je v jejich současném pracovním postupu tření.

Po celou tu dobu se tým Design a tým Engineering snažili vyřešit svůj vlastní problém, aniž by si navzájem komunikovali. Vyskočila otázka možnosti spolupráce designérů a inženýrů při řešení problému, s nímž se každý den setkáváme. Kdo věděl, že design a inženýrství mohou v tomto procesu chodit ruku v ruce a pěstovat lásku?

Kdy se poprvé setkali?

Rozhovory začaly na začátku roku 2018, kdy technický tým provedl určitý výzkum v oblasti React Native a React Native Web (React Native je rámec pro vytváření mobilních aplikací pomocí JavaScriptu). Když byl tento výzkum zahájen, zapojili se vývojáři webového uživatelského rozhraní z týmu Design.

Během tohoto procesu měl inženýrský tým nápad použít jako základ pro vývoj napříč platformami produkt React Native. Patří sem vývoj mobilního webu, do kterého může vývojář webového uživatelského rozhraní zapojit vytváření součástí.

Když tato iniciativa začala, byli jsme tak nadšeni, že jsme se mohli naučit React Native a z toho vytěžit maximum, abychom mohli udělat podstatnější dopad a vytvořit komponenty pro všechny dostupné platformy z jediného zdroje kódu. A tady se nejprve navzájem poznáváme.

Jak láska rostla?

Několikrát poté jsme se potkali, ale v našem srdci nic nešlo. Ale pak se objeví jiskra, když máme tohoto stážisty. Všechno to začalo stejně jednoduché jako interní projekt.

Tato stážista je konstruktérem React Native a je pověřen sestavením všeho, co může vyhladit spolupráci mezi designem a technikem. Začal stavět knihovnu komponentů, některé zásuvné moduly skici pro designéry a zkoumat další možnosti spolupráce mezi designem a inženýrstvím.

Kromě toho měl tým Design také iniciativu vytvořit kódový jediný zdroj pravdy (SSOT) pro návrhové tokeny a komponenty. Tato dvě hnutí nás inspirovala ke spolupráci na této misi. To je místo, kde láska jiskří, a věříme, že spolu běžíme do jasnější budoucnosti.

Kam nás láska přivedla?

Poté, co jsme několikrát chodili (přečetli: setkání), jsme konečně souhlasili, že náš vztah posuneme na další úroveň. Cesta na silnici nebyla snadná, ale věřili jsme, že je to pro nás to pravé. Porozumění sobě navzájem je nezbytným klíčem k dobrému vztahu, že? A to jsme udělali, když jsme se rozhodli spolupracovat.

Začali jsme tím, že jsme pochopili, jak spolu fungují. A po těchto nocích plných nočních můr a silnic plných překážek konečně směřujeme k lepší spolupráci. Zde jsou naše závazky k dosažení lepší spolupráce mezi společností Design a Engineering:

1. Návrhový systém založený na kódu.

Spolupráce mezi designem a strojírenstvím byla docela náročná. Můstek mezi designem a kódem není dostatečně silný a práce mezi námi byla těžká.

Pak jsme dostali nápad vytvořit kódový designový systém. Náš návrhový token jsme vložili do JavaScriptu, což je nejjednodušší způsob, jak jej technik využít, ale stále dostatečně jednoduchý na to, aby jej mohl návrhář spravovat.

Spolupracujeme na tvorbě vlastních ručně vyráběných komponent, které splňují standardy Design a Engineering. Tyto komponenty budou použity na všech platformách k zajištění konzistence našeho návrhu.

2. Skici pluginy.

Tyto zásuvné moduly Skica fungují jako most mezi designem a kódy. Na straně Design to usnadňuje spolupráci, protože návrháři nemusí znovu a znovu generovat stejné komponenty. To také pomůže návrháři budovat své uživatelské rozhraní na základě standardizovaných součástí.

Na straně Engineering tento plugin převede uživatelské rozhraní do kódů, které může inženýr snadno implementovat. Tím se zkrátí pracovní doba inženýra, protože nemusí hledat existující komponenty z předchozího návrhu.

3. Navrhněte linter a integrované vizuální testování.

Po práci s uživatelským rozhraním a kódem je dalším krokem zajistit, aby byly oba standardizovány. Zde se zúčastnil design linter a integrované vizuální testování. V současné době zkoumáme možnost vývoje designového linteru a integrovaného vizuálního testování tak, aby fungovalo jako bezpečnostní síť jak pro naše uživatelské rozhraní, tak pro kódy. Z hlediska designu povzbuzuje designový ukazatel UI Designer k použití standardizovaných komponent. Mezitím z technické strany vizuální testování sníží možnost vizuálních anomálií při uvolnění produktu. Tím se v budoucnu usnadní život konstruktéra i inženýra.

4. Dokumentace systému návrhu.

Když spolupracujete s jiným týmem, je dobré mít návod, na který se oba můžete odkazovat. Dokumentace návrhového systému funguje jako návrhová bible přístupná všem zúčastněným stranám, včetně produktových manažerů, techniků a ostatních návrhářů. To je důležité, aby se ujistil, že každý je na stejné desce, proč se rozhoduje o návrhu. To také pomůže vyhnout se jakýmkoli neshodám o designu mezi týmem, protože každý návrh je promyšleně pečlivě zvážen.

Ilustrace Ralistu Hayu Pratiwi

Věříme, že díky všem těmto dětským krokům můžeme v budoucnu zlepšit vzájemnou spolupráci a integraci. Spolupráce také otevře možnosti pro vytváření lepších produktů.

Nakonec, navrhování produktu není jen to, jak to vypadat hezky a zajímavě. Existuje také mnoho technických snah, aby design fungoval bezchybně. To ilustruje důležitost spolupráce mezi designem a inženýrem; protože nemůžeme žít bez sebe při budování dobrého produktu. Jak řekl Steve Jobs,

"Design není jen to, jak to vypadá a jak vypadá." Design je, jak to funguje. “