TerraBuild Dashboard

Kuvaus projektista

Syksyllä 2025 toteutetulla UI/UX-koodausstudio -kurssilla (1.9.2025–17.12.2025) osallistuin laajaan yritysasiakasprojektiin, jonka toimeksiantajana toimi IT-konsultointiyritys Forge Digital Oy. Projektin tavoitteena oli konseptoida ja mallintaa Dashboard-ohjausjärjestelmä kuvitteelliselle TerraBuild-asiakasyritykselle, joka valmistaa pienkuormaajia ja -kaivureita. Haasteena oli valtavan datamäärän (IoT, robotit, ERP) muuntaminen ymmärrettäväksi ja visuaalisesti selkeäksi päätöksenteon tueksi.Projekti toteutettiin neljän hengen tiiminä. Vastasin kokonaisuudessa SITE-näkymän suunnittelusta, joka tarjoaa tehdaspäällikölle reaaliaikaisen näkymän yksittäisen tehtaan (Siilinjärvi) tuotantolinjojen tehokkuuteen ja poikkeamiin. Tämän lisäksi vastasin projektin Design Systemin rakentamisesta ja ylläpidosta. Huolehdin erityisesti siitä, että järjestelmä hyödynsi Figman muuttujia (variables) ja tokeneita tavalla, joka vastasi asiakkaan toiveita joustavuudesta ja brändinmukaisuudesta.

Tehtävänanto

Kurssin tehtävänä oli suunnitella ja mallintaa skaalautuva Dashboard-ohjausjärjestelmä, joka yhdistää teollisuuden IT- ja OT-datan (Information & Operational Technology).
Suunnittelutyö tuli ulottaa kolmelle eri tasolle:- Global: Johtoryhmän näkymä usean tehtaan seurantaan.
- Site: Tehdaspäällikön näkymä yksittäisen tehtaan tehokkuuteen ja pullonkauloihin.
- HMI (Human-Machine Interface): Tuotantosolun työntekijän operatiivinen käyttöliittymä.Vastuullani oli luoda näiden tasojen pohjaksi yhtenäinen, muuttujapohjainen Design System. Hyödynsin suunnittelussa myös "vibe coding" -menetelmää (Lovable- ja Cursor-työkalut) validoidakseni käyttöliittymän logiikkaa ja porautumisominaisuuksia (drill-down) toimivalla koodilla ennen lopullisten Figma-komponenttien lukitsemista. Lopputuloksena syntyi korkean tason prototyyppi, joka minimoi käyttäjän kognitiivista kuormaa teollisuusympäristössä.

Sisällys

"Vibe coding" osana iteratiivista suunnitteluprosessia

TerraBuild-projektin aikana hyödynsin perinteisen staattisen suunnittelun rinnalla uudenlaista "vibe coding" -menetelmää. Tässä lähestymistavassa käytin tekoälyavusteisia työkaluja, kuten Lovablea ja Cursoria, kääntääkseni rautalankamallit nopeasti toiminnallisiksi koodipohjaisiksi prototyypeiksi.

Prosessi ja työkalut

Toiminnallinen prototypointi:
Piirrettyjen rautalankojen sijaan rakensin Cursorilla ja AI-prompteilla toimivia React-näkymiä. Tämä mahdollisti käyttäjäpolkujen ja logiikan testaamisen aidossa selainympäristössä pelkkien staattisten kuvien sijaan.Realistisen datan hyödyntäminen:
Generoin ChatGPT:n avulla realistista teollisuusdataa nähdäkseni, miten käyttöliittymä skaalautuu pitkien numerosarjojen ja monimutkaisten graafien kanssa.Drill-down -logiikan validointi:
Erityisesti SITE-näkymän monimutkainen porautumislogiikka (drill-down) ylätasolta solutasolle hahmottui ja validoitui tämän prosessin kautta.Takaisinkytkentä Design Systemiin:
Koodissa toimiviksi todetut ratkaisut ja logiikat dokumentoitiin ja siirrettiin takaisin Figman komponenteiksi ja Design Systemin muuttujiksi.

Hyödyt ja opit

Tämä työtapa toi projektille merkittävää lisäarvoa, sillä se paljasti datan esittämiseen liittyviä haasteita – kuten tilan loppumisen – joita staattiset mallit eivät olisi osoittaneet. Prosessi opetti minulle paljon Figman ja koodin välisestä suhteesta sekä siitä, kuinka AI voi nopeuttaa suunnitteluratkaisujen validointia."Vibe coding osoitti, että monimutkaisten tietorakenteiden suunnittelu pelkkinä kuvina jättää liikaa avoimia kysymyksiä. Toiminnallinen prototyyppi on välttämätön monimutkaisten vuorovaikutusten, kuten datan suodattamisen, testaamisessa."

Prototyyppi livenä

Projektin päätteeksi julkaisin "vibe koodatun" ja toiminnallisen prototyypin Vercel-alustalle. Julkaisun tavoitteena on tarjota mahdollisuus kokeilla dashboardin porautumislogiikkaa ja interaktioita aidossa selainympäristössä, jolloin konseptin käytettävyys ja dynaamisuus tulevat parhaiten esiin. Työprosessi sisälsi kaikkiaan 124 commit-merkintää GitHub-repositorioon, mikä kuvastaa ratkaisun intensiivistä ja iteratiivista kehitystä.Pääset tutustumaan ja kokeilemaan prototyyppiä alla olevan linkin kautta. Huomioithan, että näkymä on suojattu salasanalla.Salasana: uxui2025!

Oppiminen ja itsearviointi

TerraBuild-projekti oli kokonaisuutena erittäin onnistunut ja opettavainen prosessi, joka simuloi aidosti todellista työelämän toimeksiantoa. Merkittävin tekninen oppimiskokemukseni oli siirtyminen perinteisestä staattisesta suunnittelusta kohti koodipohjaista prototypointia eli ”vibe koodausta”. Tämä menetelmä mahdollisti monimutkaisten vuorovaikutusten, kuten datan porautumislogiikan, validoinnin toimivalla koodilla pelkkien staattisten kuvien sijaan.

Keskeiset opit ja onnistumiset

Figma-osaamisen syventäminen:
Opin rakentamaan ammattimaisen ja skaalautuvan Design Systemin hyödyntämällä Figman muuttujia (variables). Tämä prosessi opetti, miten koodissa toimivaksi todettu logiikka dokumentoidaan takaisin suunnittelujärjestelmään palvelemaan sekä suunnittelijaa että kehittäjääTeollisen kontekstin ymmärtäminen:
Syvensin ymmärrystäni teollisen käyttöliittymän vaatimuksista ja opin, että visuaalinen näyttävyys on aina toissijaista tiedon luettavuudelle ja yksiselitteisyydelle. Huomiovärien säästeliäs ja semanttinen käyttö osoittautui kriittiseksi tekijäksi käyttäjän kognitiivisen kuorman minimoimisessa.Ketterä reagointi palautteeseen:
Onnistuin reagoimaan ketterästi asiakkaalta ja tiimiltä saatuun palautteeseen. Esimerkiksi datan priorisointi ja tuotantolukujen muuttaminen absoluuttisista arvoista vertailukelpoisiin prosentteihin paransi merkittävästi dashboardin käytettävyyttä.Tiimityöskentely ja kokonaisuuden hallinta:
Vaikka vastasimme tiimissä omista osa-alueistamme (Global, Site, HMI), onnistuimme luomaan yhtenäisen kokonaisuuden, joka näyttää yhdeltä kädenjäljeltä. Tiimimme kannustava ilmapiiri mahdollisti rakentavan palautteen ja tehokkaan ongelmanratkaisun.

Haasteet

Haasteena projektissa oli oikean tasapainon löytäminen valtavan datamäärän esittämisessä sekä ajankäytön painottuminen loppuvaiheeseen. Seuraavalla kerralla panostaisin vielä vahvemmin datan ja KPI-mittaristojen validointiin heti projektin alussa ylimääräisen työn välttämiseksi. Kokonaisuudessaan koen saavuttaneeni asettamani tavoitteet ja saaneeni vahvan pohjan vaativien UI/UX-kokonaisuuksien suunnitteluun.