Када се Дизајн сусреће са Инжењерингом у Травелоки

Ово није обична љубавна прича.

Напомена: Ово је само једна од интеракција између дизајна и инжењеринга. Говорим из једног малог спектра свих интеракција између дизајна и инжењеринга у Травелоки. И ово је моја прича.

Како време пролази, Травелока постоји већ 6 година. На овом путовању признајемо да имамо пуно визуелних грешака који су присутни већ дуже време, попут различитих нијанси наранџастих за дугмад или недоследне маргине између картица.

Дизајнерски тим иницирао је напор да стандардизује наш визуелни језик тако што је направио сопствени дизајн дизајн да спречи нове визуелне аномалије које одступају од нашег стандарда. Покушали смо, али некако се овај проблем никада није решио. Чак и након што имамо свој властити дизајн, још увек видимо оне визуелне недоследности на нашим производима.

Са друге стране, наши инжењери морају да раде ефикасније. Радије граде сличне компоненте испочетка, умјесто да траже да би ту исту компоненту могли поново користити. Јер потрага за тим компонентама је трење у њиховом тренутном процесу рада.

Сво то време, Дизајнерски тим и Инжињерски тим покушавали су да реше сопствени проблем, а да међусобно нису комуницирали. Постављало се питање о могућности да Дизајн и Инжењеринг раде заједно како би решили проблем са којим се обојица сусрећемо сваки дан. Ко је знао да дизајн и инжењеринг могу ићи руку под руку и повећати љубав у том процесу? ❤

Када су се први пут упознали?

Разговори су започели почетком 2018. године када је Инжењерски тим урадио неко истраживање о Реацт Нативе и Реацт Нативе Вебу (Реацт Нативе је оквир за изградњу мобилних апликација помоћу ЈаваСцрипт-а). Када је ово истраживање почело, Веб УИ Девелоперс из дизајнерског тима су се укључили.

Током процеса, инжењерски тим је имао идеју да користи Реацт Нативе као базу за развој више платформи. Ово укључује развој мобилног веба у коме се Веб УИ Девелопер може укључити у креирање компоненти на њему.

Када је ова иницијатива започела, били смо толико узбуђени да научимо Реацт Нативе и да извучемо најбоље из ње јер можемо да направимо значајнији утицај и створимо компоненте за сву доступну платформу из једног извора кода. И ту се прво упознајемо.

Како је љубав расла?

Срели смо се неколико пута после тога, али ништа нам није искривило у срцу. Али онда се искра појави кад имамо ту стажисту. Све је почело једноставно као приправнички пројекат.

Овај стажиста је инжењер Реацт Нативе и задужен је за изградњу било чега што може умањити сарадњу између дизајна и инжењеринга. Почео је да гради библиотеку компоненти, неке фантастичне додатке за скице за дизајнере и истраживао је друге могућности сарадње између дизајна и инжењеринга.

Поред тога, тим за дизајн је такође покренуо иницијативу да направи јединствени извор истине (ССОТ) заснован на коду за дизајнерске токене и компоненте. Та два покрета су нас инспирирала да сарађујемо на овој мисији. Овде извиру љубав и верујемо да заједно трчимо у светлију будућност.

Камо нас је водила љубав?

Након неколико пута дружења (читај: састанак), коначно се слажемо да свој однос пребацимо на нови ниво. Кроз пут није било лако, али веровали смо да је то право за нас. Разумевање једних других је кључни кључ добре везе, зар не? И то смо урадили када смо одлучили да сарађујемо.

Започели смо разумевањем како једни друге раде. И након ових ноћи пуних ноћних мора и путева пуних препрека, коначно се крећемо ка бољој сарадњи. Ево наших обавеза да постигнемо бољу сарадњу између дизајна и инжењеринга:

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

Сарадња између дизајна и инжењеринга била је прилично изазовна. Мост између дизајна и кода није довољно јак и због тога је посао постао тежак између нас.

Тада смо добили идеју да направимо систем дизајнирања на бази кода. Дизајнерски токен постављамо у ЈаваСцрипт, што је инжењер најлакши начин да користи, а опет довољно једноставан да дизајнер управља.

Сарађујемо на стварању сопствених ручно израђених компоненти које задовољавају дизајн и инжењерски стандард. Те компоненте ће се користити на свим платформама за успостављање доследности у нашем дизајну.

2. Скетцх плугинс.

Ови додаци за Скетцх делују попут моста између дизајна и кодова. Са дизајнерске стране ово олакшава сарадњу јер дизајнери не морају да производе исте компоненте изнова и изнова. Ово ће такође помоћи дизајнеру да изгради свој кориснички интерфејс заснован на стандардизованим компонентама.

На страни Инжењеринга, овај ће додатак превести корисничко сучеље у кодове које инжењер може лако имплементирати. То ће смањити радно време инжењера, јер они не требају тражити постојеће компоненте из претходног дизајна.

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

Након рада са корисничким интерфејсом и кодом, следећи корак је осигурати да су оба стандардизована. Овде су учествовали дизајнерски слој и интегрисано визуелно тестирање. Тренутно истражујемо могућност да развијемо дизајн линтера и интегрисано визуелно тестирање како би радили као сигурносна мрежа и за наш кориснички интерфејс и кодове. Са дизајнерске стране, дизајнерски слој ће подстаћи УИ Десигнер да користи стандардизоване компоненте. У међувремену, са инжењерске стране, визуелно тестирање ће смањити могућност визуелних аномалија након пуштања производа. То ће олакшати живот и дизајнера и инжењера у будућности.

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

Када сарађујете са другим тимом, лепо је имати смернице на које вас обоје можете упутити. Документација системског дизајна делује као дизајнерска библија која је доступна свим заинтересованим странама, укључујући менаџере производа, инжењере и дизајнере. Ово је важно како бисте били сигурни да су сви на истој табли због чега се доноси одлука о дизајну. Ово ће такође помоћи да се избегне било каква неслагања у дизајну између тима, јер је сваки дизајн замишљено направљен уз пажљиво разматрање.

Илустрација Ралисту Хаиу Пративи

Уз све ове кораке бебе, верујемо да можемо побољшати сарадњу и интеграцију међусобно. Сарадња ће такође отворити могућности за стварање бољих производа.

На крају, дизајнирање производа није само начин како да изгледа лепо и занимљиво. Такође је потребно много инжењерских напора да дизајн не буде беспрекоран. Ово илуструје значај сарадње између Дизајна и инжињеринга; као што не можемо једни без других да градимо добар производ. Као што је Стеве Јобс рекао,

„Дизајн није само оно што изгледа и изгледа. Дизајн је како функционише. "