När Design möter Engineering på Traveloka

Detta är inte en vanlig kärlekshistoria.

Obs! Detta är bara en av interaktionerna mellan design och teknik. Jag talar från ett litet spektrum av alla interaktioner mellan Design och Engineering i Traveloka. Och det här är min berättelse.

Som tiden går har Traveloka funnits i 6 år. På denna resa medger vi att vi har många visuella buggar som har funnits länge, som olika orange nyanser för knappar eller inkonsekvent marginal mellan korten.

Designteamet initierade ansträngningen att standardisera vårt visuella språk genom att bygga vårt eget designpaket för att förhindra nya visuella avvikelser som avviker från vår standard. Vi försökte, men på något sätt löste detta problem aldrig. Även efter att vi har ett eget designpaket ser vi fortfarande de visuella inkonsekvenserna på våra produkter.

Å andra sidan måste våra ingenjörer arbeta mer effektivt. De föredrar att bygga liknande komponenter från grunden istället för att leta upp för att hitta samma komponent för återanvändning. Eftersom att söka efter dessa komponenter är en friktion i deras nuvarande arbetsflöde.

Alla dessa tider försökte designteamet och ingenjörsteamet att lösa sina egna problem utan att kommunicera med varandra. Det ställde frågan om möjligheten att design och teknik arbetar tillsammans för att lösa problemet som vi båda stöter på varje dag. Vem visste att design och teknik kan gå hand i hand och växa kärlek i processen?

När träffades de först?

Samtalen började i början av 2018 när ingenjörsteamet gjorde en del undersökningar om React Native och React Native Web (React Native är ett ramverk för att bygga mobilappar med JavaScript). När denna forskning började engagerades Web UI-utvecklare från designteamet.

Under processen hade ingenjörsteamet idén att använda React Native som bas för plattformsutveckling. Detta inkluderar utvecklingen av Mobile Web där Web UI Developer kan involvera för att skapa komponenter på den.

När detta initiativ började var vi så glada att lära oss React Native och göra det bästa av det eftersom vi kan göra en mer betydande effekt och skapa komponenter för alla tillgängliga plattformar från en enda kodkälla. Och det är här vi först lär känna varandra.

Hur kärleken växte?

Vi träffade varandra några gånger efter det, men ingenting gick i hjärtat. Men då uppstår gnistan när vi har den här praktikanten. Det hela började lika enkelt som ett internt projekt.

Denna praktikant är en React Native engineer och har till uppgift att bygga allt som kan jämföra samarbetet mellan Design och Engineering. Han började bygga ett komponentbibliotek, några iögonfallande skissplugins för designers och undersöka andra samarbetsmöjligheter mellan design och teknik.

Utöver det hade designteamet också initiativet att skapa en kodbaserad enda källa till sanningen (SSOT) för designtokens och komponenter. Dessa två rörelser inspirerade oss att samarbeta om detta uppdrag. Det är här som kärlek gnistor, och vi tror att vi springer in i en ljusare framtid tillsammans.

Var kärleken ledde oss?

Efter att flera gånger har träffats (läs: möte), håller vi äntligen överens om att ta vår relation till nästa nivå. Det var inte lätt att gå på, men vi trodde att det här är rätt för oss. Att förstå varandra är den viktigaste nyckeln till ett bra förhållande, eller hur? Och det var vad vi gjorde när vi beslutade att samarbeta.

Vi började med att förstå hur varandra fungerar. Och efter dessa nätter fulla av mardrömmar och vägar fulla av hinder, är vi äntligen på väg mot ett bättre samarbete. Här är våra åtaganden att uppnå ett bättre samarbete mellan design och teknik:

1. Kodbaserat designsystem.

Samarbetet mellan design och teknik har varit ganska utmanande. Broen mellan design och kod är inte tillräckligt stark och det gjorde att arbetet blev hårt mellan oss.

Vi fick då idén att skapa ett kodbaserat designsystem. Vi lägger vårt designtoken i JavaScript, vilket är det enklaste sättet för ingenjör att använda, men ändå ändå enkelt för att hantera designer.

Vi samarbetar för att bygga våra egna handgjorda komponenter som uppfyller Design och Engineering standard. Dessa komponenter kommer att användas på alla plattformar för att fastställa konsistens i vår design.

2. Skissa plugins.

Dessa Sketch-plugins fungerar som bron mellan design och koder. På Design-sidan gör detta samarbetet enklare eftersom designers inte behöver generera samma komponenter om och om igen. Detta kommer också att hjälpa designer att bygga sitt användargränssnitt baserat på standardiserade komponenter.

På ingenjörssidan kommer detta plugin att översätta användargränssnittet till koder som enkelt kan implementeras av ingenjören. Detta minskar ingenjörens arbetstid eftersom de inte behöver leta efter befintliga komponenter från den tidigare designen.

3. Design linter och integrerad visuell testning.

Efter att ha arbetat med användargränssnittet och koden är nästa steg att se till att båda är standardiserade. Det är här designlinter och integrerad visuell testning deltog. Vi undersöker för närvarande möjligheten att utveckla designlinter och integrerad visuell testning för att fungera som ett säkerhetsnät för både vårt användargränssnitt och koder. Från designsidan kommer designlinter att uppmuntra UI Designer att använda standardiserade komponenter. Under tiden från teknisk sida kommer visuell testning att minska risken för visuella avvikelser när produkten släpps. Detta kommer att göra både designer och ingenjörs liv lättare i framtiden.

4. Utforma systemdokumentation.

När du samarbetar med olika team är det trevligt att ha en riktlinje som du båda kan hänvisa till. Dokumentationssystemets design fungerar som designbibeln som är tillgängliga för alla intressenter, inklusive produktchefer, ingenjörer och medarbetare. Detta är viktigt för att se till att alla sitter på samma styrelse varför ett designbeslut fattas. Detta kommer också att hjälpa till att undvika all design oenighet mellan teamet eftersom varje design är eftertänksamt med noggrant övervägande.

Illustration av Ralistu Hayu Pratiwi

Med alla dessa babysteg tror vi att vi kan göra bättre framtida samarbete och integration mellan varandra. Samarbetet öppnar också möjligheter att skapa bättre produkter.

I slutändan är designen av en produkt inte bara hur man ser den ganska intressant ut. Det finns också många tekniska ansträngningar för att få designen att fungera felfritt. Detta illustrerar vikten av samarbete mellan design och teknik; eftersom vi inte kan leva utan varandra för att bygga en bra produkt. Som Steve Jobs sa,

”Design är inte bara hur det ser ut och känns. Design är hur det fungerar. ”