Kiedy projekt spotyka się z inżynierią w Traveloka

To nie jest zwykła historia miłosna.

Uwaga: To tylko jedna z interakcji między projektowaniem a inżynierią. Mówię z jednego małego spektrum wszystkich interakcji między projektowaniem i inżynierią w Traveloka. A to moja historia.

Z biegiem czasu Traveloka istnieje już od 6 lat. W tej podróży przyznajemy, że mamy wiele błędów wizualnych, które istnieją już od dłuższego czasu, takich jak różne odcienie pomarańczy dla przycisków lub niespójny margines między kartami.

Zespół projektowy zainicjował wysiłki na rzecz ujednolicenia naszego języka wizualnego, budując własny zestaw projektowy, aby zapobiec wszelkim nowym anomaliom wizualnym odbiegającym od naszego standardu. Próbowaliśmy, ale jakoś ten problem nigdy nie został rozwiązany. Nawet po tym, jak mamy własny zestaw do projektowania, nadal widzimy te wizualne niespójności na naszych produktach.

Z drugiej strony nasi inżynierowie muszą pracować wydajniej. Wolą budować podobne komponenty od zera, zamiast patrzeć w górę, aby znaleźć ten sam komponent do ponownego użycia. Ponieważ poszukiwanie tych komponentów stanowi tarcie w ich bieżącym przepływie pracy.

Przez cały czas zespół projektantów i zespół inżynierów starali się rozwiązać swój problem bez komunikowania się ze sobą. Pojawiło się pytanie o możliwość współpracy projektowania i inżynierii w celu rozwiązania problemu, z którym oboje spotykamy się każdego dnia. Kto wiedział, że projektowanie i inżynieria mogą iść w parze i kochać w tym procesie?

Kiedy się poznali?

Rozmowy rozpoczęły się na początku 2018 r., Kiedy zespół inżynierów przeprowadził badania dotyczące React Native i React Native Web (React Native to platforma do tworzenia aplikacji mobilnych przy użyciu JavaScript). Kiedy te badania się rozpoczęły, zaangażowali się programiści Web UI z zespołu projektowego.

Podczas tego procesu zespół inżynierów wpadł na pomysł, aby użyć React Native jako podstawy do rozwoju między platformami. Obejmuje to rozwój mobilnego internetu, w którym deweloper interfejsu WWW może zaangażować się w tworzenie na nim komponentów.

Kiedy ta inicjatywa się rozpoczęła, byliśmy bardzo podekscytowani, aby nauczyć się React Native i jak najlepiej z niego korzystać, ponieważ możemy wywrzeć większy wpływ i tworzyć komponenty dla wszystkich dostępnych platform z jednego źródła kodu. I tutaj najpierw się poznamy.

Jak wzrosła miłość?

Spotkaliśmy się kilka razy później, ale w naszym sercu nic nie zaiskrzyło. Ale wtedy iskra pojawia się, gdy mamy tego stażystę. Wszystko zaczęło się od projektu stażysty.

Ten stażysta jest inżynierem React Native i ma za zadanie zbudować wszystko, co może usprawnić współpracę między Projektowaniem a Inżynierią. Zaczął budować bibliotekę komponentów, zaskakujące wtyczki szkiców dla projektantów i badać inne możliwości współpracy między projektowaniem a inżynierią.

Oprócz tego zespół projektowy miał również inicjatywę stworzenia opartego na kodzie pojedynczego źródła prawdy (SSOT) dla tokenów projektowych i komponentów. Te dwa ruchy zainspirowały nas do współpracy przy tej misji. To tutaj iskrzy miłość i wierzymy, że razem biegniemy w lepszą przyszłość.

Dokąd zaprowadziła nas miłość?

Po kilku randkach (czytaj: spotkanie) w końcu zgadzamy się przenieść nasz związek na wyższy poziom. Droga nie była łatwa, ale wierzyliśmy, że jest to dla nas odpowiednie. Zrozumienie siebie jest kluczem do dobrych relacji, prawda? I to właśnie zrobiliśmy, kiedy zdecydowaliśmy się na współpracę.

Zaczęliśmy od zrozumienia, jak działają nawzajem. A po tych nocach pełnych koszmarów i drogach pełnych przeszkód w końcu zmierzamy do lepszej współpracy. Oto nasze zobowiązania do osiągnięcia lepszej współpracy między projektowaniem a inżynierią:

1. System projektowania oparty na kodzie.

Współpraca między projektowaniem a inżynierią była dość trudna. Mostek między projektem a kodem nie jest wystarczająco silny i sprawił, że praca stała się ciężka między nami.

Następnie wpadliśmy na pomysł stworzenia systemu projektowania opartego na kodzie. Umieszczamy nasz token projektu w JavaScript, który jest najłatwiejszym sposobem wykorzystania przez inżyniera, a jednocześnie jest wystarczająco prosty, aby projektant mógł nim zarządzać.

Współpracujemy przy tworzeniu własnych, ręcznie wykonanych komponentów, które spełniają standardy projektowania i inżynierii. Komponenty te zostaną wykorzystane na wszystkich platformach, aby zapewnić spójność naszego projektu.

2. Szkicuj wtyczki.

Wtyczki Sketch działają jak pomost między projektem a kodami. Od strony projektowania ułatwia to współpracę, ponieważ projektanci nie muszą generować tych samych komponentów w kółko. Pomoże to również projektantowi zbudować interfejs użytkownika w oparciu o znormalizowane komponenty.

Po stronie inżynierii ta wtyczka przekształci interfejs użytkownika w kody, które inżynier może łatwo wdrożyć. Skróci to czas pracy inżyniera, ponieważ nie muszą oni szukać istniejących komponentów z poprzedniego projektu.

3. Zaprojektuj wkładkę i zintegrowane testy wizualne.

Po pracy z interfejsem użytkownika i kodem następnym krokiem jest upewnienie się, że oba są znormalizowane. To tutaj wzięli udział projektanci i zintegrowane testy wizualne. Obecnie badamy możliwość opracowania projektu liniowego i zintegrowanych testów wizualnych, które będą działać jak sieć bezpieczeństwa zarówno dla naszego interfejsu użytkownika, jak i kodów. Od strony projektowania wkładka projektu zachęci Projektanta interfejsu użytkownika do korzystania ze standardowych składników. Tymczasem od strony inżynieryjnej testy wizualne zmniejszą możliwość wystąpienia anomalii wzrokowych po wydaniu produktu. Dzięki temu życie zarówno projektanta, jak i inżyniera stanie się łatwiejsze w przyszłości.

4. Projektować dokumentację systemu.

Przy współpracy z innym zespołem miło jest mieć wytyczne, do których obaj mogą się odwoływać. Dokumentacja systemu projektowania działa jak biblia projektowa dostępna dla wszystkich zainteresowanych stron, w tym kierowników produktu, inżyniera i innych projektantów. Jest to ważne, aby upewnić się, że wszyscy są na tej samej planszy, dlaczego podjęto decyzję projektową. Pomoże to również uniknąć nieporozumień projektowych między zespołem, ponieważ każdy projekt jest starannie przemyślany z należytym uwzględnieniem.

Ilustracja Ralistu Hayu Pratiwi

Dzięki tym wszystkim krokom dziecka wierzymy, że możemy lepiej współpracować i integrować się w przyszłości. Współpraca otworzy również możliwości tworzenia lepszych produktów.

Ostatecznie zaprojektowanie produktu to nie tylko sposób, aby wyglądał ładnie i interesująco. Istnieje również wiele wysiłków inżynieryjnych, aby projekt działał bezbłędnie. To ilustruje znaczenie współpracy między projektowaniem a inżynierią; ponieważ nie możemy żyć bez siebie, tworząc dobry produkt. Jak powiedział Steve Jobs:

„Design to nie tylko to, jak wygląda i jak się czuje. Design jest jak działa. ”