Eficode - Cases FI

Tältä Vaisalan uusi Design System näyttää

Kirjoittanut Eficode | 17.4.2019 7:45:42

“Development and Design Systemimme tekee meistä ketterämpiä siihen koodattujen komponenttien ja keskeisesti sisältyvän yhteistyön kautta. Tuotetiimeillemme se on tapa tuottaa pieniä käyttöliittymäatomeja kaikkien yhteisessä käytössä olevaan järjestelmään. Tämä säästää kaikkien aikaa, kun eri tiimit voivat hyödyntää muissakin projekteissa tuotettuja rakennusosia.” - Sauli Laitinen, Design Manager, Vaisala

Vaisalan Development and Design System on yhtenäistetty tapa työskennellä, ja se johtaa kasvavaan kokoelmaan “atomeja” – uudelleenkäytettäviä ja dokumentoituja käyttöliittymäkomponentteja. Komponentit ovat tarpeeksi yksinkertaisia ollakseen hyödyllisiä tiimeille, jotka työskentelevät hyvinkin erilaisten tuotteiden parissa. Järjestelmä hyödyttää kaikkia tiimejä, kun projektit tuottavat uusia, muuallakin organisaatioissa hyödynnettävissä olevia osia.

Design Systemin omistavat kaikki sen kehittämiseen osallistuvat tiimit: komponentteja kehittävä sovellus-, käyttökokemus- ja alustatiimi. Sisäisenä, avoimen lähdekoodin tuotteena järjestelmää luodaan yhdessä, ja vain kaksi projektikoordinaattoria on löyhästi ohjeistamassa tiimien välistä yhteistyötä.

Nyt kun järjestelmä on käytössä, hyötyy Vaisala päällekkäisen työn vähenemisestä. Tämä säästää aikaa ja mahdollistaa kehittäjille ja suunnittelijoille paremman keskittymisen siihen, että he voivat luoda sovelluskohtaisia ratkaisuja käyttäjille.

Vaisala oli valmis Design Systemiin

Vaisala on globaali johtaja säähän, ympäristöön ja teollisuuteen liittyvässä mittaamisessa. Yli 80 vuoden kokemuksella Vaisala tarjoaa havaintotietoa paremman maailman eteen noin 1850 kansainvälisen osaajan voimin.

Vaisala oli jo päässyt UX-työskentelyssä tasolle, jossa tuotetiimeissä oli mukana käyttöliittymäsuunnittelun asiantuntijoita ja yrityksessä yhtenäistetty visuaalinen tyyli. Tästä johtuen Vaisala halusi kuitenkin lisää. Pohdittavana oli, kuinka paljon yksittäisissä tiimeissä toteutettua suunnittelu- ja kehitystyötä voitaisiin hyödyntää myös muualla yrityksessä?

Joiltain osin uudelleen hyödynnettävät komponentit olivat jo käytössä, mutta näiden kehittämisprosessissa oli yhä parantamisen varaa. Alustatiimi kehittäisi tarvittavan komponentin saatuaan pyynnön suunnittelutiimistä, mutta tämän jälkeen komponentti joutuisi odottamaan kunnes jokin sovellustiimi on ottanut sen käyttöönsä.

Vaisala kaipasi parempaa ja ketterämpää ratkaisua.

Mikä on Design System?

Design System (tai kuten Vaisala päätyi kutsumaan omaansa, Development and Design System) oli tarvittava ratkaisu Vaisalan haasteeseen. Design Systemit ovat tapa työskennellä poikkihallinnollisesti läpi koko organisaation vähentäen huomattavasti päällekkäistä työtä. Se on elävä järjestelmä, joka tuottaa käyttöliittymäosia (tai “atomeita”) suunnittelijoille sekä React-komponentteja kehittäjille. Atomit lisätään systeemiin tiimien toteuttaessa todellisia käyttötapauksia.

Oikealla osaamisella Design Systemin voi automatisoida, jolloin aikaa säästyy entistä enemmän.

Kuinka Vaisalan Development and Design Systeemi syntyi?

Yhteistyön tuloksena

Vaisala halusi, että tiimit, jotka tulevaisuudessa osallistuvat järjestelmän kehittämiseen osallistuvat työhön jo sen rakennusvaiheessa. Alusta alkaen oli selvää, että järjestelmä tehtäisiin yhteistyössä.

Eficoden konsultti työskenteli tiiviisti Vaisalan alustatiimin jäsenen kanssa. He rakensivat yhdessä arkkitehtuurin järjestelmälle, joka vastaanottaa ja tallentaa osia. Eficoden aiempi kokemus täydensi Vaisalan jo olemassa olevaa osaamista.

Työpajoja ja hackathoneja

Työpajoissa pohdittiin, mikä olisi paras tapa luoda ketterä Design System. Työpajojen sarjaan osallistui suunnittelutiimi, alustatiimi ja Eficoden konsultti, ja näiden välissä projektia edistettiin MS Teamsissa ja Jirassa.

Yhteistyöhön rohkaistiin myös hackathoneissa, joihin osallistuivat ne tiimit, jotka muodostaisivat lopullisen järjestelmän ydinporukan.

Keskiössä kevyt rakenne

Lopputuloksena syntyi järjestelmä, jonka rakenne on erittäin kevyt sisältäen ainoastaan kaksi koordinaattoria. Koordinaattoreiksi valittiin, he ketkä osallistuvista tiimeistä tähän tehtävään parhaiten sopivat. Koordinaattorien tehtävänä on fasilitoida prosessia.

DevOps ja Design System

Vaisalalla oli jo olemassa jatkuvan toimittamisen putki sovelluskehittämiselle. Se koostui Jenkinsin, Bitbucketin ja Jiran integraatiosta. Tämän olemassa olevan infrastruktuurin päälle, Eficoden konsultti rakensi Design Systemille kuuluvan automaation.

Hän lisäsi seuraavat Vaisalan Design Systemin automatisoidut elementit olemassa olevaan integraatioon:

  • Komponenttien automaattinen testaus
  • Automaattiset päivitykset verkkosivuston dokumentaatioon
  • Uusimpien komponenttiversioiden automaattinen julkaisu

Nykyään Design System julkaisee automaattisesti uudet versiot ja julkaisut kehittäjien käyttöön.

Kehitä, Jaa, Saa: Hyödyt

Vaisalan Development and Design Systemin hyötyjen oli oltava todellisia kaikille siihen osallistuville tiimeille, jotta motivaatio projektiin osallistumisessa säilyisi. Nämä hyödyt vaihtelevat eri osapuolien kesken.

Tuotetiimeille

  • Yhtenäinen brändi ja käyttökokemus
  • Tuotteet, jotka toimivat samalla tavalla
  • Nopeampi ja laadukkaampi käyttöliittymäkehitys
  • Jatkuvasti kehittyvät käyttöliittymäkomponentit
  • Nopeampi projektien aloitus

Kehittäjille

  • Suunnittelut, jotka ovat helppoja käyttää (Node.js:n paketinhallinnan riippuvuuksina)
  • Komponenttien virhekorjaukset
  • Kirjoita yksi komponentti, saa kymmen kaupan päälle
  • Vähemmän CSS-tyylitiedostojen kirjoittamista
  • Komponentit, jotka toimivat hyvin yhteen

Suunnittelijoille

  • Vähemmän työtä pikselitarkkojen käyttöliittymämäärittelyjen kanssa
  • Yksi lähde tuoreimmille suunnitteluille
  • Nopea prototyyppien kehittäminen koodattavilla/klikattavilla prototyypeillä
  • Vahvempi Vaisalan yhtenäinen design

Organisaation näkökulmasta Design System lyhentää markkinoilletuontiaikaa, varmistaa johdonmukaisuutta ja auttaa tiimejä keskittymään asiakashaasteiden ratkaisemiseen sillä tuotteella, mitä kehitetään.

Design Systemit ovat sosiaalisia olentoja

Lähes puolet Design Systemiin liittyvästä työstä koostuu ihmisten yhteensaattamisesta, heidän innostamisestaan ja heidän yhdessä tekemisen nautinnon varmistamisesta. Tämä on taannut myös Vaisalan Design Systemille hyvän alun.

Kyseessä on järjestelmä, jonka omistaa ja jota ylläpitää poikkihallinnollinen tiimi aktiivisia kehittäjiä ja suunnittelijoita tehden siitä reseptin vahvemmalle ketteryydelle.

 

 

Kiitos Vaisalan Development ja Design Systemin kehittämisestä kuuluu seuraaville henkilöille:

Aine Aivi (Vaisala), Samuli Andelin (Eficode), Tomasz Dressler (Vaisala), Joona Enbuska (Eficode), Jarkka Kivikanta (Vaisala), Jarkko Polvi (Eficode), John Moscarillo (Vaisala), Juha Karttunen (Siili Solutions), Jukka-Pekka Luukkonen, Joonas Kallio (Kinetive), Marko Kankaanniemi (Goto 10 Software), Kari Heikkilä (Vaisala), Markus Koivisto (Vaisala), Heta Korvenranta (Vaisala), Heikki Kupiainen (Metamatic), Sauli Laitinen (Vaisala), Leena Pohjaniemi (Vaisala), Maiju Tompuri (Vaisala), Mikko Ala-Fossi (Vaisala), Miso Mikkilä (Iskos), Petteri Suontama (Eficode), Teemu Kujanpää (Vaisala), Teppo Rouvi (Vaisala), Toni Lehtimäki (Vaisala), Tuomas Lilja (Eficode), Tuomo Mäkelä (Vaisala), and Harald Jerger (Vaisala).