Onko design-systeemistä hyötyä liiketoiminnallesi?

Mitä ovat design-systeemit, ja miksi niistä kohistaan digitaalisten palvelujen maailmassa niin paljon? Minkälaisessa tilanteessa design-systeemistä on hyötyä liiketoiminnalle? Tämän blogipostauksen lukemisen jälkeen olet ilmiöstä ajan tasalla.

Monien yritysten tuotteet ovat jakautuneet usealle alustalle, joita ylläpidetään henkilöstön toimesta, joka saattaa matkan varrella vaihtua ja joilla on keskenään hyvin erilaiset osaamisalueet. Yksinkertaisimmillaan tämä voi tarkoittaa vaikkapa sitä, että yrityksellä on olemassa sovellus, verkkosivusto ja niiden markkinointimateriaali. Suuremmilla yrityksillä erilaisten palvelujen – ja niitä kehittävien työntekijöiden - määrä saattaa sitä vastoin olla häkellyttävän suuri.

Miten tällaista kokonaisuutta on mahdollista pitää yllä niin, että henkilöstön työ ei muutu raskaaksi kaaokseksi, ja loppukäyttäjälle jää kaikesta yhtenäinen vaikutelma?

‍Design-systeemit pyrkivät tarjoamaan ongelmaan ratkaisun.

Mitä design-systeemit ovat?

Hieman yksinkertaistaen: design-systeemi on kokoelma uudelleenkäytettäviä komponentteja, ja selkeät ohjeet siitä, miten niitä käytetään erilaisissa tilanteissa. Komponentit voivat olla vaikkapa käyttöliittymien uudelleenkäytettäviä visuaalisia elementtejä, väripaletteja, tai jopa erilaisiin yhteyksiin suositeltuja tapoja puhutella käyttäjää tekstin avulla.

Ideaalitilanteessa design-systeemi toimii niin, että kaikki projektissa mukana olevat voivat luoda helposti uutta sisältöä ja olla samalla varmoja siitä, että kokonaisuus säilyy yhtenäisenä ja helposti ylläpidettävänä.

Tavoitteena on aina luoda niin yhtenäinen, joustava ja helpoiten ylläpidettävä systeemi kuin mahdollista. Koska projektit ja ympäristöt ovat erilaisia, myöskään design-systeemit eivät ole keskenään samanlaisia.

Parhaissa design-systeemeissä on yhteistä suuren painoarvon asettaminen taipuisalle ja helposti skaalautuvalle dokumentaatiolle. Sen tehtävä on paitsi kertoa, miten asiat tehdään, myös se miksi näihin tapoihin on päädytty juuri tässä yrityksessä.

‍Githubin design-systeemiä luomassa ollutta Diana Mounteria mukaillen: design-systeemit ovat viime kädessä "sääntöjä, kehikoita ja periaatteita, joita design ja koodi toteuttavat." Mounterin luento aiheesta on mainio yleiskatsaus siihen, mitä design-systeemit voivat parhaimmillaan olla:

‍

Mitä design-systeemit sitten pitävät sisällään?

Tavoitteena on aina luoda niin yhtenäinen, joustava ja helpoiten ylläpidettävä systeemi kuin mahdollista. Koska projektit ja ympäristöt ovat erilaisia, myöskään design-systeemit eivät ole keskenään samanlaisia. Tästä huolimatta tietyt ylätason elementit ovat yhteisiä suurelle osalle design-systeemejä.

‍Visuaalinen ohjeistus pitää sisällään muun muassa tyylillisiä ohjeistuksia, väripaletteja, ulkoasupohjia ja kuvituksia. Dokumentaation tulee sisältää selkeät ohjeet siitä, missä ja miten näitä on tarkoitus käyttää lopputuotteessa sen kaikissa ilmenemismuodoissa.

Esimerkki: IBM:n design-ohjeistus

‍Esitystyyli niin yleisellä tasolla kuin tiettyihin tilanteisiinkin määriteltynä vaikuttaa vahvasti siihen, minkälaisia tunteita palvelu käyttäjissä herättää. Onko tyylin syytä olla virallinen vai kenties leikkisämpi? Yhtenäisyys on elintärkeää sekä visuaalisessa että kirjallisessa esitystavassa – huolimatta siitä, työskenteleekö sisällön parissa 10 vai 100 ihmistä.

Esimerkki: Mailchimpin esitystapa ja äänensävy

‍Komponentit ovat usein uudelleenkäytettäviä käyttöliittymäelementtejä. Web-pohjaisissa tuotteissa näiden käyttö toimii usein kopioimalla pätkä HTML:ää oikeaan kohtaan. Kun kättö on ohjeistettu tarpeeksi hyvin, voi kuka tahansa tiimin jäsenistä hyödyntää niitä turvallisesti.

Esimerkki: Googlen Material Design -komponentit

‍Interaktiomallit ovat tapoja, joilla erilaiset interaktiot toteutetaan palvelussa niin, että niiden logiikka on keskenään samanlainen. Tällainen voi olla esimerkiksi ohjeistus siitä, miltä palvelun vika-ilmoitukset näyttävät, ja miten ne rakennetaan.

Esimerkki: Googlen Material Design -mallit

“Yhteinen design-systeemi luo läpinäkyvyyttä, ja auttaa kaikkia organisaation ihmisiä näkemään miten design toimii ja mikä sen tavoite on. Lisäksi uusien kumppaneiden ohjeistus on helpompaa kun tarvittava materiaali on aina käsillä, eikä sitä tarvitse tehdä aina uudestaan.

Toimiakseen design-systeemistä on tehtävä erottamaton osa organisaation työtapoja. Mikäli tässä onnistutaan, tiimin työskentelyteho paranee merkittävästi, eikä design-systeemistä tule varsinaisesta tekemisestä irrallinen, nopeasti vanheneva dokumentaatio.”

— Mikko Ahlström, Suunto Oy

Miksi design-systeemit ovat erinomaisia?

Design-systeemin etuja ovat esimerkiksi seuraavat asiat:

• Tehokkuuden ja yhtenäisyyden lisääminen kaikilla osa-alueilla – niin työtehossa kuin asiakaskokemuksessakin mitattuna.
• Työtiimin uudet jäsenet pääsevät nopeasti tekemiseen mukaan.
• Suunnittelijat voivat ottaa helpommin työnsä pohjaksi olemassaolevat mallit – pyörää ei tarvitse keksiä aina uudelleen.
• Sisällöntuottajat tietävät käyttävänsä yhteneväistä esitystapaa.
• Front-end -kehittäjien ei tarvitse sietää HTML-spagettia, joka on toteutettu keskenään erilaisin metodein pitkin palvelua.

Design-systeemi tarjoaa myös mainion ylätason näkemyksen palvelun komponenteista ja siitä, miten ne ovat yhteydessä toisiinsa.

Toisen puolen ruoho ei ole pelkästään (yhtenäisen) vihreää

Toimivan design-systeemin rakentaminen edellyttää luonnollisesti myös sen tiedostamista, minkälaisten ongelmien ratkaisuun design-systeemi ei välttämättä sovi.Design-systeemi ei ole mikään seuraavista asioista:

• Hopealuoti, joka tekee automaattisesti designista itsestään hyvää. Sen sijaan design-systeemin etu on siinä, että se tekee designista yhtenäisempää.
• Maaginen ratkaisu organisaation sisäiseen kaaokseen. Sen sijaan se vähentää turhaa pienempiin asioihin liittyvää ajankäyttöä, mikä tekee isompiin asioihin keskittymisestä helpompaa.
• Aina oikeassa. Sen sijaan hyvän design-systeemin merkki on se, että sen sisältöä ylläpidetään, kyseenalaistetaan ja päivitetään usein.
  ‍

Toimivan design-systeemin rakentaminen vaatii kärsivällisyyttä, ja mikä tärkeintä: sen hyödyntäminen on istutettava syvälle yrityksen toimintakulttuuriin. Tämä ottaa mitä todennäköisimmin oman aikansa, mutta on vedenjakaja onnistuneen ja epäonnistuneen investoinnin välillä: design-systeemi, jota ei käytetä ja päivitetä jatkuvasti ei hyödytä ketään.

Miten aidosti hyödyllinen design-systeemi kannattaisi rakentaa?

Design-systeemin on vastattava juuri sen organisaation tarpeisiin, jota varten se rakennetaan. Nykyisen prosessin suurimpien kompastuskivien tunnistaminen on hyvä aloituspiste suunnittelulle. On myös hyvä päättää, rakennetaanko design-systeemi hiljalleen vai isoin harppauksin.

Toimivan design-systeemin rakentaminen vaatii kärsivällisyyttä, ja mikä tärkeintä: sen hyödyntäminen on istutettava syvälle yrityksen toimintakulttuuriin.

Lähestymistavasta huolimatta on tärkeää muistaa, että design-systeemiä ei ole tarkoitus vain rakentaa ja jättää se sen jälkeen rauhaan. Sen sijaan toimivan design-systeemin on tuettava ajattelua, jossa käytännön ongelmiin haetaan jatkuvasti tuoreita käytännöllisiä ratkaisuja, jotka muodostuvat osaksi dokumentaatiota ja ovat näin hyödynnettävissä myös jatkossa.

Design-systeemi kannattaa rakentaa tiimin kanssa, joka ymmärtää sen kaikkia aspekteja ja jolla on kyky yhdistää ne aidosti toimivaksi kokonaisuudeksi. Tämä periaate on hyvä pitää mielessä huolimatta siitä, lähdetäänkö kokonaisuutta rakentamaan talon sisäisesti nykyisen henkilöstön voimin, sitä varten palkattujen uusien ihmisten toimesta tai yhteistyössä jonkin toisen yrityksen kanssa.

‍Tarvitseeko sinun organisaatiosi design-systeemiä – tai apua sen päättämisessä, onko design-systeemin rakentaminen hyvä ratkaisu? Ota meihin yhteyttä, keskustelemme mielellämme aiheesta lisää.

Tutustu Hesburgerille rakentamaamme design-systeemiin täällä.