voxcog: designjärjestelmä koodina ja käyttäjätestit
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.
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.
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
- 17lö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.
- 12tuotantoon vietyä muutosta kierrokselta
- Viisi hylättyä ovat yhä dokumentissa perusteluineen, joten seuraava lukija näkee mitä koeteltiin ja jätettiin pois.
- 373testitiedostoa
- Sijoitettu sen koodin viereen jota ne kattavat. Agentin arvioinnit ovat niiden joukossa ja ajetaan omina komentoinaan.
- 300rivin 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.
Perusta
Mihin tämä artikkeli nojaa — tekemäämme mittaukseen, päivättyyn lähteeseen tai päätökseen ja sen hintaan.
- Mittaus
Kuinka moni seitsemästätoista raportoidusta käyttöliittymäongelmasta oli todellinen
Mittauskohde: voxcogin sovellus, tutkimusraportti 2. huhtikuuta 2026
Menetelmä: Jokainen löydös luettiin sitä komponenttia vasten johon se osoitti ennen koodia, ja tulos kirjattiin muodossa kestää, osittain tai kaatuu.
Tulos: 11 kesti, 1 osittain, 5 kaatui
- Päätös
Viisi hylättyä löydöstä kirjattiin ylös hylkäyksen perusteluineen.
Mitä se maksoi: Kierros tuotti kaksitoista muutosta siinä missä seitsemäätoista pyydettiin, ja raportin omat toimintoideat jäivät ulkopuolelle hypoteeseina.
- Päätös
Kaikki visuaalinen ilmaistaan tokeneina OKLCH-avaruudessa ja käytetään muuttujien kautta.
Mitä se maksoi: Kertaluonteinen kustannus aluksi ja sääntö jota pitää noudattaa: uusi väri vaatii uuden tokenin ennen käyttöä.
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.
Kerro, mitä haluat rakentaa
Kolmekymmentä minuuttia, maksutta, ja suora vastaus siihen, olemmeko oikea studio tehtävään.