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 ohjaa toimintaa
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ää
Tekoälyä hyödynnettiin järjestelmän rakentamisessa kahdella tavalla. Dokumentaatio kirjoitettiin AI-luettavaan muotoon, jotta rakenne, token-nimet ja komponenttimäärittelyt ovat suoraan hyödynnettävissä ilman jatkuvaa ohjeistamista. Samalla Claude Codea käytettiin Figma-tiedoston muokkaamiseen, kuten komponenttien luontiin, nimeämiseen ja arkkitehtuurin auditointiin.
Tekoäly toimi toteuttajana, kun taas suunnittelija vastasi päätöksenteosta. Dokumentaatio suunniteltiin kestämään tuotteen kasvua ja tiimin muutoksia, jotta järjestelmä pysyy ymmärrettävänä sekä ihmisille että AI-työkaluille myös jatkossa.
Lopuksi
Design Systemin rakentaminen ei ollut ainoastaan visuaalisten elementtien määrittelyä, vaan tapa tuoda rakennetta päätöksentekoon.
Keskeisin muutos oli siirtyminen irrallisista ratkaisuista kohti järjestelmää, joka ohjaa tulevaisuuden suunnittelua ja kehitystä. Yhtenäinen järjestelmä paransi käyttöliittymän ennustettavuutta ja vähensi kognitiivista kuormaa.
Hyvä käyttöliittymä ei synny yksittäisistä ratkaisuista, vaan johdonmukaisesta järjestelmästä niiden taustalla.
Tällaisia projekteja toteutan mielelläni — kerro omastasi, niin jutellaan lisää.