Production
Monille organisaatioille hyvin toteutettu suunnittelujärjestelmä voi merkitä eroa tehokkaan digitaalisen ympäristön ja turhauttavan kaaoksen välillä.
Olemme rakentaneet design-systeemejä kaikenkokoisille yrityksille – tässä oppaassa jaamme kokemuksemme niistä. Se toimii sekä johdantona design-systeemeihin että kuvauksena siitä, miten lähestymme niiden toteuttamista.
Haluatko oppia aiheesta lisää? Tai kenties olet harkitsemassa yhteistyötä kanssamme? Niin tai näin, löydät varmasti hyödyllistä tietoa näiltä sivuilta.
Nykypäivän digitaalisissa ympäristöissä useimpien yritysten tuotteet toimivat samaan aikaan eri alustoilla, monen eri kosketuspisteen kautta. Niitä kehittävät tiimit, jotka koostuvat eri alojen ammattilaisista, ja joiden jäsenet vaihtuvat joskus tiuhaankin tahtiin.
Yrityksille on kuitenkin tärkeää, että niiden brändit ja käyttäjäkokemus pysyvät yhtenäisinä kaikissa näissä kanavissa riippumatta siitä, kuka tuotteen, palvelun tai sisällön parissa työskentelee. Vastaavasti suunnittelijat ja kehittäjät tarvitsevat synergiaa työskentelyssään. Jos kaikki käyttävät hieman erilaisia menetelmiä, suunnittelutyylejä tai tapoja lisätä uutta toiminnallisuutta, asiat mutkistuvat hyvin nopeasti – myös pienissä tiimeissä.
Design-systeemit tarjoavat ratkaisun haasteeseen. Modernit design-systeemit ovat paljon muutakin kuin kirjastoja visuaalisille brändielementeille – tässä mielessä nimi saattaa jopa olla hieman harhaanjohtava. Nykyään design-systeemit yhdistävät saumattomasti brändiohjeistuksen, visuaaliset elementit ja tekniset komponentit. Parhaimmillaan design-systeemi on suunnittelu- ja kehitystiimit yhdistävä liima: sunnittelijat voivat sen avulla luoda malleja, jotka paitsi noudattavat brändin ja käyttäjäkokemuksen sääntöjä, myös auttavat kehittäjiä toteuttamaan ne helposti kontekstista riippumatta.
Edellä kuvatun saavuttamiseksi design-systeemi sisältää uudelleenkäytettäviä elementtejä, kuten tokeneita ja komponentteja sekä moduuleja ja malleja (eng. patterns). Mitä nämä tarkoittavat?
Tokenit muuttavat pienimmätkin suunnittelupäätökset (esim. typografia, värit tai mitat) muuttujiksi, joita kehittäjät voivat helposti hyödyntää.
Komponenteilla tarkoitetaan käyttöliittymän elementtejä – esimerkiksi painikkeita ja pudotusvalikoita.
Useita komponentteja yhdistelemällä luodaan monimutkaisempia moduuleja, joilla on oma sisäinen logiikkansa. Näitä ovat esim. kortit, lomakkeet ja eri sivuosioiden mallipohjat.
Mallit ovat toistuvia käyttäjäkokemuksen osia, kuten kirjautumiset ja haut.
Yhdessä nämä kaikki muodostavat komponenttikirjastoja.
Komponenttikirjastot eivät ole vain visuaalisia referenssejä, vaan funktionaalisia käyttöliittymän osia, joita kehittäjät voivat hyödyntää sydämensä kyllyydestä. Tällaisten uudelleenkäytettävien elementtien lisäetuna on laadun säilyminen: yllätyksiä syntyy yksinkertaisesti vähemmän, kun meillä on selkeät säännöt sille kuinka samaa muotokieltä sovelletaan mihin tahansa uuteen sisältöön, missä tahansa laitteessa tai ruutukoossa.
Kun kaikki käyttävät samoja hyväksi havaittuja elementtejä, virheitä tapahtuu vähemmän silloinkin kun aikataulut ovat tiukat. Myös esteettömyysstandardien noudattaminen on helpompaa sekä kehittäjille että suunnittelijoille, kun rakennuspalikat pysyvät samoina. Design-systeemin käyttö on kuin Legoilla rakentamista: mahdollisuudet ovat rajattomat, mutta peruspalikat eivät muutu.
Onnistunut design-systeemi vaatii kokonaisvaltaista lähestymistapaa, yhteistyötä organisaation ja usein hyvin erilaisten käyttäjäryhmien välillä sekä kärsivällisyyttä ja iteratiivista ajattelutapaa sen toteuttamisessa. Käymme tässä läpi joitakin perusperiaatteita, joiden avulla varmistamme, että kokonaisuus palvelee tavoitteitasi alusta alkaen.
Design-systeemin käyttöönotto voi merkitä sitä, että koko organisaation on muutettava työtapojaan. Siksi kaikki osalliset on vakuutettava siitä, että tämä on vaivan arvoista. On tärkeää ottaa käyttäjät mukaan koko prosessiin ja varmistaa, että kokonaisuus tekee heidän elämästään aidosti helpompaa. Design-systeemi on aina kytköksissä ydinprosessien parantamiseen – tämä vaatii aikaa ja vuorovaikutustaitoja.
Design-systeemi on digitaalisen kokemuksen ajuri. Se ei ole lopputuote, vaan joukko lopputuotteita.
Hyvä design-systeemi ei ole staattinen. Sen on syytä kehittyä brändin, työkalujen ja uusien teknologioiden – ja sitä käyttävien ihmisten – mukana. Design-systeemin tarve huomataan usein vasta silloin, kun sen kehittäminen jo vaatii valtavia järjestelyjä ja vanhoista työtavoista pois oppimista. Siksi design-systeemi hyödyttää usein myös pienempiä organisaatioita: pohja tehokkaalle työskentelylle on hyvä valaa ajoissa.
Design-systeemi sisältää työkaluja (malleja, komponentteja ja ohjeita) suunnittelijoille ja kehittäjille. Vastaavasti sisällöntuottajille erilaiset valmiit pohjat ja moduulit voivat tehdä julkaisuprosessista huomattavasti vaivattomampaa. Design-systeemi voi sisältää myös abstrakteja elementtejä, kuten brändiarvoja ja toimintaohjeita.
Design-systeemin tulee mahdollistaa yhteistyö käyttäjien välillä. Alustana se tulisi rakentaa yleiskäyttöisillä ja laajasti yhteensopivilla teknologioilla.
Kun puhutaan asioista, jotka erottavat onnistuneet suunnittelujärjestelmät muista, joustavuus on listan kärjessä. Yleisohjeena on, että sen tulee heijastua kaikkeen työhön. Tässä on muutamia esimerkkejä.
Design-systeemin kaikki osat on rakennettava modulaarisesti. Näin osia voidaan yhdistellä luovasti sen sijaan, että käytettäisiin pysyviä malleja, joita kaikki joutuvat käyttämään kaikissa tilanteissa.
Hyvä design-systeemi ei ole staattinen ympäristö: sen tulee toimia yhtä hyvin huolimatta siitä, käytetäänkö sitä verkkosivuston tai sovelluksen rakentamiseen. Lisäksi monet yritykset joutuvat ottamaan käyttöön uusia teknologioita nopeallakin aikataululla – siksi design-systeemin on syytä olla olla teknologiariippumaton.
Design-systeemin tulee soveltua niin kehittäjien, suunnittelijoiden kuin sisällöntuottajien käytettäväksi. Käyttökokemusta suunniteltaessa kohderyhmät ja hyvin vaihtelevat tekniset taitotasot on otettava huomioon alusta asti.
Design-systeemin hallinnoinnin tulee olla jatkuvaa tiimityötä, johon osallistuvat paitsi kehitystiimi ja tuoteomistaja, myös sitä päivittäin käyttävät ihmiset.
Jatkuvan viestinnän, palautteen ja koulutuksen varmistaminen on yhtä tärkeää kuin itse järjestelmä. Design-systeemin tulee kehittyä toimintaympäristönsä mukana.
Oletetaan, että yksi alustoistasi on verkkosivusto ja toinen mobiilisovellus – ja vuotta myöhemmin laajennat myös älykelloihin. Tai ehkä kehittäjiesi aiemmin käyttämä teknologia ei enää vastaa tarpeitasi ja se on korvattava toisella. Ehkä sinulla on useita kehitystiimejä, jotka kaikki käyttävät erilaisia front end -kehikoita.
Näiden esimerkkien valossa on helppo ymmärtää, miksi design-systeemin ei ole hyvä olla riippuvainen mistään tietystä teknologiasta. Kaiken design-systeemistä ulos tulevan on sovelluttava mahdollisimman monenlaisiin teknologiaympäristöihin, joiden lopputuotteet voivat olla keskenään hyvinkin erilaisia.
Aalto-yliopiston design-systeemi on hyvä esimerkki siitä, miten tämä filosofia toimii käytännössä. Figmassa olemme määritelleet kaiken typografiasta väreihin ja mittoihin tokeneina. Ne voidaan siirtää JSON-muodossa ja muuntaa sitten esimerkiksi CSS:ksi. Tokenit toimivat siten pohjana sekä komponenttikirjaston suunnittelulle että sen toteutukselle. Toisaalta Storybookista löytyy Reactilla ja tavallisella HTML:llä tehtyjä toteutuksia, ja suunnitelmissa on pian ottaa käyttöön muita tekniikoita.
Design-systeemin käyttöönotto voi kestää tovin – ja se kannattaakin tehdä askel kerrallaan. Sen voi aloittaa esimerkiksi yhdestä tuotteesta ja samalla silti kiinnittää huomiota kaikkiin eri alustoihin.
On tärkeää tehdä selkeä suunnitelma design-systeemin hallinnoinnista. Selkeät roolit sekä molemmin puolin läpinäkyvä ja toimiva viestintä ovat sujuvuuden edellytyksiä. Siirtymäaika voi olla erityisen vaativa, joten siihen liittyvien prosessien suunnittelu on tehtävä huolella.
Varmista, että design-systeemin hallinnointia ryhdytään suunnittelemaan mahdollisimman varhaisesta vaiheesta saakka.
Millainen hallinnointimalli sopii organisaatiollesi? Keiden tulisi avainhenkilöinä olla vastuussa design-systeemin eri osista – ja miten heitä autetaan kohdentamaan työhön tarvittava aika?
Muutoksenhallinnan tulee olla osa suunnitelmaa jo varhaisessa vaiheessa. Miten ja missä kanavissa voidaan parhaiten viestiä design-systeemin rakentamis- ja päivitysprosessista ja varmistaa, että eri käyttäjäryhmien äänet tulevat kuulluiksi päätöksiä tehtäessä?
Analytiikka – sekä kvantitatiivisena että kvalitatiivisena datana – on paras ystäväsi. Varmista, että analytiikka ja käyttäjätutkimus kulkevat mukana alusta asti.
Aalto-yliopisto on yksi Suomen arvostetuimmista yliopistoista, ja kotipesä Pohjoismaiden luovimmille tulevaisuudenlupauksille. Autoimme Aaltoa rakentamaan kokonaisvaltaisen design-systeemin, joka virtaviivaistaa yliopiston eri osastojen ja organisaatioiden digitaalisen kokemuksen.
Hanke oli haastava ja palkitseva, ja sen mahdollisti vilkas yhteistyö meidän, Aallon ja muiden toimistojen (Siilin, Hasan & Partnersin) välillä – yhdessä loimme maailmanluokan kokemuksen sekä opiskelijoille että yliopiston henkilökunnalle. Erityisen ainutlaatuisen projektista teki Aallon Radical Creativity -periaate: yliopiston hengen mukaisesti design-systeemistä haluttiin tehdä inspiroiva ja mahdollisimman suuren luovuuden mahdollistava.
Tutustu design systemiin täällä
Hesburger on kansainvälinen pikaruokaketju, jolla on yli 500 ravintolaa eri puolilla maailmaa. Hesburgerille rakentamamme design-systeemi on jatkuvasti päivittyvä kokoelma komponentteja, leiskoja ja ohjeita, joiden avulla varmistetaan yhdenmukainen käyttökokemus kaikille työntekijöille kaikissa sisäisissä rajapinnoissa. Yhtenäisen UX-logiikan ansiosta työntekijät tarvitsevat vähemmän aikaa eri järjestelmien opetteluun.
Lisäksi suunnitteluperiaatteet, säännöt sekä käyttövalmiit HTML- ja Hiccup-komponentit nopeuttavat uusien työkalujen kehittämistä alustasta riippumatta.
Ota ensimmäiseksi yhteyttä liiketoiminnan kehityspäällikkömme Eeppiin. Keskustellaan tilanteestanne ja katsotaan, miten voimme auttaa yritystäsi kasvamaan ja parantamaan tehokkuutta.
Liiketoiminnan kehityspäällikkö
henri.ranki@taiste.com+358 44 500 1364Onko sinulla projekti, josta haluaisit keskustella?
Liiketoiminnan kehitys-päällikkömme Henri on hyvä henkilö sparraamaan tarpeitasi.
Toimistokoordinaattori
vilma.merikanto@taiste.com+358445568459Onko sinulla kysyttävää tapahtumista, yhteistyöstä jne.?
Toimistokoordinaattorimme Vilma auttaa mielellään.
Harkitsetko hakemista töihin Taisteen? Henkilöstöpäällikkömme Laura voi auttaa sinua kaikissa kysymyksissäsi.
