Valotalive: Design System SaaS-tuotteen perustaksi
Asiakas
Valotalive on kansainvälisesti toimiva SaaS-yritys, jonka infonäyttöratkaisut sujuvoittavat työpaikkojen viestintää ja tiedonkulkua yli 50 maassa.
Rooli
Rakensin Design Systemin token-arkkitehtuurista komponenttikirjastoon, tavoitteena skaalautuva järjestelmä joka on suunniteltu palvelemaan sekä ihmisiä että AI-työkaluja.
Miksi Design System tarvittiin
Valotaliven dashboard oli kehittynyt ajan myötä orgaanisesti ilman yhtenäistä Design Systemiä. Uusia näkymiä rakennettiin tapauskohtaisesti, eikä suunnittelua ohjannut selkeä rakenne.
Tämä johti epäjohdonmukaiseen käyttöliittymään, jossa rakenne ja komponentit vaihtelivat näkymästä toiseen. Visuaalinen hierarkia ei ohjannut käyttäjää eteenpäin, mikä lisäsi kognitiivista kuormaa.
Perustuksista komponentteihin
Rakentaminen alkoi perustuksista: ennen komponentteja määriteltiin yhtenäinen token-arkkitehtuuri joka toimii koko järjestelmän selkärankana. Värit ja typografia johdettiin Valotaliven nykyisestä ilmeestä, ja niiden rinnalle rakennettiin yhtenäinen välistysjärjestelmä.
Tarkoitus ei ollut tehdä kaikkea uudelleen, vaan systematisoida se, mikä toimi — ja korjata se, mikä ei toiminut. Kun pohja oli kunnossa, sen päälle rakennettiin komponenttikirjasto joka dokumentoitiin kehittäjille.
Enemmän ajattelua, vähemmän elementtejä
Lähtökohtana oli selkeä rajaus: ei valmista UI-kittiä tai Design System -pohjaa. Valotaliven oman järjestelmän rakentaminen alusta asti oli tehokkaampaa kuin valmiiden ratkaisujen sovittaminen, ja harkittu lopputulos sisältää vain sen, mitä Valotalive oikeasti tarvitsee.
Tämä tarkoituksenmukaisuus ohjasi jokaista päätöstä välistyksestä komponentteihin ja väreistä typografiaan. Jokaiselle elementille määritettiin selkeä rooli ja rajat.
Esimerkki: väri ei ole vain estetiikkaa
Väri on tehokas keino katseen ohjaamiseen, mutta harkitsemattomasti käytettynä voi lisätä hälyä. Valotaliven nappien taustat olivat liukuvärejä, mikä teki niistä visuaalisesti näyttäviä, mutta ohjasivat käyttäjän katsetta väärään paikkaan.
Ratkaisu oli selkeä: liukuvärit rajattiin pois dashboard-ympäristöstä kokonaan. Sama logiikka ohjasi muitakin värivalintoja, esimerkiksi info-väriksi valittiin sinisen sijaan harmaa, koska sininen olisi luonut turhaa visuaalista hälyä brändivärien rinnalle.
Dokumentaatio, jota AI ymmärtää
Projekti hyödynsi tekoälyä kahdella tavalla. Ensin rakennettiin AI-luettava dokumentaatio jossa rakenne, token-nimet ja komponenttimäärittelyt kirjoitettiin niin, että Claude Code osaa lukea ne ja toimia niiden mukaan ilman jatkuvaa ohjeistamista.
Toiseksi Claude Code pystyi tekemään muutoksia suoraan Figma-tiedostoon. Komponentteja luotiin, elementtejä nimettiin uudelleen ja arkkitehtuuria auditoitiin komentoriviltä käsin. Tekoäly toimi toteuttajana – suunnittelija päätöksentekijänä.
Valotalive Design Systemin dokumentaatio on tarkoitettu palvelemaan pitkälle tulevaisuuteen. Järjestelmän kasvaessa ja kehittäjätiimin vaihtuessa rakenne pysyy ymmärrettävänä sekä ihmisille että AI-työkaluille.
Tällaisia projekteja toteutan mielelläni — kerro omastasi, niin jutellaan lisää.