Коли дизайнер зустрічає інженерію на Traveloka

Це не звичайна історія кохання.

Примітка. Це лише одна з взаємодій між дизайном та інженерією. Я кажу з одного невеликого спектру всіх взаємодій між дизайном та інженерією в Травелоці. І це моя історія.

З плином часу Травелока існує вже 6 років. У цій мандрівці ми визнаємо, що у нас є багато візуальних помилок, які існують досить довгий час, як різні відтінки помаранчевого для кнопок або непослідовність поля між картами.

Команда дизайнерів ініціювала зусилля щодо стандартизації нашої візуальної мови, створивши власний дизайн-комплект, щоб запобігти появі нових візуальних аномалій, які відхилялися від нашого стандарту. Ми намагалися, але якось цю проблему так і не вирішили. Навіть після того, як у нас є власний комплект дизайну, ми все ще бачимо ті візуальні невідповідності наших продуктів.

З іншого боку, нашим інженерам потрібно працювати ефективніше. Вони вважають за краще будувати подібні компоненти з нуля, а не шукати, щоб знайти той самий компонент для повторного використання. Оскільки пошук цих компонентів - це тертя в їх поточному робочому процесі.

Усі ці часи команда дизайнерів та інженерна команда намагалися вирішити власну проблему, не спілкуючись один з одним. Це постало питання про можливість проектування та інженерії спільно працювати над вирішенням проблеми, з якою ми обидва щодня стикаємося. Хто знав, що дизайн та інженерія можуть ходити рука об руку та вирощувати любов у цьому процесі?

Коли вони вперше зустрілися?

Переговори розпочалися на початку 2018 року, коли команда інженерів провела кілька досліджень щодо React Native та React Native Web (React Native - це основа для створення мобільних додатків за допомогою JavaScript). Коли це дослідження розпочалося, розробники веб-інтерфейсу від дизайнерської команди взяли участь.

Під час процесу у інженерної команди виникла ідея використовувати React Native як базу для розробки платформ. Сюди входить розробка мобільної Web, в якій розробник веб-інтерфейсу може залучати до створення компонентів на ній.

Коли ця ініціатива почалася, ми були так раді дізнатися React Native та зробити найкраще з цього, оскільки ми зможемо зробити більш суттєвий вплив та створити компоненти для всієї доступної платформи з одного джерела коду. І саме тут ми вперше знайомимось.

Як росла любов?

Ми зустрічалися один з одним кілька разів після цього, але нічого не спалахнуло в нашому серці. Але потім, іскра з’являється, коли у нас є цей стажер. Все почалося так само просто, як стажерський проект.

Цей стажист є інженером React Native і призначений будувати все, що може згладити співпрацю між дизайном та інженерією. Він почав створювати бібліотеку компонентів, кілька приголомшливих ескізів плагінів для дизайнерів, а також досліджував інші можливості співпраці між дизайном та інженерією.

Крім цього, команда дизайнерів також виступила з ініціативою створити єдине джерело істини на основі коду для дизайнерських жетонів та компонентів. Ці два рухи надихнули нас на співпрацю в цій місії. Саме тут іскриться любов, і ми віримо, що ми разом спіткаємо світліше.

Куди нас вела любов?

Після кількох побачень (читайте: зустрічі) ми нарешті погоджуємося перевести наші стосунки на наступний рівень. Дорогу піти було непросто, але ми вважали, що для нас це правильно. Розуміння один одного є найважливішим ключем до хороших відносин, правда? І це ми зробили, коли вирішили співпрацювати.

Ми почали з розуміння того, як працюють один одного. І після цих ночей, повних кошмарів і доріг, повних перешкод, ми нарешті прямуємо до кращої співпраці. Ось наші зобов'язання досягти кращої співпраці між дизайном та інженерією:

1. Система проектування на основі коду.

Співпраця між дизайном та інженерією була досить складною. Міст між дизайном та кодом недостатньо міцний, і це зробило роботу між нами важкою.

Потім у нас виникла ідея створити систему проектування на основі коду. Ми розмістили свою дизайнерську марку в JavaScript, що є найпростішим способом використання інженера, але все ще досить простим для управління дизайнером.

Ми співпрацюємо, щоб створити власні компоненти, виготовлені вручну, що відповідають стандарту дизайну та інженерії. Ці компоненти будуть використовуватися на всіх платформах для встановлення узгодженості дизайну.

2. Ескіз плагінів.

Цей плагін Sketch працює як міст між дизайном та кодами. Що стосується дизайну, це полегшує співпрацю, оскільки дизайнерам не потрібно генерувати одні й ті ж компоненти знову і знову. Це також допоможе дизайнеру створити свій інтерфейс користувача на основі стандартизованих компонентів.

З боку Інженерії цей плагін переведе користувальницький інтерфейс у коди, які інженер може легко реалізувати. Це скоротить робочий час інженера, оскільки їм не потрібно шукати наявні компоненти попереднього дизайну.

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

Після роботи з користувальницьким інтерфейсом та кодом наступним кроком є ​​переконання, що вони обоє стандартизовані. Тут взяли участь дизайнерські лінійки та інтегровані візуальні тестування. В даний час ми досліджуємо можливість розробити лінійку дизайну та інтегрованого візуального тестування для роботи, як безпечної мережі для нашого користувальницького інтерфейсу та кодів. З боку дизайну лінійка дизайну заохотить UI Designer використовувати стандартизовані компоненти. Тим часом з інженерної сторони візуальне тестування зменшить можливість візуальних аномалій при випуску продукту. Це зробить життя і дизайнера, і інженера полегшити в майбутньому.

4. Проектна документація на систему.

Співпрацюючи з іншою командою, приємно мати керівництво, на яке ви обидва можете звертатися. Документація щодо системи дизайну працює як біблія дизайну, доступна всім зацікавленим сторонам, включаючи менеджерів продуктів, інженерів та колег-дизайнерів. Це важливо, щоб переконатися, що всі є на одній дошці, чому приймається проектне рішення. Це також допоможе уникнути будь-яких розбіжностей у дизайні між командою, оскільки кожен дизайн продуманий з ретельною увагою.

Ілюстрація Ралісту Хаю Пратіві

З усіма цими кроками дитини ми вважаємо, що ми можемо покращити майбутню співпрацю та інтеграцію між собою. Співпраця також відкриє можливості для створення кращих продуктів.

Зрештою, дизайн продукту - це не просто те, як зробити його красивим та цікавим. Існує також багато інженерних зусиль, щоб зробити проект бездоганним. Це ілюструє важливість співпраці між дизайном та інженерією; тому що ми не можемо жити один без одного, будуючи хороший продукт. Як сказав Стів Джобс,

«Дизайн - це не просто те, як він виглядає і як виглядає. Дизайн - це, як він працює ».