---
title: "voxcog: designjärjestelmä koodina ja käyttäjätestit"
description: "Näin voxcogin käyttöliittymä sai designjärjestelmän koodina ja tutkimuskierroksen, jossa viisi seitsemästätoista löydöksestä kaatui koodia vasten."
url: https://torn.studio/fi/tyot/voxcog-designjarjestelma-ja-kayttajatestit
locale: fi
published: 2026-08-31
updated: 2026-08-26
---

# voxcog: designjärjestelmä koodina ja käyttäjätestit

> **Lyhyt vastaus:** Torn Studio rakensi voxcogin käyttöliittymän designjärjestelmän varaan koodissa, tokeneilla OKLCH-avaruudessa ja dokumentoidulla säännöstöllä. Tutkimuskierros tuotti seitsemäntoista löydöstä; yksitoista kesti, yksi osittain ja viisi kaatui koodia vasten. Kaksitoista muutosta meni tuotantoon, ja viisi hylättyä jäivät dokumenttiin perusteluineen. Käyttöliittymä luovutettiin elokuussa 2026.

**Asiakas:** voxcog · **Luovutettu:** 2026-08-26

**Studion suhde asiakkaaseen:** voxcog on tuote, jonka Torn Studio on rakentanut ja josta studiolla on omistusosuus. Studio vastasi tuotejohdosta, arkkitehtuurista ja toteutuksesta luovutukseen asti elokuussa 2026.

## Toimeksianto

voxcog tarvitsi käyttöliittymän, joka pysyy yhtenäisenä noin neljässäkymmenessä näkymässä, jotka yksi ihminen rakensi muutamassa kuukaudessa, ja tarvitsi tietää mitkä raportoiduista ongelmista olivat todellisia ennen kuin mitään rakennettiin uudelleen.

## Mikä teki siitä vaikeaa

- Kovaa vauhtia yhden ihmisen rakentama käyttöliittymä ajautuu visuaalisesti erilleen, kun jokainen näkymä saa valita omat värinsä ja välinsä.
- Tutkimuskierros tuottaa todellisia vikoja sekaisin toiveiden kanssa, ja kaiken raportoidun rakentaminen on nopein tapa rakentaa vääriä asioita.
- Tuotteen piti olla julkaisuvalmis, mikä edellyttää että sekä tyhjät tilat että juridiset pinnat ovat valmista työtä.

## Luvut jotka voi laskea

| Luvut jotka voi laskea | | |
| --- | --- | --- |
| 17 | löydöstä käyttäjätutkimuksessa | Yksitoista kesti, yksi osittain, viisi kaatui sitä komponenttia vasten johon ne osoittivat. Arvio on yhä koodivarastossa jokaisen hylkäyksen perusteluineen. |
| 12 | tuotantoon vietyä muutosta kierrokselta | Viisi hylättyä ovat yhä dokumentissa perusteluineen, joten seuraava lukija näkee mitä koeteltiin ja jätettiin pois. |
| 373 | testitiedostoa | Sijoitettu sen koodin viereen jota ne kattavat. Agentin arvioinnit ovat niiden joukossa ja ajetaan omina komentoinaan. |
| 300 | rivin katto tiedostoa kohti | Sääntö, joka pitää komponentit jaettavina. Se on koodivaraston omassa ohjetiedostossa ja koskee kaikkea uutta. |

## Näin se tehtiin

### Tokenit ainoana visuaalisena lähteenä

Väri, typografia, pyöristykset ja varjot määritellään tokeneina OKLCH-avaruudessa ja käytetään muuttujien kautta. Sääntö kirjattiin omaksi viitteekseen, joten uusi näkymä perii järjestelmän ja poimii arvonsa sieltä.

### Jokainen löydös koeteltiin ensin koodia vasten

Huhtikuun 2026 kierroksen seitsemäntoista löydöstä luettiin yksi kerrallaan sitä komponenttia vasten, johon kukin osoitti. Yksitoista kesti, yksi kesti osittain, ja viisi osoittautui kuvaamaan jotain joka jo toimi tai toimintoa jota ei ollut.

### Tyhjät tilat, jotka antavat suunnan

Ohuet tyhjät tilat kirjoitettiin uudelleen lyhyiksi oppaiksi, jotka kertovat mihin pinta on tarkoitettu ja tarjoavat seuraavan askeleen. Työkalurivit pysyvät piilossa listan ollessa tyhjä, joten ensikertalainen kohtaa ohjeen.

### Datanhaku yhtenä mallina

Kaikki asiakaspuolen luku siirrettiin yhteiselle välimuistikerrokselle avaintehtaineen ja jaettuine virheenkäsittelyineen. Päivityspainikkeet voitiin poistaa, koska listat tietävät nyt itse milloin ne ovat vanhentuneet.

**Teknologiat:** React 19, Next.js 16, Tailwind CSS v4, shadcn/ui, OKLCH, TanStack Query, Playwright

## Mihin todiste riittää

Tämä osoittaa yhtenäisen käyttöliittymän ja työtavan, joka erottaa todelliset ongelmat toiveista. Konversiolukua se ei näytä: voxcog luovutettiin ennen julkaisua, joten mitattavaa liikennettä ei ole.

## Usein kysyttyä

### Miksi koettelette käyttäjälöydökset koodia vasten ennen rakentamista?

Koska tutkimus sekoittaa todelliset viat toiveisiin ja asioihin jotka jo toimivat. Viisi seitsemästätoista löydöksestä kaatui tällä kierroksella tarkistuksessa, ja niiden rakentaminen olisi vienyt aikaa ja huonontanut käyttöliittymää.

### Mikä erottaa designjärjestelmän komponenttikirjastosta?

Kirjasto on komponentit. Järjestelmä on säännöt, jotka ratkaisevat mitä saa olla olemassa: mitkä värit ovat, mitkä välit sallitaan ja mitä tapahtuu kun jokin puuttuu. Säännöt pitävät nopeasti kasvavan tuotteen koossa.

### Miksi OKLCH väriavaruudeksi?

OKLCH on havainnollisesti tasainen, joten tasavälinen asteikko myös näyttää tasaiselta ja kontrasti on laskettavissa. Tumma variantti on saman järjestelmän vaaleuden uudelleenmäärittely.

### Mitä tarkoittaa että tyhjä tila antaa suunnan?

Että pinta kertoo mihin se on tarkoitettu ja tarjoaa seuraavan askeleen kun näytettäviä rivejä on nolla. Ensikertalainen kohtaa ohjeen, ja haku ja suodattimet pysyvät piilossa kunnes on jotain haettavaa.

### Voitteko rakentaa designjärjestelmän nykyiselle tuotteellemme?

Kyllä. Työ alkaa kartoittamalla jo käytössä olevat arvot, kokoamalla ne yhdeksi tokenjoukoksi ja siirtämällä sitten näkymä kerrallaan. Järjestelmä toimitetaan koodina koodivarastoosi ja kirjoitettuna viitteenä.

### Kuinka monta näkymää käyttöliittymätyö kattoi?

Noin neljäkymmentä näkymää jakautuen keskusteluun, dokumentteihin, signaaleihin, tehtäviin, työtiloihin ja julkiseen haastatteluosaan. Kaikki jakavat saman tokenjoukon ja saman komponenttikirjaston.