Freelancer-suunnittelijoita löytyy pelkästään tästä maasta jo niin monia ja niin eri tasoisia, että tilaajan on vaikea valita sopiva tekijä tai ylipäätään luottaa siihen, että saisi aina sitä mitä on tilannut. Prosesseja harvoin avataan julkisesti freelancereiden maailmassa, joten toivon, että tämän kirjoituksen luettuasi saisit jotain kuvaa siitä, miten se homma oikeasti etenee sopimukseen pääsemisen jälkeen. Tai ainakin pitäisi edetä. Myös niiltä asiakkaalle näkymättömiltä osin.

Työn toteuttajan on aina pystyttävä vastaamaan asiakkaan tarpeisiin, tai hommaan ei ole järkeä lähteä mukaan. Mielellään kuitenkin ylittämään odotukset ottamalla huomioon asioita, joita asiakas ei ole välttämättä osannut ottaa itse edes huomioon. Se on sitä kuuluisaa hyvää asiakaspalvelua ja luo hyvää luottamussuhdetta.

Henkilökohtaisesti minulle jäisi todennäköisesti hyvin vajaa fiilis, jos en saisi tuoda asiantuntemustani esiin projektissa myyntiä kehittävillä ratkaisuilla tai auttaisi loppuasiakasta näkemään asioita uusin silmin tai oivaltamaan tehokkaampia tapoja markkinoida yritystään. Sama fiilis kieltämättä jää silloin, jos homma menee täysin asiakkaan sanelemana, eikä suunnittelijaa ole tarve kuunnella.

Huomionarvoisena heti tähän alkuun, että otan kirjoituksessani kantaa nimenomaan verkkosivun suunnitteluosuuteen, en niinkään tekniseen tekemiseen, joka on sitten aivan asia erikseen.

Suunnittelijalla on suuri rooli, että verkkosivuprojekti onnistuu kampittamaan sudenkuopat jo alkuvaiheessa. Siksi hyvä prosessi pitää sisällään useita vaiheita.

Blogauksen ensimmäinen osa sisältää seuraavat vaiheet

1. Tutustuminen asiakkaan liiketoimintaan ja toimialaan
2. Aloitustapaaminen
3. Suunnittelun aloittaminen ja rakenteiden hahmottelu, sekä näkymien esittely

Let’s go!

1. Tutustuminen asiakkaan liiketoimintaan ja toimialaan

Kaikki alkaa siitä, että tutustutaan asiakkaan liiketoimintaan mm. nykyisen verkkosivuston kautta tai asiakkaan toimittaman briiffin kautta. Asiakkaalta tiedustellaan hieman lähimmistä kilpailijoista ja mitä heillä on tehty oikein tai mitä ei missään nimessä haluta tehdä uudistuksen yhteydessä. Näiden pohjalta on usein hyvä lähteä jo aloitustapaamiseen, kun on kosketuspintaa pohjalla.

2. Aloitustapaaminen

Aloitustapaamisessa käydään läpi äärimmäisen tärkeitä asioita, joita ilman uudistus ei yksinkertaisesti onnistu parhaimmalla mahdollisella tavalla. Tässä tärkeimmät:

Tavoitteet

Miksi uudistetaan? Mitä tavoitellaan? Syitä voi olla mm. kohderyhmien laajeneminen, brändiuudistus, vanhan sivuston hitaus, vanhanaikaisuus tai ulkoasu on väljähtynyt. Kaikki tehtävät päätökset täytyy tukea sovittuja tavoitteita.

Kohderyhmät

Kenelle uutta sivustoa tehdään? Mitä pitää ottaa suunnittelussa huomioon, että uudistus onnistuu kohderyhmät huomioiden?

Sivukartta ja konversiopisteet

Rakennetaan sivukartta, joka tukee tätä ajatusmallia. Sivukartta antaa molemmille osapuolille suunnan myös järkevää sisällöntuotantoa ajatellen. Sivukartta pitää sisällään koko sivuston vähintään pääpiirteisen rakenteen, eli päänavigaation ja niiden alempia tasoja. Näin myös suunnittelijalla on parempi käsitys mitä näkymiä täytyy suunnitella tai mitä toimintoja pitää ottaa huomioon.

Mietitään hieman mallikäyttäjiä tai käyttäjäpolkuja. Kuinka tehokkaasti saadaan käyttäjä tekemään mm. myyntiäsi edistävä päätös? Mitä enemmän käyttäjä joutuu klikkailemaan ja vaeltamaan sivuillasi, sitä nopeammin ajetaan myös käyttäjä sivuilta pois, todennäköisesti kilpailijalle.

Toiminnot

Pitkälti tekninen osa-alue, mutta tärkeä myös suunnittelijan ottaa huomioon. Mitä erilaisia vimpaimia tai toiminnallisuuksia halutaan mukaan, jotka on suunniteltava jollain asteella mukaan?

Ilme

Käydään läpi ilmettä, oli se vanha tai uudistuva. Nostetaan tarvittaessa asioita mm. saavutettavuuteen liittyvissä asioissa esiin. Nykyaikaiset verkkosivut olisi hyvä olla kaikille saavutettavat.

3. Suunnittelun aloittaminen ja rakenteiden hahmottelu sekä näkymien esittely

Kun palaverit on pidetty ja suunta on kaikille kirkastettu, on aika aloittaa suunnittelutyö muistiinpanojen pohjalta. Homma alkaa perinteisesti siitä, että aukaisen Figman ja käynnistän “Project Starter Kitin”, eli erilaisista ns. tyylittömistä sivuston komponenteista ja sisältölohkoista tehdyn pohjan, jolla nopeutan työn aloitusta. Komponentit päivittyy suunnittelutyön edetessä vastaamaan aina asiakkaan brändiä ja ilmettä. Tämä on myös hyvä keino tehostaa kehittäjien työtä. Ja nämä tietenkin elää aina asiakkaan tarpeiden mukaan, tarvittaessa niitä lisätään tai poistetaan.

Alkuun kuitenkin yleensä suunnitellaan muutama näkymä, esimerkiksi etusivu ja jokin erikoisempi alasivu ja/tai laskeutumissivujen tyyli. Nämä katsellaan ensimmäisessä tapaamisessa läpi, jolloin saadaan fiilis ollaanko oikealla suunnalla (yleensä onneksi näin käy!). Pieniä viilauksia ja korjauksia aina tulee ja ne kuuluvat toki asiaan.

Homma jatkuu ja näkymiä valmistuu lisää, jolloin pidetään välitsekkejä. Asiakas tirauttaa muutaman kyyneleen, kun ei ole osannut odottaa näin upeaa settiä. Tässä vaiheessa näkymien sisältölohkot siirretään useammin käytettäviksi komponenteiksi, kun hyväksyntä näihin on saatu asiakkaalta.

Jaa häh, niin mitkä ihmeen sisältölohkot?

Nykyään yritysten verkkosivustot rakennetaan pitkälti lohkoperiaatteella. Tämä tarkoittaa käytännössä, että asiakkaalle suunnitellaan ja rakennetaan valmiiksi tyyliteltyjä lohkoja, joita lisäilemällä sivulle voi asiakas rakentaa tyhjästä tarpeensa mukaan erilaisia sisältösivuja, joka ei vaadi kehittäjiltä tai suunnittelijalta apua. Asiakkaan erilaiset toiveet otetaan aina huomioon, kun näitä suunnitellaan.

Erilaisten lohkovaihtoehtojen määrä vaihtelee n. 10-40 välillä, riippuen sivuston laajuudesta. Mitä enemmän lohkovariaatioita, sitä enemmän sivusto toki kustantaa. Mutta myös sitä laajemmin voit sisällön suuruudesta riippuen vaikuttaa siihen, miten jaksotat sivun sisältöä käyttäjälle selkeäksi. Näin sivustosta saadaan ennenkaikkea pitkäikäinen, mutta myös erilaiselle sisällölle taipuva ja moderni ratkaisu.

Mitäpä osa 2 pitää sisällään?

Nyt on pakko laittaa tämän kirjoituksen ensimmäisen osan osalta pillit pussiin ja palastella asioita hieman jatkoa varten, ettei tästä pääse muodostumaan aivan mammuttimaista kirjoitusta.

Seuraavassa osassa avaan hieman seuraavia prosesseja:

1. Figmaan rakennettu tyyli- ja komponenttikirjasto (jota tässäkin jo hieman sivuttiin)
2. Klikkailtava Figma-prototyyppi ja välipalaverit projektitiimin kanssa
3. Viimeiset korjaukset
4. Handoff kehittäjille

Kiitos kun jaksoit lukea! Jos kiinnostaa verkkosivujen (tai brändi-identiteettien) suunnittelu, niin ota ihmeessä yhteyttä sivun alaosasta löytyvällä lomakkeella.

Peace and love.