Kun muotoilu kohtaa tekniikan Travelokassa

Tämä ei ole tavallinen rakkaustarina.

Huomaa: Tämä on vain yksi suunnittelun ja suunnittelun vuorovaikutuksesta. Puhun yhdestä pienestä spektristä kaikista suunnittelun ja tekniikan vuorovaikutuksista Travelokassa. Ja tämä on minun tarini.

Ajan myötä Traveloka on ollut toiminnassa 6 vuotta. Tällä matkalla tunnustamme, että meillä on paljon visuaalisia virheitä, jotka ovat olleet siellä jo jonkin aikaa, kuten erilaiset oranssinväriset painikkeet painikkeille tai epätasainen marginaali korttien välillä.

Suunnittelutiimi aloitti pyrkimyksensä standardisoida visuaalinen kielemme rakentamalla omaa suunnittelukokonaisuutta, joka estää uusia visuaalisia poikkeavuuksia, jotka poikkesivat standardistamme. Yritimme, mutta jotenkin tämä ongelma ei koskaan ratkennut. Vaikka meillä olisi oma suunnittelusarja, näemme silti nämä visuaaliset epäjohdonmukaisuudet tuotteissamme.

Toisaalta insinööreidemme on työskenneltävä tehokkaammin. He mieluummin rakentavat samanlaisia ​​komponentteja tyhjästä sen sijaan, että etsisivät samaa komponenttia uudelleenkäyttöön. Koska näiden komponenttien etsiminen on kitka niiden nykyisessä työnkulussa.

Kaikki nämä ajat suunnittelutiimi ja suunnittelutiimi yrittivät ratkaista oman ongelmansa kommunikoimatta toisilleen. Se herätti kysymyksen suunnittelun ja suunnittelun mahdollisuudesta työskennellä yhdessä ongelman ratkaisemiseksi, johon me molemmat kohtaamme joka päivä. Kuka tiesi, että suunnittelu ja tekniikka voivat kävellä käsi kädessä ja kasvattaa rakkautta prosessissa?

Milloin he tapasivat ensimmäisen kerran?

Keskustelu alkoi vuoden 2018 alussa, kun Engineering-tiimi teki tutkimusta React Native- ja React Native Web -verkkoista (React Native on kehys rakentaa mobiilisovelluksia JavaScriptin avulla). Kun tämä tutkimus aloitettiin, suunnittelutiimin Web-käyttöliittymien kehittäjät ottivat sen mukaan.

Prosessin aikana suunnittelutiimillä oli ajatus käyttää React Native -alustaa alustana rajat ylittävään kehitykseen. Tähän sisältyy mobiiliverkon kehittäminen, johon Web UI -kehittäjä voi osallistua komponenttien luomiseksi siihen.

Kun tämä aloite alkoi, olimme niin innostuneita oppimaan React Native -tapahtumaa ja hyödyntämään sitä parhaalla mahdollisella tavalla, koska voimme tehdä huomattavamman vaikutuksen ja luoda komponentteja kaikille käytettävissä oleville alustoille yhdestä koodilähteestä. Ja tässä olemme ensin tuntemassa toisiamme.

Kuinka rakkaus kasvoi?

Tapasimme toisiaan muutaman kerran sen jälkeen, mutta sydämestämme ei syntynyt mitään. Mutta sitten kipinä syntyy, kun meillä on tämä harjoittelija. Kaikki alkoi yhtä yksinkertaisesti kuin harjoittelijaprojekti.

Tämä harjoittelija on React Native -insinööri, ja hänelle on annettu tehtäväksi rakentaa mitä tahansa, mikä tasoittaa suunnittelun ja suunnittelun yhteistyötä. Hän alkoi rakentaa komponenttikirjastoa, joitain mielenkiintoisia luonnoslisäosia suunnittelijoille ja tutkia muita yhteistyömahdollisuuksia suunnittelun ja tekniikan välillä.

Sen lisäksi suunnittelutiimillä oli myös aloite tehdä koodipohjainen totuuden lähde (SSOT) suunnittelumerkkeihin ja komponentteihin. Nämä kaksi liikettä innostivat meitä tekemään yhteistyötä tässä tehtävässä. Täältä rakkaus kipinää, ja uskomme, että olemme yhdessä menossa kirkkaampaan tulevaisuuteen.

Mihin rakkaus johdatti meidät?

Useiden kertomusten jälkeen (lue: kokous), olemme lopulta sitoutuneet siirtämään suhteemme seuraavalle tasolle. Tiellä kulkeminen ei ollut helppoa, mutta uskoimme, että tämä on meille oikea. Toisten ymmärtäminen on tärkeä avain hyvään suhteeseen, eikö niin? Ja mitä me teimme, kun päätimme tehdä yhteistyötä.

Aloitimme ymmärtämällä, miten toiset toimivat. Ja näiden yön jälkeen täynnä painajaisia ​​ja esteitä täynnä teitä, olemme lopulta kohti parempaa yhteistyötä. Tässä on sitoumuksemme saavuttaa parempi yhteistyö suunnittelun ja suunnittelun välillä:

1. Koodipohjainen suunnittelujärjestelmä.

Suunnittelu- ja tekniikkayhteistyö on ollut varsin haastavaa. Silta suunnittelun ja koodin välillä ei ole tarpeeksi vahva, ja se teki työstä kovaa meidän välillämme.

Sitten saimme idean luoda koodipohjainen suunnittelujärjestelmä. Laitamme suunnittelutunnuksen JavaScriptiin, joka on suunnittelijan helpoin tapa käyttää, mutta silti riittävän yksinkertainen suunnittelijan hallita.

Teemme yhteistyötä rakentaaksemme omia käsintehtyjä komponentteja, jotka täyttävät suunnittelun ja suunnittelun standardit. Näitä komponentteja käytetään kaikilla alustoilla suunnittelun johdonmukaisuuden varmistamiseksi.

2. Luonnoslaajennukset.

Nämä Sketch-laajennukset toimivat kuin silta suunnittelun ja koodien välillä. Suunnittelupuolella tämä tekee yhteistyöstä helpompaa, koska suunnittelijoiden ei tarvitse luoda samoja komponentteja yhä uudelleen. Tämä auttaa suunnittelijoita myös rakentamaan käyttöliittymänsä standardisoitujen komponenttien pohjalta.

Tekniikan puolella tämä laajennus kääntää käyttöliittymän koodeiksi, jotka insinööri voi helposti toteuttaa. Tämä vähentää insinöörin työaikaa, koska hänen ei tarvitse etsiä olemassa olevia komponentteja aiemmasta suunnittelusta.

3. Suunnittele linter ja integroitu visuaalinen testaus.

Kun olet työskennellyt käyttöliittymän ja koodin kanssa, seuraava askel on varmistaa, että molemmat ovat standardisoituja. Tähän osallistuivat suunnittelulista ja integroitu visuaalinen testaus. Tutkimme parhaillaan mahdollisuutta kehittää suunnittelulista ja integroitu visuaalinen testaus toimimaan turvaverkkona sekä käyttöliittymällemme että koodeillemme. Suunnittelupuolelta muotoiluvihko kannustaa UI Designeria käyttämään standardisoituja komponentteja. Sillä välin visuaalinen testaus vähentää suunnittelupuolelta visuaalisten poikkeavuuksien mahdollisuutta, kun tuotetta vapautetaan. Tämä tekee suunnittelijan ja suunnittelijan elämästä helpompaa tulevaisuudessa.

4. Suunnittele järjestelmän dokumentaatio.

Kun tehdään yhteistyötä eri joukkueiden kanssa, on hienoa saada ohje, johon molemmat voivat viitata. Suunnittelujärjestelmän dokumentaatio toimii suunnittelun raamatuna, joka on kaikkien sidosryhmien, myös tuotepäälliköiden, suunnittelijoiden ja muiden suunnittelijoiden käytettävissä. Tämä on tärkeää varmistaa, että kaikki ovat samalla hallituksella, miksi suunnittelupäätös tehdään. Tämä auttaa myös välttämään tiimin välisiä suunnittelusta johtuvia erimielisyyksiä, koska jokainen malli on suunniteltu huolellisesti harkiten.

Kuva Ralistu Hayu Pratiwi

Kaikilla näillä vauvaaskeleilla uskomme, että voimme tehdä tulevaisuuden parempaa yhteistyötä ja integraatiota toistensa välillä. Yhteistyö avaa myös mahdollisuuksia luoda parempia tuotteita.

Loppujen lopuksi tuotteen suunnittelulla ei tarkoiteta vain sitä, kuinka se näyttää näyttävältä ja mielenkiintoiselta. Suunnittelu toimii myös virheetömästi, jotta suunnittelusta tulisi moitteeton. Tämä osoittaa suunnittelun ja suunnittelun yhteistyön merkityksen; koska emme voi elää ilman toisiaan rakentamalla hyvää tuotetta. Kuten Steve Jobs sanoi,

”Suunnittelu ei ole vain miltä se näyttää ja miltä se tuntuu. Suunnittelu on miten se toimii. ”