Huomio: tämä kirjoitus koskee edellistä yritystäni Sivututkaa, jota luotsasin vuosina 2013-2022.
Vuoden 2019 ylivoimaisesti isoin projekti oli oman yritysilmeen ja varsinkin verkkosivujen uudistus. Yli vuoden väkertämisen ja noin 500 työtunnin jälkeen tuli vihdoin valmista. Nyt tuntuu, että kova työ oli kaiken sen vaivan arvoista. Uudet verkkosivut ja yritysilme edustavat täydellisesti tämän hetken sivututkalaisuutta.
Edellinen sivusto ja ilme oli vuoden 2016 peruja. Muutaman kerran verkkosivuja on tuon jälkeenkin jatkokehitetty ja tekohengitetty. Sen verran paljon ovat kuitenkin hommat muuttuneet neljässä vuodessa, että päätettiin laittaa koko paletti uusiksi.
TLDR: Jos kiinnostaa vain vinkit ja uusien sivujen salaisten toimintojen paljastukset, niin scrollaa tästä oikeaan kohtaan.
Brändin uudistukselle perustaa
Koko uudistus pohjautui huomiolle, että mielikuva Sivututkasta ja viesti ulospäin tuntui liian halvalta ja liukuhihnatekijöihin sekoittuvalta. Pelkän verkkosivu-uudistuksen pohjalle tarvittiin väkevämpi brändi ja yritysilme.
Hommassa lähdettiin liikkeelle ruohonjuuritasolta. Mitä iloa meistä on asiakkaillemme? Miten eroamme muista verkkosivupajoista? Miltä kanssamme asioiminen tuntuu?
Seuraavaksi tehtiin unelma-asiakkaiden henkilöprofiilit. Henkilöprofiili tarkoittaa arvailtuja henkilöiden taustoja, tarpeita ja odotuksia. Nämä auttavat viestinnän suunnittelemista ja konkretisoimaan tapauksia, joille palveluja tarjotaan. Hyvä harjoitus mille tahansa yritykselle, suosittelen.
Yritysilmeen uudistus
Muutaman pienemmän brändiharjoituksen jälkeen pääsimme yritysilmeen kimppuun. Homma polkaistiin käyntiin värimaailman suunnittelulla.
Värit
Värien tulisi sopia uudella brändillä hakemaamme fiilikseen. Jotain innostavaa, modernia, luovaa. Muutamia vaihtoehtoja pyöriteltiin ja päädyttiin tummansininen/violetti & pinkin yhdistelmään. Graafinen ilme ja design haluttiin kuitenkin pitää selkeinä ja pelkistettyinä, joten näitä värejä käytettäisiin säästeliäästi valkoisen tai vaalean harmaan hallitessa.
Logo
Capsilla huutava vanha logo heitettiin roskiin. Uuteen logoon tehtiin muitakin pieniä viilauksia ja läiskäistiin uudet värit. Fonttina toimii otsikkofontiksi valitun Gilroy:n bold-leikkaus.
Printtiä ja muuta kamaa
Samalla sykkeellä meni printtimateriaalikin uusiksi. Asiakkaiden ja itsemme iloksi tilasimme myös kustomoidut kahvikupit ja kahvit.
Verkkosivujen uudistus
Emme asettaneet verkkosivujen uudistukselle aikarajaa. Priimaa pitää tulla, ajasta viis. Ideoita heiteltäessä ei kunnianhimosta ollut puutetta, ja useimmat ideat päätyttiin myös toteuttamaan. Tämä näkyi projektiin kuluneessa työajassa, joka jälkikäteen arvioitiin n. 500 työtunnin paikkeille. Tuntihinnoittelun perusteella n. 40:n tonnin projekti siis.
Halusimme tehdä jotain vähän erilaista ja muista pajoista erottuvaa. Digi- ja mainostoimistojen verkkosivuja selatessa erottuminen ei toisaalta tuntunut kovinkaan vaikealta tehtävältä. Lähes jokaisen pajan sivusto ja viesti on kuin kopio toisestaan, vaikka suuresta joukosta toki muutama helmikin löytyy.
Sisältö ensin
Tekstisisältö kirjoitettiin kokonaan uusiksi vastaamaan tämän päivän toimintaa. Tavoitteena oli viestiä pienestä ja luovasta digitiimistä, jonka kanssa on hauska tehdä töitä. Toisaalta myös tinkimättömyyttä haluttiin tuoda esille. Verta, hikeä tai näppäimistöä ei projekteissa säästellä, eikä keskinkertainen työn jälki tule kysymykseen.
Sisällöstä päätettiin karsia vanhojen sivujen verkkosivupaketit. Asiakasprojektimme ovat sen verran uniikkeja keissejä, että eipä niitä jäykkinä pakettiratkaisuna tehdä. Eikä asiakkaat oikein osanneet paketteihin tarttuakaan. Muutakin ajan saatossa kertynyttä sisältöä ja aikansa eläneitä ideoita karsittiin rankasti.
Palveluista jäljelle jäi ydinosaaminen, eli WordPress verkkosivut, WooCommerce verkkokaupat ja ylläpito. Verkkosivujen suunnitteluun liittyy olennaisesti myös graafisen suunnittelun taidot, jotka hoituvat meiltä kätevästi verkkosivupaketin kylkiäisinä.
Sivuston kuvasisältöä varten palkattiin ammattikuvaaja. Oululainen valokuvaaja Tuukka Nygård kuvasi meillä toimistolla yhden päivän, jonka päälle reviteltiin yksi aamu studiolla. Tuukka sai meistä lahjattomista malleista kyllä kaiken irti ja kuvat onnistuivat hienosti.
Kuvien lisäksi talon ulkopuolelta hommattiin mausteiksi animoidut svg-kuvakkeet sekä alaosan fiilisvideo ja videon muokkaus.
Sitten ulkoasu ja toteutus
Verkkosivuista lähdettiin aluksi luonnostelemaan tyylin linjauksia. Alkuun oli hankalaa. Luonnoksia tehtiin 16 kappaletta, jonka jälkeen alkoi tyylin punainen lanka löytyä. Tyylissä tähdättiin suhteellisen minimalistiseen visuaaliseen viestintään, jolla pyritään korostamaan sitä tärkeintä, eli sisältöä.
Tyylin löytymisen jälkeen sivuston ulkoasun ja rakenteen suunnittelu hoitui parissa kuukaudessa muiden asiakasprojektien ohella. Minimalismin vastapainoksi sivuille suunniteltiin tukku pieniä mausteita ja toimintoja tuomaan sopivanlaista fiilista ja laatuvaikutelmaa.
Villien ideoiden ja suunnitelmien toteuttaminen vei rutinoituneenkin kehittäjän mukavuusalueen ulkopuolelle. Lähes joka projektissa sitä oppii teelusikallisen verran uutta, mutta nyt oppia tuli saavillinen. Kaikki ideat saatiin kuitenkin tehtyä ja vieläpä ilman raskaita javascript-koodikirjastoja.
Pohjateeman aloituspisteen päälle kirjoitettiin 3875 riviä CSS:ää, 869 riviä JS:ää, muutama sata PHP riviä ja tottakai hirmuinen määrä HTML:ää.
Uudistunut Sivututka, olkaa hyvät!
Kuten tulikin mainittua, halusimme tehdä jotain tavallisesta poikkeavaa. Sivusto sisältää muutamia pikku yksityiskohtia ja toimintoja, joita ei välttämättä joka digipajan sivustolta löydy.
Tässäpä muutama poiminta testattavaksi:
1/7: Laita luovuutesi testiin piirtämällä kuva sivuston aloitusnäkymässä.
Taidokkain taiteilija käyttää hyväksi eri värejä ja pensselin kokoja. Lähetä lopuksi taideteoksesi meille. Parhaat hyväksytään Hall of Fameen ja kuukausittain palkitaan paras piirros.
Disclaimer: toimii vain läppäreillä ja pöytäkoneilla. Mobiilissa homma olisi ollut liian hermoja raastavaa käyttäjälle.
2/7: Hintalaskurilla voit laskea karkean hintahaarukan projektillesi.
Digitoimistot ovat kovia panttaamaan hintoja. Halusimme hieman helpottaa asiakkaan elämää toimimalla toisin.
3/7: Voit selata ja scrollailla valmistuneita työnäytteitä verkkosivuista oikean sivuston tapaan.
4/7: Idealabrasta löytyy villit verkkosivukonseptit
Eli käytännössä Jussin tylsyyttään suunnittelemia kuvitteellisia verkkosivujen tyylejä. Tässä esimerkiksi idea Ikean verkkokaupan tuotesivusta.
5/7: Spottaa suomalaisten klassikkobiisien sanat Yhteystiedot-sivulta.
Kuinka monta biisiä tunnistat?
6/7: Voisiko yrityksesi hyödyntää webbiä ja digimarkkinointia tehokkaammin?
7/7: Mitä tyypit tekevät töiden ulkopuolella?
Pärstäkuvien takaa voi paljastua vinkkiä. Tarkemmat detaljit löytyy plussaa klikkaamalla.
Tulokset
Uudet verkkosivut ovat olleet kansan ihmeteltävänä tätä kirjoitettaessa 16 päivää. Alla Google Analyticsin dataa tuloksista verrattuna edellisen kuukauden samaan ajanjaksoon vanhalla sivustolla:
- Käyttäjät: 329 vs 625 (+90%)
- Istunnon keskim. kesto: 0m 39s vs 3m 36s (+454%)
- Välitön poistuminen prosenteissa: 72,98 vs 60,69 (-8%)
Palkinnot
Yksi verkkosivu-uudistuksen tavoitteista oli saada palkintokaappiin täytettä.
Sivusto palkittiin varmaankin sen kansainvälisesti tunnetuimmat verkkosivukilpailun, eli Awwwardsin toimesta kunniamaininnalla (Honorable Mention). Vastaava palkinto löytyy parin viime vuoden ajalta vain neljältä muulta tekijältä Suomessa, joten ihan turha palkinto ei ole kyseessä. Awwwardsin kilpailusivu löytyy täältä.
Kunniamaininnan lisäksi Awwwards palkitsi sivuston myös Mobile Excellence -tunnustuksella.
”The Mobile Excellence Award will celebrate work that puts users first, whilst bridging great design with pure performance. It recognises hard work and aims to raise the standards of the mobile web, allowing people to have a superior experience anytime, anywhere.”– Awwwards
Mitä mieltä olet uudistuksesta? Laita palautetta Facebookissa, Twitterissä, Linkedinissä tai Instagramissa.
Seuraava isompi projekti onkin sitten ensimmäisen työntekijän rekrytointi. Tästä tarkemmin keväämmällä