Janne Yliruusi: Design system – avain ketterään käyttöliittymien suunnitteluun

Verkkiksen Lead UI Designer Janne Yliruusi johdattaa sinut tässä kirjoituksessa design systemin saloihin. Jannen jutun luettuasi tiedät mikä design system on ja miksi siitä on valtava apu erilaisten käyttöliittymien suunnittelussa. Päästetään Janne ääneen:

Moikka! Olen Janne, työskennellyt nyt Verkkokauppa.comissa noin neljä vuotta. Tällä hetkellä tittelini on Lead UI Designer, ja minulla on kaksi keskeistä toimenkuvaa. Toisessa roolissani olen Verkkiksen design systemin Sataman pääsuunnittelija, ja toisessa vastaan siitä, että firman käyttöliittymät pysyvät ajantasaisina sekä ovat tyyleiltään ja toiminnaltaan johdonmukaisia. Tämä kaikki tapahtuu tietenkin yhteistyössä muiden Verkkiksen taitavien suunnittelijoiden ja kehittäjien kanssa. Tässä kohtaa on hyvä ehkä mainita, että mielestäni Verkkiksessä on erittäin hyvä tekemisen meininki, ja olen viihtynyt firmassa mainiosti! Vapaa-ajalla suurin intohimoni on musiikki ja siitä kirjoittaminen. Käy ihmeessä vilkaisemassa kirjoituksiani sivustolla Pienemmät purot.

Mikä design system on ja mihin sitä tarvitaan?

Hieman kulunut, mutta toimiva vertauskuva design systemille on vanha kunnon Lego-metafora.

Design system on kuin valtava, pieniä osasia sisältävä Lego-setti, josta on mahdollista rakentaa suurempia ja monimutkaisempia kokonaisuuksia. Kuten Lego-paketti, myös design system tarjoaa läjän valmiita palikoita, joilla on ennalta määritetyt mitat, ulottuvuudet ja värit. Legojen mukana tulee myös yksityiskohtaiset ohjeet siitä, kuinka rakentaa palikoista vaikkapa hieno sairaala, ja samaan tapaan myös design systemit ovat huolellisesti dokumentoituja. Tässä kohtaa on myös hyvä ymmärtää, että kuten Legoista voi rakentaa monia asioita, joita Legon suunnittelijat eivät olleet ennakoineet, myös design systemien osasia voi soveltaa monipuolisesti uusiin ja ennalta arvaamattomiin käyttötarkoituksiin.

Lego-vertaus ei kuitenkaan pysty selittämään kunnolla yhtä design systemien keskeistä ominaisuutta, joka erottaa ne vaikkapa graafisille suunnittelijoille tutuista tyylioppaista. Tyyliopas sisältää tyypillisesti jonkin yrityksen tai yksittäisen tuotteen käyttämät värit, typografian, logon ja ehkä joitakin toistuvia graafisia elementtejä. Tyyliopas siis palvelee suunnittelijaa, mutta design systemit menevät pidemmälle.

Jotta design system ei olisi vain tyyliopas, sen täytyy kattaa koko prosessi suunnittelijan pöydältä kehittäjän kautta tuotantoon asti. Design system tarjoaa paitsi peruselementit, joita me Verkkiksellä kutsumme fundamenteiksi, kuten värit, typografiamääritykset, mittajärjestelmän ja breakpointit (eli kuinka design mukautuu eri kokoisille näytöille) myös loppukäyttäjälle tarkoitettuja komponentteja sekä suunnittelijoille että kehittäjille. Komponentit ovat oikeastaan se koko jutun pihvi, jota kaikki muut elementit tukevat.

Esimerkkejä Verkkokauppa.comin DS-komponenteista.

Mitä nämä komponentit sitten ovat? Komponentit design systemeissä ovat tyypillisesti yksinkertaisia (ja välillä ei niin yksinkertaisia) uudelleen käytettäviä käyttöliittymäelementtejä. Aivan jokainen design system tarjoilee esimerkiksi kokoelman erilaisia nappeja, valintaruudun (checkbox) ja tekstikentän. Nämä komponentit suunnittelija pystyy kirjaimellisesti pudottamaan suunnittelutyökalunsa (meillä käytetään Figmaa) työpöydälle, ja kehittäjä puolestaan pystyy liittämään koodatun vastineen (meillä käytetään Reactia) muun koodin sekaan. Tästä päästäänkin ketterällä aasinsillalla design systemien hyötyihin.

Miksi design systemin rakentaminen kannattaa?

Ensimmäinen syy on asia, johon olen jo aiemmin tekstissä viitannut; johdonmukaisuus. Kun suunnittelijoilla on valmiina käytössään perusrakennuspalaset komponenttien muodossa ja tilan käyttö on määritelty design systemissä, on lopputulos kuin itsestään linjakkaan yhdenmukainen. Ja kun tähän yhdistetään se seikka, että myös kehittäjillä on vastaavat samalta näyttävät ja samoin käyttäytyvät komponentit käytössään, niin myös tuotantoon asti päästään ilman kompromisseja. Samalla design system myös helpottaa suunnittelijoiden ja koodareiden yhteistyötä; onhan heillä yhteisten komponenttien ja niihin liittyvän termistön myötä yhteinen kieli. Ja voin kertoa, että näin ei aina ole ollut!

Toinen keskeinen syy rakentaa design system on nopeus. Design systemin rakentaminen on tietenkin niin rahallinen kuin ajallinen investointi, mutta siinä vaiheessa kun jaetut valmiit komponentit ovat käytössä niin suunnittelu kuin asioiden tuotantoon vienti nopeutuu valtavasti. Verkkiksessä design systemiä työstää minun lisäksi kolme kehittäjää (joista yksi tällä hetkellä äitiyslomalla, terkkuja sinne!). Teemme kiinteää yhteistyötä Customer Experience -tiimin kanssa, jonka tehtävä on rakentaa asiakkaille näkyvää ns. julkiwebiä eli sitä varsinaista Verkkokauppa.comia, jossa sinäkin luultavasti olet käynyt ostoksilla. Työn jako on pääpiirteittäin sellainen, että DS-tiimi tarjoaa ja ylläpitää yksinkertaisia komponentteja ja kaikkia niihin liittyviä tyylejä, kun puolestaan CX-tiimi rakentaa niistä monimutkaisempia kokonaisuuksia, kuten vaikkapa tuotekortteja, jotka esittelevät asiakkaille tuotteita ympäri sivustoa. Tuotekortti pitää sisällään nämä DS-tiimin tarjoamat komponentit: Box, Button, Ribbon, Price, Image, Rating, Bullet List, Favourite Button.

Valokeilassa Tuotekortti. Tuotekortti rakentuu lukuisista erillisistä DS-komponenteista. Kuvassa vain osa Tuotekorttiin liittyvistä komponenteista ja niiden varianteista.

Tärpit tutustumisen arvoisista design systemeistä

Kirjoituksen alussa mainitsin ohimennen, että Verkkiksen design systemin nimi on Satama. Nimi on allekirjoittaneen keksimä ja syntyi aikoinaan Verkkokauppa.comin toimistolla Jätkäsaaressa, kun aloittelin systeemin rakentamista. Katselin ikkunasta Länsisatamaan ja nimi tuntui oivalliselta vaihtoehdolta design systemille. Onhan design system satamien lailla eräänlainen vilkas infrastruktuurin risteyskohta, jonka kautta erilaiset digitaaliset elementit liikkuvat lopullisiin sijoituspaikkoihinsa. Sanasta “satama” tulee itselleni mieleen myös jonkinlainen turvapaikka ja tämäkin on soveliasta: Satama on Verkkokauppa.comin käyttöliittymä-designin koti.

Kuuluisia design systemejä, joista mekin Verkkiksellä olemme ammentaneet oppia, ovat esimerkiksi IBM:n Carbon, Atlassianin Atlassian Design System, Googlen Material Design (joka on itse asiassa enemmän ”design-kieli” kuin varsinaisesti design system) ja Alibaba Groupin Ant Design. On yleistä, että merkittävä osa design systemien resursseista on avoimesti saatavilla internetissä, ja kaikki edellä mainitut systemit ovat myös verkossa tutkittavissa. Tämä on erinomainen tapa aloittelijoille ja miksei myös kokeneemmille suunnittelijoille ja kehittäjille tutustua design systemien periaatteisiin ja käytäntöihin. Verkkiksen design system, Satama, ei toistaiseksi ole vielä avoimesti saatavilla verkossa, mutta ehkäpä jonain päivänä!

– Janne

Lauri Lavanti: Ei pelkkää koodin kirjoittamista

Lauri työskentelee Verkkiksen IT-osastolla Team Leadina yhdessä ohjelmistokehitystiimeistämme. Taustaltaan Lauri on ohjelmistokehittäjä ja ennen Team Leadin rooliin hyppäämistä, hän toimi ohjelmistokehittäjänä Verkkiksellä muutaman vuoden ajan. Laurin vapaa-aika kuluu pääasiassa lasten kanssa touhutessa, lisäksi hän tykkää pelaamisesta ja pyöräilystä.

Aiemmissa elämissäni olen ollut konsulttina ja muutamissa muissa tuotetaloissa töissä. Nyt olen viihtynyt Verkkiksellä jo muutaman vuoden kehittämässä niin kutsuttua julkiwebiä, eli sitä www.verkkokauppa.com -osoitetta, missä sinäkin todennäköisesti olet käynyt ostoksilla. Verkkikselle päädyin, kun olin etsimässä uutta työpaikkaa ja huomasin ilmoituksen LinkedInissä. Verkkis oli ollut jo pitkään yksi lempikaupoistani, ja ajatus sen kehittämisestä tuntui erittäin houkuttelevalta.

Pintapuolisesti katsottuna Verkkis saattaa vaikuttaa samanlaiselta työpaikalta kuin mikä tahansa muukin moderni ohjelmistotalo, mikä on muuten itsessään jo ihan hyvä saavutus kaupan alan yritykseltä. Monilta osin Verkkis onkin tyypillinen ohjelmistotalo: noudatetaan Scrumia (soveltuvilta osin), huolehditaan koodin laadusta, tiimeillä on autonomiaa, apua saa aina kun sitä tarvitsee ja työyhteisö on erittäin mukava. Kuitenkin jos minulta kysyttäisiin, mikä tekee Verkkiksestä hyvän työpaikan, en vastaisi mitään noista. Mielestäni Verkkiksestä tekee hyvän työpaikan se, että täällä on mahdollisuus vaikuttaa.

Ohjelmistokehitys alkaa suunnittelusta

Tarkoitan Verkkiksen kontekstissa vaikuttamisen mahdollisuudella sitä, että kun joku jossain keksii uuden hienon ominaisuuden, joka hänen mielestään olisi hyvä toteuttaa, kehitystiimi pääsee vaikuttamaan ominaisuuden suunnitteluun hyvin aikaisessa vaiheessa.

Usein heti sen jälkeen, kun alustava business case on kirjoitettu auki, aukeaa devaajille ensimmäinen vaikuttamisen mahdollisuus. Tällöin kehitystiimi osallistuu uuden ominaisuuden toteutuskelpoisuuden arviointiin. Verkkiksellä ymmärretään erittäin hyvin, ettei teknisen toteutuksen onnistumismahdollisuuksia pysty arvioimaan ilman teknistä asiantuntijaa. Verkkiksellä teknisenä asiantuntijana toimii pääasiassa toteuttava taho eli devaustiimi.

Käytännön tekemisenä tämä tarkoittaa, että parhaimmassa tapauksessa kehittäjä pääsee ensin itse omin käsin auttamaan uuden toiminnallisuuden määrittelyssä ja lopulta myös toteuttamaan toiminnallisuuden käytännössä. Eikä toiminnallisuus katoa mihinkään mustaan laatikkoon välissä, vaan sen matkaa pääsee seuraamaan siihen asti, että se tulee omalle pöydälle.

Vaikuttamisen mahdollisuudet ilmenevät myös siten, ettei kehittäjän ole pakko osallistua määrittelytyöhön. Kehittäjä voi halutessaan pysyä taka-alalla suunnitteluosuudessa ja loikata kunnolla kelkkaan vasta speksausvaiheen jälkeen. Esimerkiksi tuotelistauksissa, kuten kategorioissa, käytetään meillä työkalua, jonka yhteydessä ei yleensä ole mahdollista tehdä hakua, pelkästään listata tuotteita. Kehitystiimin ideoinnin seurauksena siinä on sisäänrakennettuna myös hakuominaisuus, jonka ansiosta käyttäjä pääsee rajaamaan tuotelistausta kaikin mahdollisin tavoin.

Kuvat: Teemu Riihelä

Tee työtä, jolla on merkitys

Itselleni mahdollisuus osallistua jo suunnitteluvaiheeseen, on ollut erittäin tärkeää viihtymiseni ja työn merkityksellisyyden kannalta, sillä haluan työlläni olevan selkeä ja hyvä tarkoitus. Verkkiksen parhaita puolia on, että täällä siitä pääsee huolehtimaan heti alusta alkaen. Vaikuttamalla alusta asti, pystyy myös hyvin estämään tiimin autonomian kaventumista, joka on yksi omista tavoitteistani Team Leadinä. Pidän esimerkiksi huolen, että teknologiavalintoja ei tehdä ilman tiimiä.

Vaikuttamismahdollisuudet eivät toki ole itsestäänselvyys. Suurin osa vaikuttamisesta on loppujen lopuksi odotusten ja riskien hallintaa, kun esiin tuodaan teknisiä rajoitteita ja mahdollisuuksia. Toimiva kommunikaatio on tässä avainasemassa. Ei siis kannata rakentaa itselleen liikaa ennakkoluuloja bisnesjargonista, vaan sukeltaa ennakkoluulottomasti oman työpaikan domainiin. On tärkeää jättää kehitystiimille valta ja vastuu päättää siitä, miten liiketoiminnallinen tavoite saavutetaan. Se luo tiimille oikean mahdollisuuden vaikuttaa päivittäiseen tekemiseensä, mikä puolestaan lisää monen kohdalla työn mielekkyyttä.

Markus Rajala: Personoidun asiakaskokemuksen rakentaminen verkkoasiointiin

Markus on ollut Verkkiksen asiakkaana vuodesta 2005 ja nykyisin Verkkiksellä töissä jo toista kertaa. Customer Value Managerina Markus vastaa Verkkiksen asiakkuuksien kehittämisestä, jossa häntä innostaa erityisesti alati muuttuva kuluttajakäyttäytyminen ja teknologian hyödyntäminen asiakkaiden eduksi. Vapaa-ajallaan Markus on intohimoinen urheilija, jonka vahvasti kasvanut urheilu -kategoriamme on yllättänyt positiivisesti.

Pitkäaikaiset asiakassuhteet ovat yksi Verkkiksen 30-vuotisen historian perustoista, jonka aikana asiakkaamme ovat kasvaneet yrityksemme mukana ja löytäneet valikoimastamme kerta toisensa jälkeen uusia tuotealueita vastaamaan tarpeitaan ja intohimojaan elämänsä käänteissä ja mullistuksissa. Monet uudet tuotealueet ja -kategoriat ovatkin lähtöisin intohimoisten asiakkaidemme pyynnöstä ja toiveista laajentaa valikoimaamme.

Kivijalkaliikkeen etuina on aina ollut myyjän ja asiakkaan välinen henkilökohtainen suhde, jossa asiantunteva myyjä osaa ratkoa asiakkaan haasteen kysymällä oikeat kysymykset sekä tarjoamalla oikeat vastaukset. Tutun luottomyyjän luo on ollut aina helppo palata, kun apua on tarvittu esimerkiksi kameran objektiivihankinnoilla. Verkkokaupan edelläkävijänä yksi tärkeimmistä ratkaistavista haasteista onkin aina ollut, kuinka viedä vastaava asiointikokemus myös digitaalisiin kanaviin ja tarjota asiakkaalle uusia tapoja tehdä ostoksia kotisohvalta tai mökin terassilta kellonajasta riippumatta.

Data apuna yksilöllisen palvelun tarjoamisessa

Ostosten siirtyminen verkkoon on kasvattanut odotuksia myös digitaaliselle palvelutasolle. Asiakkaat haluavat löytää tuotteet helposti, inspiroitua verkossa ja saada tukea hankintansa aikana juuri oikeanlaisen tuotteen löytämiseksi. Ilman dataa ja oikeutta hyödyntää sitä, olisimme jatkuvasti takaa-ajavassa asemassa asiakkaan odotuksiin nähden. Tänä päivänä yritysten kilpailuetuna ei ole pelkästään datan määrä tai laatu, vaan kyvykkyys hyödyntää kerrytettyä tietoa palvelemaan kaikkia osapuolia.

Datalla tarkoitetaan kaikkea verkossa tapahtuvasta kanssakäynnistä kerättävää tietoa, jonka avulla kykenemme kehittämään palveluidemme toimintaa ja esimerkiksi personoimaan verkossa esitettävää sisältöä asiakkaan tarpeiden tai käyttäytymisen perusteella. Harvalle on selvää, että verkkokauppamme näyttää erilaiselta jokaiselle asiakkaalle ja sivustolla esitetty sisältö perustuukin pääsääntöisesti aiemman käyttäytymisen pohjalta kerättyyn tietoon. Vastaavaa toimintaa jatketaan monikanavaisesti hallinnoimissamme medioissa, jossa asiakas pyritään kohtaamaan aina yksilönä – juuri hänen tarpeitaan palvellen.

Tämä onkin hyvä esimerkki siitä, miten datan avulla parannamme asiakkaidemme kokemusta verkkokaupassamme. Koska valikoimastamme löytyy nyt jo liki 90 000 tuotetta, juuri asiakasta parhaiten palvelevien tuotekategorioiden ja tuotteiden esittäminen ilman dataa muuttuu hyvin hankalaksi. Koska jokaisen asiakkaan tarpeet ovat yksilöllisiä, vastuullemme jää luoda paras mahdollinen käyttökokemus kaikille tasapuolisesti.

Markus on aloittanut Verkkiksellä vuonna 2011 varastolla ja työskennellyt myös Helsingin myymälässä asiakaspalvelutehtävissä. Opintojen ja muutaman mutkan jälkeen Markus teki paluun Verkkikselle vuonna 2020. Kuvat: Teemu Riihelä

Luottamuksen arvoista datan keräystä

Puhuttaessa datasta, sen keräämisestä ja käsittelystä, nousee keskusteluissa myös usein esiin yksityisyydensuoja seurantaa ja tietojen keräämistä vastaan. Verkkikselle yrityksenä data tuo mukanaan suuren vastuun läpinäkyvyyden ollessa yksi arvojemme kulmakivistä. Yrityksenä pyrimme myös olemaan mahdollisimman selkeitä siinä, millaisiin asiointikokemusta parantaviin tekijöihin dataa hyödynnämme. Annamme asiakkaillemme myös mahdollisuuden kieltäytyä tietojensa keräämisestä ja käsittelystä siltä osin, kun se lain puitteissa on asiakkaan mahdollista tehdä.

Tänä päivänä asiakkaat ovat tarkkoja luovuttamistaan tiedoista ja he haluavat saada vastinetta antamalleen luottamukselle meitä kohtaan. Koska valtaosa kerätystä ja hyödynnettävästä datasta on peräisin asiakkailtamme, niin pienintä mitä datan avulla voimme tehdä on toimia läpinäkyvästi ja luottamusta herättävästi ollen aina asiakkaan puolella.

Henri Ylönen: Rohkeus kehittyä organisaation voimavarana

Henri toimii Verkkiksen yritysmyynnissä teknisenä yritysmyyjänä vastaten HP-brändimyynnistä. Ennen Verkkisuraansa Henri on toiminut myynnin, markkinoinnin ja tapahtumatuotannon moniosaajana HP:n sekä monien muiden globaalien ja kansallisten yritysten parissa. Henrille paras tapa irtautua arjesta on luonnossa liikkuminen vaeltamisen tai uuden harrastuksen, metsästyksen, merkeissä tai musiikin parissa.

HUH! Kohta puolitoista vuotta takana Verkkisuraa ja matkan varrelle on mahtunut yhtä sun toista. Aloitin Verkkiksellä täysin uudessa roolissa vastaten HP brändimyynnistä yritysasiakkaillemme. Oliko aloitusajankohta helpoin pandemian keskellä? Ei! Oliko työtehtävät ja toimenkuva täysin selkeä organisaatiossamme työni aloittaessani? Ei! Onko universumi kaikin mahdollisin ja mahdottomin keinoin yrittänyt tehdä työstäni haastavaa? Kyllä! Näistä kysymyksistä pääsemmekin aiheeseen, jota haluaisin käsitellä omassa Verkkisläisen kynästä -kirjoituksessani.

Verkkiksellä halu kehittää prosesseja sekä työskentelyä on täysin omaa luokkaansa. Oman urani aikana edistystä on tapahtunut huimasti niin tiimimme kuin omastakin aloitteestani. Yritysmyynti on kasvanut piskuisesta tiimistä reilun kahdenkymmenen rautaisen ammattilaisen osastoksi. Verkkiksen B2B palvelee vuosittain yli 55 000 yritysasiakasta aina mikroyrityksistä suuriin konserneihin.

Uudistumiskykyisyys kilpailuvalttina

Nykyinen markkina sekä maailmantilanne on osiltaan johtanut tähän, että yrityksien täytyy uudistaa toimintamallejaan ja elää vahvasti ajan hermoilla. Onhan Verkkis päässyt jo kuitenkin iältään nuoren keski-ikäisen tasolle, eivätkä ne liikkeet aina ole niin ketteriä kolmenkympin rajapyykin saavuttaneilla muualla kuin yrityksen virkistyspäivillä. Monet prosessien kehityshankkeet ovat menneet maaliin, osaa hiotaan vielä käyttöönoton aikana ja uusia on viikoittain työn alla. Joskus mennään ryminällä väärään suuntaan, mutta se on elämää ja liiketoimintaa, eikä kaikki voi aina mennä oppikirjan mukaan. Tästä lisää tuonnempana. Olen vuosien saatossa opiskeluiden ja työhistoriani aikana rakentanut itselleni mottoa, ”Ei ole ongelmia, on vain tilanteita ennen ratkaisua.” Uudessa positiossa aloittaneena olen päässyt soveltamaan tätä hyvin useasti, mutta koen sen olevan osaltaan juuri tämän työn suola ja sellainen asia, joka nostaa Verkkokauppa.comia työyhteisönä mielestäni hyvin korkealle.

Kuvat: Teemu Riihelä

Kehitysideoista konkreettisiin toteutuksiin

Joskus nuoret keski-ikäisetkin yllättävät ketteryydellään ja rohkeudellaan. Olen saanut kohtalaisen vapaat kädet kaikenlaiseen oman roolin ja myynnin kehittämiseen osastollamme ja olenkin lähtenyt ilman kellukkeita syvään päätyyn koettaen omia ja yrityksemme kapasiteettia. Teimme vastikään omasta aloitteestani ja esihenkilöni suostumuksella myynnillisen kampanjan, jossa lisäsimme valikoitujen tuotteiden tuotetietoihin ajanvarauslinkin kalenteriini. Tätä kautta pyrimme saamaan luotua mahdollisimman paljon kontakteja sekä varmistamaan siirtymä kontakteista kaupaksi. Tämäkin on vain yksi asiakasrajapintaan saakka näkyvä käytännön esimerkki, miten lähdemme kokeilemaan erilaisia toimenpiteitä myynnin kehittämiseksi. Kokeilu ei tuottanut haluttua lopputulosta, mutta opimme erittäin paljon asiakkaiden ostokäyttäytymisestä ja pääsemme jalostamaan alkuperäistä ideaa tehokkaammaksi ja toimivammaksi.

”Iloinen mieli korvaa puuttuvan älyn.” Tätä lausahdusta olen käyttänyt lukuisia kertoja itselleni ja joskus myös tiimikavereille sattuneissa kömmähdyksissä, ja kuten eräs leijonalegendakin on todennut, olemme menneet eteenpäin ja mennään jatkossakin. Tiedänkö vieläkään kaikkea mikä kuuluisi tai voisi kuulua toimenkuvaani? En. Olenko kärryillä tai lähelläkään kärryjä kaikista toimintamalleista? En. Haluanko kehittää itseäni ja olla mukana kehittämässä yrityksen prosesseja? Kyllä! Haluamme jatkossakin olla Suomen suosituin verkkokauppa ja kaupan alan pioneeriyritys, siksi pidämme kehityshenkisyydestämme visusti kiinni tulevaisuudessakin. Odotan innolla mitä jatkuva kehitys tuo tullessaan ja miten voimme yksilöinä sekä tiiminä tehdä entistäkin parempaa tulosta ja nostaa Verkkiksen Yritysmyyntiä maailmankartalle!

Tutustu lisää Verkkiksen yritysmyyntiin ja astu B2B-taloon sisälle.