Когато Дизайн се среща с инженеринг в Traveloka

Това не е обикновена любовна история.

Забележка: Това е само едно от взаимодействията между дизайн и инженеринг. Говоря от един малък спектър на всички взаимодействия между Дизайн и Инженеринг в Травелока. И това е моята история.

С течение на времето Травелока съществува от 6 години. В това пътуване ние признаваме, че имаме много визуални грешки, които са там от доста време, като различни оранжеви нюанси за бутони или непостоянен запас между картите.

Дизайнерският екип инициира усилията за стандартизиране на нашия визуален език, като изгради свой собствен дизайнерски комплект, за да предотврати нови визуални аномалии, които се отклоняват от нашия стандарт. Опитахме, но по някакъв начин този проблем никога не се реши. Дори след като имаме собствен комплект за дизайн, все още виждаме онези визуални несъответствия на нашите продукти.

От друга страна, нашите инженери трябва да работят по-ефективно. Те предпочитат да изграждат подобни компоненти от нулата, вместо да търсят, за да намерят същия този компонент за повторна употреба. Тъй като търсенето на тези компоненти представлява триене в техния текущ работен процес.

През всички тези времена екипът по дизайн и инженерният екип се опитваха да решат собствения си проблем, без да комуникират един с друг. Това повдигна въпроса за възможността Design and Engineering да работят заедно, за да решат проблема, с който двамата се сблъскваме всеки ден. Кой знаеше, че проектирането и инженерството могат да вървят ръка за ръка и да развиват любов в процеса?

Кога се срещнаха за първи път?

Разговорите започнаха в началото на 2018 г., когато екипът на инженерите направи някои изследвания на React Native и React Native Web (React Native е рамка за изграждане на мобилни приложения с помощта на JavaScript). Когато това проучване започна, Web UI Developers от екипа на Design се включиха.

По време на процеса инженерният екип имаше идеята да използва React Native като база за разработване на крос-платформа. Това включва разработката на Mobile Web, в която Web UI Developer може да се включи за създаване на компоненти в него.

Когато тази инициатива започна, ние бяхме толкова развълнувани да научим React Native и да се възползваме максимално от нея, тъй като можем да направим по-значително въздействие и да създадем компоненти за цялата налична платформа от един източник на код. И това е мястото, където първо се опознаваме.

Как се разви любовта?

Срещнахме се няколко пъти след това, но нищо не искри в сърцето ни. Но тогава искрата се появи, когато имаме този стаж. Всичко започна толкова просто като стажантски проект.

Този стаж е инженер React Native и е назначен да изгради всичко, което може да изглади сътрудничеството между Design and Engineering. Той започна да създава компонентна библиотека, някои умопомрачителни приставки за скици за дизайнери и изследва други възможности за сътрудничество между Design and Engineering.

Освен това, екипът по дизайн също имаше инициативата да направи един базиран на код единен източник на истината (SSOT) за дизайнерски маркери и компоненти. Тези две движения ни вдъхновиха да си сътрудничим в тази мисия. Тук се разпалва любовта и ние вярваме, че заедно бягаме в по-светло бъдеще.

Докъде ни е довела любовта?

След няколко пъти запознанства (четете: среща), накрая се съгласяваме да изведем отношенията си на следващото ниво. Пътят не беше лесен, но вярвахме, че това е най-правилното за нас. Разбирането помежду си е същественият ключ към добрите отношения, нали? И това сме направили, когато решихме да си сътрудничим.

Започнахме с разбирането как работи един друг. И след тези нощи, пълни с кошмари и пътища, пълни с препятствия, най-накрая се насочваме към по-доброто сътрудничество. Ето нашите ангажименти за постигане на по-добро сътрудничество между дизайн и инженеринг:

1. Система за проектиране на базата на код.

Сътрудничеството между дизайн и инженеринг беше доста предизвикателно. Мостът между дизайн и код не е достатъчно силен и това накара работата да стане трудна между нас.

Тогава получихме идеята да създадем система за дизайн на базата на код. Сложихме дизайнерския си жетон в JavaScript, който е най-лесният начин за използване от инженера, но все пак достатъчно прост за управление на дизайнера.

Ние си сътрудничим за създаването на собствени ръчно изработени компоненти, които отговарят на стандарта на Design и Engineering. Тези компоненти ще бъдат използвани на всички платформи за установяване на последователност в нашия дизайн.

2. Скициращи плъгини.

Тези приставки за Sketch работят като моста между дизайна и кодовете. От страна на дизайна това улеснява сътрудничеството, тъй като дизайнерите не е необходимо да генерират едни и същи компоненти отново и отново. Това също ще помогне на дизайнера да изгради своя потребителски интерфейс въз основа на стандартизираните компоненти.

От страна на инженерството, този плъгин ще преведе потребителския интерфейс в кодове, които лесно могат да бъдат реализирани от инженера. Това ще намали работното време на инженера, тъй като не е необходимо да търсят съществуващи компоненти от предишния дизайн.

3. Дизайн на лайнера и интегрирано визуално тестване.

След работа с потребителския интерфейс и кода, следващата стъпка е да се уверите, че и двамата са стандартизирани. Тук участваха дизайнерската линия и интегрираното визуално тестване. Понастоящем изследваме възможността да разработим дизайн на линия и интегрирани визуални тестове, които да работят като предпазна мрежа както за нашия потребителски интерфейс, така и за кодове. От гледна точка на дизайна, дизайнът на линията ще насърчи UI Designer да използва стандартизирани компоненти. Междувременно от инженерната страна визуалните тестове ще намалят възможността за визуални аномалии при пускането на продукта. Това ще направи живота на дизайнера и инженера да стане по-лесен в бъдеще.

4. Документация на системата за проектиране.

Когато си сътрудничите с различен екип, е хубаво да имате указание, към което и двамата да се позовавате. Документацията на системата за дизайн работи като дизайнерска библия, достъпна за всички заинтересовани страни, включително продуктови мениджъри, инженери и колеги дизайнери. Това е важно, за да сте сигурни, че всички са на един и същи съвет, защо се взема дизайнерско решение. Това също ще помогне да се избегнат евентуални разногласия в дизайна между екипа, тъй като всеки дизайн се прави внимателно с внимателно обмисляне.

Илюстрация от Ралисту Хаю Пративи

С всички тези бебешки стъпки вярваме, че можем да постигнем по-добро бъдещо сътрудничество и интеграция помежду си. Сътрудничеството ще отвори и възможности за създаване на по-добри продукти.

В крайна сметка проектирането на продукт не е само как да го направите да изглежда красиво и интересно. Има и много инженерни усилия, за да направят дизайна безупречно. Това илюстрира значението на сътрудничеството между дизайн и инженеринг; тъй като не можем да живеем един без друг в изграждането на добър продукт. Както Стив Джобс каза,

„Дизайнът не е само как изглежда и се чувства. Дизайнът е как работи. "