Uccos Energy: Design System tekoälyavusteisen ohjelmistokehityksen tueksi

Haaste ja tavoitteet

Energiamarkkinoilla toimiva Uccos Energy on suomalainen yritys jonka tuote tarjoaa hallinta-, optimointi- ja Fingridin reservimarkkinoiden aggregointipalveluita omaa akkuvarastoa ylläpitäville kotitalouksille ja yrityksille.

Uccos on ollut tekoälyavusteisen ohjelmistokehityksen vahva puolestapuhuja jo pitkään, ja nyt oli tullut aika päivittää ja yhtenäistää hallintaohjelmiston verkkopalvelun ilmettä ja käyttöliittymää. Andersin lepakkopuhelin soi ja meiltä pyydettiin kättä pidempää Uccosen hallintakäyttöliittymän ilmeen hallintaan ja päivitykseen tavalla, joka tukisi heidän tekoälyavusteista ohjelmistokehitysprosessiaan. Haaste agenttisessa kehityksessä monesti on tekoälyn tapa keksiä kokoajan uusia tapoja tehdä samoja asioita.

Tavoitteena oli luoda Design System joka integroitaisiin suoraan heidän ohjelmistokehitysympäristöönsä sillä tavalla, että agenttisesti ohjelmoidut verkkopalvelun käyttöliittymät noudattaisivat yhtenäistä käytettävyyttä ja ilmettä mahdollisimman pienellä ihmisen puuttumisella asiaan.

Mitä teimme

Uccosin avuksi lähetettiin Andersin UX- ja UI-suunnittelija, jolla oli jo aikaisempaa kokemusta heidän kanssaan toimimisesta verkkosivujen suunnittelijana. Speksausvaiheessa tavoitteeksi kirkastui luoda Uccos Energylle oma Design System, joka saataisiin vietyä heidän Git-repositorioon tavalla jolla Uccosen ohjelmistokehittäjät saisivat mahdollisimman kattavaa design-kontekstia käyttämilleen tekoälyavusteisille ohjelmointityökaluille.

Design System kasattiin Claude Designissa, ja siellä määriteltiin Uccosen verkkopalvelun käytettävyyteen ja visuaaliseen ilmeeseen vaikuttavat keskeiset design-tokenit, kuten tekstityylit, värikoodit, suoja-alueet, sekä erilaiset käyttöliittymäkomponentit pienimmästä suurimpaan atomi-, molekyyli-, ja organismitasolla.

Olemassa olevien käyttöliittymien pohjalta oli yksinkertaista luoda listaus komponenteista ja tokeneista senhetkisen tilanteen tarpeen kattamiseen Claude Designissa. Jatkojalostus tehtiin käyttäen ohjenuorana Uccos Energylle aikaisemmassa projektissa suunniteltua verkkosivun ilmettä ja ketterästi käytyjä määrityskeskusteluja Uccosen edustajan kanssa.

Claude Designissa luotu säännöstö optimoitiin asiakkaan käyttämälle AI-avusteiselle ohjelmistokehitysympäristölle, joka on VSCode + Copilot. Tämän jälkeen Claudesta otettiin ulos paketti, joka sisälsi kattavat ohjeistot käyttöliittymien design-kontekstin määrityksistä sellaisessa muodossa, josta VSCoden Copilot saa mahdollisimman suuren hyödyn irti.

Uccosen ohjelmistokehityksen Git-versionhallintaan perustettiin oma repositorio puhtaasti design-kontekstin hallinnalle, jossa ohjeistoa voidaan ylläpitää ja päivittää keskitetysti. Design systemillä suoritettiin useita testejä sekä paikallisesti että livenä Git-repositorion sisällä VSCoden ja Copilotin kanssa jotta voitiin varmistua siitä, että tekoälytyökalu saa riittävän kattavaa kontekstia käyttöliittymien rakentamiseen.

Design Systemiä päivitettiin testien lopputulosten perusteella kehitystyön lomassa vastaamaan paremmin tuotteen tarpeita, jotta kaikki suunnitellut käytettävyysominaisuudet ja ilmemuutokset saatiin lopputuotteen liveversioon asti.

Lopputulos

Projektin lopputuloksena syntyi kattava Design System, joka on suoraan optimoitu tekoälyavusteisten ohjelmistokehitystyökalujen ehdoilla. Design System on elävä kokonaisuus Uccosen Git-repositoriossa, jota voidaan päivittää helposti ja yhtenäisesti uusien tarpeiden ilmestyessä.

Tekoälyavusteisesti luodun Design Systemin käyttämisessä tekoälyavusteisten ohjelmistokehitystyökalujen kanssa on useita etuja, muun muassa:

Yhtenäisyys

Kaikki agenttisesti ohjelmoidut käyttöliittymät noudattavat samaa ohjeistoa yhtenäisesti, ja tuotteen visuaalinen ilme pysyy timanttisena. Tekoälyagentin avulla tehty kehitystyö sisältää mahdollisimman vähän arvauksia ja uusien ratkaisujen luomista, kun käytettävien käyttöliittymäkomponenttien rakenne ja ilme on jo olemassa.

Keskitetty versionhallinta

Kaikki yrityksen ohjelmistokehityksen ulkoasu- ja käytettävyysasioita määrittelevät säännöt sijaitsevat yhdessä paikassa ja niitä voidaan päivittää ja kehittää eteenpäin, ja ne ovat kaikkien ohjelmiston kanssa työskentelevien kehittäjien saatavilla samanaikaisesti. Tämä sulauttaa designin osaksi muun ohjelmistokehityksen ekosysteemiä, kun UI-ohjeisto sijaitsee samassa järjestelmässä kuin tuotteen muutkin projektitiedostot, Git-repositoriossa sille varatussa osassa.

Saavutettavuus

Tekoälyllä työskennellessä esim. Claude Designissa saavutettavuusnäkökulman huomioonottaminen Design Systemiä koostaessa on yksinkertaista, kun Claudelle voidaan antaa Design Systemiä luodessa parametriksi esim. WCAG 2.2 AA-tason saavutettavuustason täyttäminen, ja tämän auditointi ja korjaaminen onnistuu tehokkaasti saman työkalun sisässä.

Nopeus

Manuaalisesti koostettavaan Design Systemiin kuluu työtunteja yksityiskohtien hiomiseen ja pikselinviilaukseen, mutta tekoälyavusteisesti ns. lapiointityö annetaan tekoälyagentin hoidettavaksi ja suunnittelijalle jää paremmin aikaa määritellä suuria linjoja ilmeen ja käytettävyyden suhteen, kun toistuvat ja työläät tehtävät hoidetaan tekoälyavusteisesti.

Ohjelmistokehityksen ja Design Systemin yhteinen elinkaari

Iteraatioiden testaus ja nopeat tarkistuskierrokset: Git-repositoriosta uusien ohjeiden hakeminen ja käytäntöön vieminen on nopea prosessi, jossa nähdään livenä Design Systemin kehittyminen.

Robotti auttaa robottia

Tekoälyavusteiset ohjelmistot osaavat tehdä itselleen ja toisilleen sopivia ohjeistuksia jolla saadaan kehitettyä jo rakennettua säännöstöä vielä eteenpäin kehitystyökalujen tarpeiden ehdoilla, ja rakennettua pohjaa tulevalle kehitystyölle.

Uccos Energy

Uccos Energy on uusi ketterä toimija energiamarkkinoilla, jonka tuote tarjoaa hallinta-, optimointi- ja Fingridin reservimarkkinoiden aggregointipalveluita omaa akkuvarastoa ylläpitäville kotitalouksille ja yrityksille.