Miksi rakentaa design system ohjaamaan kehitystyötä?

Palvelukehityksemme on pitkään keskittynyt lähinnä opintotietojärjestelmä Sisuun. Viime syksynä otimme isoja askelia myös muiden palveluidemme, Harrin ja UniHow’n, kehityksessä. Usean palvelun kehitys vaatii luonnollisesti enemmän käsiä, mutta myös parempia prosesseja, joissa kehittämisen aikana syntyvät opit leviävät parhaiten kaikkien tietoon. Haluamme taklata usean palvelun ylläpidosta syntyviä haasteita tehokkaasti, joten saanemme esitellä Funidatan design systemin, Fudiksen. ⚽️

Toimiva design system ohjaa kehitystyötä

Design system on ohjeisto työtavoista, joka sisältää myös dokumentaation palvelun käyttöliittymän osasista. Yleensä design systemin ymmärretään tarkoittavan vain komponenttikirjastoa, mutta se on paljon muutakin. Vaikka dokumentaatio on usein design systemin näkyvin osa, design system on toimiva vasta, kun komponenttien jatkuvalle ylläpidolle on suunniteltu prosessi. Toimiva design system ohjaa kehitystyötä, jolloin palveluiden käyttökokemus ja saavutettavuus ovat paremmin ylläpidettävissä.

Nimesimme Fudikselle oman kehitystiimin, joka koostuu suunnittelijoista ja fronttikehittäjistä, mutta myös muut kehitystiimimme osallistuvat kehitykseen. Näin kehityksen alkutaipaleella olemme keskittyneet projektin perustusten pystytykseen, mutta prosessikuvaus vaatii vielä paljon työtä. Prosessikuvaukseen täytyy muun muassa tarkentaa, millä perusteilla komponentti hyväksytään osaksi Fudista. Lisäksi on huomioitava, kuinka toiveet uusista komponenteista käsitellään, kuka kehittäjistä ottaa työn vastaan ja kuka pistää tehtävät työjonoon.

Miksi sisällytämme design systemiin yleiskäyttöisiä komponentteja?

Design system -kehityksessä käytetään usein Brad Frostin Atomic Design -vertausta atomeista, molekyyleistä ja organismeista. Pienimmät UI-elementit, esimerkiksi napit, ovat atomeja, jotka eivät pysty toimimaan yksin. Yhdessä tekstisyötekenttien kanssa napeista tulee lomake-elementtejä eli molekyylejä. Useat molekyylit muodostavat lomakkeen eli organismin, joka voi jo sisältää kompleksista logiikkaa siitä, miten osasten tulee käyttäytyä eri tilanteissa.

Olemme päättäneet, että Fudikseen sisällytettävät komponentit ovat lähtökohtaisesti niin sanottuja “tyhmiä komponentteja” eli ne eivät sisällä suurempaa logiikkaa vaan välittävät vain tietoa eteenpäin. Fudiksen komponentit ovat siis lähinnä atomeja ja molekyylejä. Näin Fudis jättää vaativampien organismien logiikan asiakassovelluksen vastuulle – esimerkiksi Sisu voi hyödyntää pohjallaan Fudis-komponentteja. Sisun ratkaisemat ongelmat ovat kuitenkin hyvin tapauskohtaisia, mikä edellyttää komponenttien pitkällistä kustomointia.

Jotta voimme hyväksyä komponentin Fudikseen, sen on oltava mahdollisimman yleiskäyttöinen. Toisin sanoen komponentin tulee ratkaista palveluissamme jokin tietty, toistettavissa oleva ongelma. Kun design system ratkaisee toistuvat ongelmat, se puolestaan mahdollistaa tuotekehityksemme keskittymisen uusien asioiden suunnitteluun. Pitkällä tähtäimellä design system on investointi, joka maksaa itsensä takaisin ja laskee kehityksen kustannuksia.

Design system pitää huolen palveluidemme yhtenäisyydestä

Design systemin kehitys eroaa muusta fronttikehityksestämme lähinnä siinä, että kiinnitämme komponentin joustavuuteen ja monikäyttöisyyteen erityistä huomiota. Tämä tarkoittaa, että määrittelemme komponentille hyvin tarkkaan rajatut muuttujavaihtoehdot, joista kehittäjä ei voi poiketa. Näin design system ylläpitää palveluidemme yhtenäistä linjaa.

Pohjatyöhömme kuuluu myös yhteisten pelisääntöjen luominen. Olemme sopineet muiden kehitystiimien kanssa muun muassa uusien Fudis-komponenttien nimeämiskäytännöistä ja tehneet rajanvetoja siitä, mikä on hyväksyttävää koodia. Toimivaa design systemiä ei kehitetä vakuumissa, vaan se muovautuu tarpeisiin yhteistyössä kaikkien kehitystiimien kanssa. Meille on tärkeää, että pääsemme testaamaan Fudista mahdollisimman pian käytännössä, jotta virheet ja dokumentaatiotarpeet tulevat heti esiin.

Uudenlainen kehitystyö edistyy koko porukan voimin

Design system vaatii toimiakseen dokumentaation, ja juuri nyt työstämme Fudiksen dokumentaation versiota 0.1. Oikeastaan kaikki Fudikseen liittyvä tekemisemme on versiota 0.1, sillä Fudis edustaa meillä aivan uudenlaista tekemistä. Siksi on tärkeää, että osaamme hyväksyä prosessin keskeneräisyyden. Välillä kehityksessä päädytään ojasta allikkoon, mutta silloin voimme todeta, että olemmepa taas yhtä kokemusta rikkaampia. Se on kuitenkin varmaa, että tuleva kevät tuo mukanaan paitsi uusia kollegoita myös tiiviimpää tiimien välistä yhteistyötä Fudis-kehityksen merkeissä.