Que será, será – Riisinkeittimen logiikalla kohti parempaa asiakaskokemusta
Design-systeemi saattaa kuulostaa tekniseltä termiltä, mutta sen ydin on yksinkertainen. Tarkoitus on luoda yhtenäinen, tehokas ja käyttäjäystävällinen kokonaisuus, joka tekee tuotteesta paremman. Visma Solutionsin Sera-design-systeemin omistaja ja suunnittelija Hien Köhler kertoo, miten hän yhdistää idän ja lännen parhaat puolet sekä miksi hyvä design muistuttaa riisinkeitintä.
Matka Vietnamin lämmöstä suunnittelijaksi Suomeen
Olen Hien Köhler, suunnittelija, joka yhdistää idän ja lännen parhaat puolet. Synnyin Vietnamissa, mutta nykyään elän ja hengitän Suomen elinvoimaista design-alaa. Lähes kymmenen vuoden ajan olen rakentanut digitaalisia kokemuksia niin startupeissa kuin vakiintuneissa toimistoissa.
Matkan varrella huomasin toistavani samaa kaavaa. Projektin koosta tai tiimistä riippumatta päädyin rakentamaan uudelleenkäytettäviä komponentteja ja pattern-kirjastoja. Tuntui kuin universumi olisi yrittänyt vihjata minulle jotakin ja minä kuuntelin. Nyt toimin Visma Solutionsilla Sera-design-systeemin omistajana ja suunnittelijana, tukien Severa-tuotelinjan kehitystä.
Elämän alusta aloittaminen Suomessa
Yksi suurimmista saavutuksistani ei liity suoraan designiin, vaan elämään. Muutin 18-vuotiaana yksin Suomeen opintoviisumilla ja aloitin kaiken alusta. Vuodet toivat mukanaan haasteita, sopeutumista ja kasvua, mutta nyt olen Suomen kansalainen ja teen työtä, joka innostaa minua joka päivä.
Matkan varrella opin, mitä suomalainen sisu todella tarkoittaa. Ja vaikka voisin kiroilla neljällä eri kielellä, teen sen vaistomaisesti kuin suomalainen. Ehkä se on merkki täydestä kotoutumisesta.
Severa NXT:n design-DNA
Viime aikoina olemme keskittyneet luomaan Severa NXT:n design-DNA:ta. Olemme rakentaneet yli 75 uudelleenkäytettävää komponenttia, luoneet yhtenäisen ja brändinmukaisen tyylin sekä virtaviivaistaneet UI/UX-työtapoja.
Saavutettavuus ei ole meille jälkikäteen lisättävä mauste, vaan se on sisäänrakennettu reseptiin alusta alkaen. Design token -järjestelmämme tuo joustavuutta tulevaisuutta varten – esimerkiksi tumma tila on vain asetuksen päässä. Ja mikä tärkeintä, pidämme kaikki tuotetiimit samalla kartalla, jotta lopputulos on yhtenäinen ja laadukas.
Hyvä design on kuin jääkaappi
Hyvä design on kuin jääkaappi. Silloin kun se toimii, kukaan ei sitä huomaa, mutta kun se ei toimi, sen kyllä haistaa.
Paras design on usein näkymätöntä. Kun käyttäjät voivat saavuttaa tavoitteensa ilman kitkaa ja turhautumista, olemme onnistuneet työssämme.
Ja kyllä, kaikilla pitäisi olla pääsy “jääkaapille” riippumatta taustasta, asemasta tai toimintarajoitteista. Siksi saavutettavuus ei ole vaihtoehto, vaan perusvaatimus.
Design-systeemi on kuin riisinkeitin
Otetaanpa aasialaisesta kodista tuttu riisinkeitin vertauskuvaksi. (Jos sinulla ei vielä ole sellaista… kannattaa ehkä harkita.)
Riisinkeitin sisältää kaiken tarpeellisen: sisäkattilan, lämpöanturit, höyryventtiilin ja mittakupin. Jokaisella osalla on oma tarkka tehtävänsä. Samoin design-systeemi koostuu väreistä, typografiasta, komponenteista, välistyksistä ja vuorovaikutusmalleista, jotka toimivat yhdessä kuin hyvin viritetty keittiökone.
Miksi se on tärkeää?
- Tehokkuus: Kun hallitset keittimesi, saat täydellistä riisiä kahdelle tai kahdellekymmenelle ilman arpomista.
- Laatu: Ei palanutta pohjaa eikä vetistä sotkua, sama juttu designissa: ei epäjohdonmukaisia nappuloita tai rikkinäisiä käyttökokemuksia.
- Helppo käyttöönotto: Kuka tahansa voi tulla keittiöösi ja onnistua heti.
- Resurssien vapautus: Kun keitin hoitaa perusasiat, sinulla on aikaa luoda jotain erityistä.
Ja kyllä, käytän itse Xiaomi Smart Multifunctional Rice Cooker -keitintä. Ei sponsoroitu mainos. Vielä.
| Riisinkeittimen osa | Design-systeemin osa | Kuvaus |
|---|---|---|
| Irrotettava sisäkansi | Tyyliohjeet (Style Guides) | Sijoittuu sisällön yläpuolelle luomisvaiheessa ja on helppo irrottaa päivityksiä ja ylläpitoa varten. Varmistaa, että visuaaliset standardit toteutuvat johdonmukaisesti, aivan kuten kansi luo optimaaliset keitto-olosuhteet. |
| Sisäkattila | Komponenttikirjastot (Component Libraries) | Olennainen astia, jossa kaikki elementit yhdistyvät ja toimivat yhdessä. Sisältää kaikki uudelleenkäytettävät käyttöliittymäkomponentit (napit, lomakkeet, kortit), jotka muodostavat jokaisen käyttöliittymän perustan. |
| Yläpuolen lämpöanturi | Suunnitteluperiaatteet ja -filosofia (Design Principles & Philosophy) | Valvoo tilannetta ylimmällä tasolla ja varmistaa laadukkaan lopputuloksen. Tarjoaa yleiset ohjeet, jotka estävät design-ratkaisuja menemästä brändin ohi tai menettämästä johdonmukaisuutta. |
| Veden mitta-asteikot | Design token -järjestelmä (Design Tokens System) | Antaa tarkat, standardoidut mitat, jotka varmistavat täydelliset mittasuhteet joka kerta. Määrittelee tarkan värien, välistysten ja typografian arvot, jotka säilyttävät yhtenäisyyden kaikissa komponenteissa. |
| Pohjan lämpöanturi | Laadunvarmistus ja testaus (QA Processes & Testing) | Seuraa jatkuvasti perustaa estääkseen palamisen tai vajaakypsennyksen. Havaitsee ongelmat varhaisessa vaiheessa ennen kuin ne vaikuttavat koko tuotteeseen, varmistaen luotettavuuden ja suorituskyvyn. |
| Höyryventtiili | Yhteistyö ja viestintä (Collaboration & Communication) | Vapauttaa painetta oikealla hetkellä, jotta vältetään räjähdysmäiset tilanteet. Hallitsee tiimijännitteitä ja mahdollistaa rakentavan keskustelun, joka vie projektia eteenpäin. |
| Ohjauspaneeli | Mallikirjastot (Pattern Libraries) | Yksinkertainen käyttöliittymä, joka käynnistää monimutkaiset, ennalta ohjelmoidut toiminnot. Tarjoaa valmiita design-malleja, jotka ratkaisevat yleiset käyttäjätyönkulut vähällä vaivalla. |
| Riisikauha ja -kaukalot | Toteutustyökalut (Implementation Tools) | Erityistyökalut, jotka on suunniteltu toimimaan järjestelmän kanssa sitä vahingoittamatta. Koodinpätkät, design-tiedostot ja liitännäiset, jotka mahdollistavat komponenttien turvallisen siirron tuotantoon. |
| Mittakuppi | Scrum | Tarjoaa standardoidut annokset, jotka sopivat täydellisesti järjestelmään. Jakaa työn tasaisiin, hallittaviin sprintteihin, jotka takaavat tasaisen etenemisen ja ennustettavat tulokset. |
| Höyrykori | Tekoäly (Artificial Intelligence) | Valinnainen lisäosa, joka laajentaa perustoimintojen kapasiteettia. Lisää mukautuvia, älykkäitä ratkaisuja, jotka tuovat uusia mahdollisuuksia perinteiseen suunnitteluprosessiin. |
| Käyttöohje | Dokumentaatio (Documentation) | Olennainen ohje, joka tekee monimutkaisesta koneistosta helposti lähestyttävän työkalun. Tarjoaa vaiheittaiset ohjeet, vianetsinnän ja parhaat käytännöt järjestelmän tehokkaaseen käyttöönottoon. |
| Reseptit | Käyttötapausesimerkit (Use Case Examples) | Yksityiskohtaiset ohjeet tietyn lopputuloksen luomiseksi järjestelmää käyttäen. Näyttää käytännön esimerkkien avulla, miten komponentteja ja malleja yhdistetään onnistuneesti. |
| Virtajohto | Design-systeemitiimi (Design System Team) | Elintärkeä yhteys, joka tuo energian lähteestä järjestelmään. Ihmiset, jotka ylläpitävät ja kehittävät design-systeemin infrastruktuuria. |
| Sähkö | Kolmannen osapuolen integraatiot (Third-Party Integrations) | Perusvoimanlähde, joka tekee kaiken mahdolliseksi. Ulkoiset työkalut ja palvelut, jotka tarjoavat olennaisen infrastruktuurin ja toiminnot, joihin järjestelmä tukeutuu. |
Tekstikenttä – pieni komponentti, iso työ
Kun rakennamme design-systeemin komponentteja, mikään ei jää puolitiehen. Otetaan esimerkiksi meidän TextField:
- Kartoitamme kaikki lomakkeen osat.
- Määritämme tärkeysjärjestyksen.
- Tutkimme muiden ratkaisut.
- Sovimme tiimin kanssa, millaisen käyttökokemuksen haluamme tarjota.
- Luomme tokenit yhtenäisyyden varmistamiseksi.
- Testaamme saavutettavuuden WCAG 2.2 AA -tasolla.
- Suunnittelemme kaikki tilat: default, focus, error, success…
- Teemme tiivistä yhteistyötä kehittäjien ja suunnittelijoiden kanssa.
- Hiomme ja dokumentoimme kaiken viimeistä piirtoa myöten.
- Tarkistamme laadun ennen julkaisua.
Vaikka kyse on ”vain” yhdestä syötekentästä, se voi esiintyä satoja kertoja tuotteessa. Kun sen tekee kerralla kunnolla, säästyy valtavasti aikaa ja käyttäjät saavat tasalaatuisen kokemuksen kaikkialla.
Parempaa designia käyttäjien ehdoilla
Design-systeemimme ei ole vain sisäisen tehokkuuden työkalu, vaan se on asiakaslähtöinen strategia.
Esimerkki: Asiakkaat kokivat Severassa navigoinnin sekavaksi, koska tiedon muokkaamiseen oli liian monta erilaista tapaa – pieniä modaleita, suuria overlay-elementtejä, sivupolkuja…
Ratkaisu: Teimme koko käyttöliittymästä auditoinnin ja yhdistimme kaikki nämä yhdeksi johdonmukaiseksi ratkaisuksi: Drawer-komponentiksi. Nyt käyttäjät tietävät aina, mitä odottaa, ja pysyvät kontekstissa ilman eksymistä kerroksiseen UI-labyrinttiin.
Tämä ei ollut vain design-voitto, vaan kokonainen käyttökokemuksen muodonmuutos.
Hyvä design ei ole sattumaa
Olipa kyseessä sitten riisinkeitin, tekstikenttä tai asiakaspolku, periaatteeni on sama. Rakenna kestävä pohja, pidä huolta yksityiskohdista ja tee kaikki käyttäjän parhaaksi.
Koska Que será, será, mutta hyvän designin ei tarvitse olla sattuman kauppaa.
Haluatko olla osana kehitystyötä? Kutsumme sinut mukaan kehittämään entistä parempaa käyttökokemusta
Suunnittelijoiden ja kehittäjiemme työnjälki näkyy myös vastalanseeratussa beta-ympäristössä, jossa rakennamme tulevaisuuden Severaa. Erityisesti toivomme palautetta saavutettavuushaasteista kärsiviltä käyttäjiltä, sillä palautteenne on meille korvaamatonta. Liity siis mukaan beta-käyttäjäksi ja tule vaikuttamaan Severan kehitykseen.
Lisäksi Severan käyttäjäpaneelissa pääset vaikuttamaan entistä paremman käyttökokemuksen luomiseen meille kaikille.
Kiitos, että olet mukana tekemässä Severasta järjestelmää, jota todella kaikki voivat käyttää.
Hien Köhler toi design system -ajattelun Severaan ja on johtanut skaalautuvan, suorituskykyisen ja käyttäjäystävällisen design systemin rakentamista, joka toimii Severan käyttöliittymän perustana vuosiksi eteenpäin. Hän on yksi avainhenkilöistä modernin ja intuitiivisen PSA-ohjelmiston muovaamisessa.
