Maanantaina 10.10.2022

Digitoimisto Duden seitsemäs oma verkkosivu-uudistus – katso projektin läpivienti

Digitoimisto Duden verkkosivut on pistetty uusiin kuosiin. Vuosimallin 2022 sivusto sisältää selkeyttä ja tyyliä, dark/light-moden ja paljon muuta. Lue mitä uudistus pitää sisällään.

Tämä kirjoitus saattaa sisältää vanhentunutta tietoa, sillä se on julkaistu yli 2 vuotta sitten.

Tähän alkuun voisi vitsailla suutarin lapsen jalkineista, mutta anekdootti on niin kulunut, että jätänpä väliin – etenkin kun meidän nulikoilla on ollut aina jalkineet. Otimme ja menimme ja uudistimme jälleen koko roskan, sivuston jota parhaillaan katselet. Oma sivustoprojekti on aina väistämättä erilainen, sillä siihen kulminoituu koko osaaminen, elämäntyö, intohimo ja asenne. Sen haluaa tehdä mahdollisimman hyvin, koska sitä katsovat asiakkaat, yhteistyökumppanit, kilpailijat, kollegat ja sukulaiset, eli käytännössä porukka joka on jollain tavalla vaikuttimena siihen tuleeko leipää pöytään vai ei.

Liian usein näkee sivustoja, jotka eivät herätä mitään ajatuksia tai välttämättä edes vakuuta osaamisesta. Samaa fiilistä en ikinä haluaisi omille sivuille.

Ajatuksia Duden sivustouudistuksesta vuodelta 2017

Julkaisimme brändi- ja sivustouudistuksen marraskuussa 2020. Syksyyn 2021 mennessä ajatukset olivat hahmottuneet tulevan osalta. Olimme huomanneet, että vuoden 2020 sivustolla olimme menettäneet jotain. Keskityimme tuolloin liikaa etusivulla palvelukattauksen avaamiseen ja tärkeimmät eli referenssit jäivät ikävästi paitsioon. Koimme myös, että jotain siitä kuuluisasta ”Dude-hengestä” jäi puuttumaan uudistuneen copyn myötä. Mietimme ensin, että ajan puutteen vuoksi freesaamme vähän etusivua palveluiden osalta tiiviimmäksi, mutta päätimme lopulta lähteä miettimään kaikkea puhtaalta pöydältä.

Ennen kuin keskitytään tähän uudistukseen, on aika katsoa hieman taaksepäin. Aiemmista sivustouudistuksistamme on kirjoitettu kattavat bloggaukset:

Kyseessä on yksi mukavimmista, mutta myös omalla tavallaan hankalimmasta synnytysprosessista. Jälleen on aika peilata firmaa, nostaa asioita ja henkilöitä framille, mutta ennen kaikkea keskittyä tuomaan ulos suomen kielellä esille asiat, jotka ovat asiakkaalle ja ostajille tärkeitä.

Avasimme suunnitteludokumentin marraskuussa 2011 ja seuraavaksi jaan joitakin huomioita suoraan siitä.

Miksi uudistus?

  • Etusivun rakenne – täynnä tummaa tekstiä vaalealla taustalla, vahva ”wall of text” -efekti, jonka yleinen fiilis liian valkoisen tunkkainen ja pelkistetty, etenkin mobiilissa meni tukkoon
  • Etusivun lähdön järjestys – ”me” ja palvelumme liikaa keskiössä, haluamme jatkossa korostaa enemmän asiakkaitamme ja työnäytteitämme
  • Sivuston tekstit – miten saatiinkin aikaan viimeksi näin kapulaa? Halusimme välttää jatkossa kapulakieltä kuin ruttoa. Pois pitkät ja vaikeasti ymmärrettävät ilmaisut, takaisin vähän sitä tuttua dudemaista rokkia mistä viimeksi vahingossa luovuttiin
  • Koodipohja oli auttamattoman vanhentunutta, koska käytimme vuoden 2020 uudistuksessa vuoden 2019 koodipohjaa. Gutenberg oli vuonna 2019 vasta tuloillaan, joten editorin tyylit toimivat vähän sinne päin, eikä esimerkiksi blogin kirjoittaminen ollut enää kovin miellyttävä kokemus.
  • Sivustolla oli paljon asioita kovakoodattuna, jolloin lennosta asioiden kokeileminen ja muokkaaminen oli vaikeaa
  • Palvelukattaus kuntoon. Käytännössä palveluitamme ovat verkkosivut ja siihen liittyvä ylläpito sekä brändi- ja ilmesuunnittelu. Aiemmin jaoimme verkkosivupalvelun kahtia ja liitimme UX/UI-suunnitteluun kaiken visuaalisen. Nyt halusimme vielä selkeämmin jakaa verkkosivut ja UI-suunnittelun samaan ja eriyttää brändi- ja ilmesuunnittelun kokonaan omaksi palvelukseen.

Brändi ja ilme

Löimme lukkoon jonkin verran vuoden 2020 uudistuksessa hahmottuneita brändiin ja ilmeeseen liittyviä asioita, kuten brändivärejä. Virallisia ”yön sinisiä värejä” taitettiin jo brändiuudistuksen jälkeen vähän enemmän harmaan ja mustan kuin sinisen suuntaan. Uusina väreinä palettiin tuotiin Petrol ja luovuttiin vanhasta Cobalt Bluesta ja Midnight Bluesta, joissa oli räväkkäämpää sinistä mukana. Minttu sen sijaan pidettiin kiinteänä osana brändiväripalettiamme jatkossakin.

Sivustomme mukailee jo vakiintunutta brändimme ilmettä, jota näkee muunmuassa tarjouksissa ja ohemateriaaleissa.

Sisältö ja uudistunut copywriting

Päätimme ensimmäisenä sisällöstä. Pidimme itsellemme aloitustyöpajan, jossa kasasimme sivustolle sivukartan aivan samoin kuin teemme asiakkaillemmekin verkkosivuja suunnitellessa.

Seuraavaksi varasimme alkukeväälle 2022 Himokselle reissun, jossa keskittyisimme pelkästään sisällön tuottamiseen. Tätäkin varten avasimme oman sisältödokumentin, jonne lähdimme ”brändiretriitillä” kasaamaan sivukartan pohjalta jokaiseen lohkoon tekstejä. Lohko kerrallaan työstimme viestiä kahden päivän ajan.

Teimme lopulta sisällöllisesti aika radikaalejakin päätöksiä, pudotimme muunmuassa kokonaan palveluesittelyt pois etusivulta. Sen sijaan kiteytimme mitä olemme ja mitä teemme suoraan ensimmäiseen tekstiin. ”Digitoimisto, joka osaa hommansa” ja alle ingressissä kaikki se mitä verkkosivut ja brändi pitävät sisällään. Tämän jälkeen suoraan referensseihin. Tällä konseptilla mennään 2022.

Katse menneisyyteen

Menneisyyttä ei pitäisi kokonaan unohtaa, sillä Duden sielu on lähtöisin niistä alkuperäisistä ajatuksista, joiden vuoksi yritys ylipäätään perustettiin.

Halusimme ensin vähintäänkin katsoa millaisia tekstejä aiemmilta sivuilta löytyi, mikä oli hyvää ja huonoa, minkä jätimme pois milloinkin ja mistä syystä ja mitä henkeä voitaisiin tuoda takaisin. Firman tone of voice asetettiin viimeksi brändiuudistuksessa, mutta halusimme hieman tuoda takaisin alkuperäistä dudemaista rentoutta, joka on osa brändiämme. Jonkinlainen hybridimalli on nyt nähtävissä vuonna 2022 ja siitä eteenpäin.

Muistatko vielä nämä?

Kasasimme arkistoistamme vanhojen sivustojen tekstit vuosittain, ”Dude.fi historia” -dokumenttiin. Suurinta osaa ei voinut enää käyttää, koska asiat ovat luonnollisesti kehittyneet. Joitakin hyviä lausahduksia sieltä kuitenkin tarttui mukaan, jotain sellaista joka on oikeasti edelleen mainiota, mutta olemme syystä tai toisesta jättäneet myöhemmin kokonaan pois sivustouudistuksesta.

Aikataulu

Aikataulusuunnitelmia tuntuu hassulta lukea näin jälkeenpäin. Aikataulut ovat oman saitin suhteen aina ylioptimistiset. Tällaisia mietittiin keväällä:

  • Leiskat 3 viikkoa
  • Tekstit 1-3 viikkoa
  • Koodi ~1 kuukausi
  • Käsitellään omaa sivustouudistusta maanantaisin kuten muitakin projekteja
  • Huhtikuussa sisällöt ja leiskat
  • Toukokuussa koodi
  • Toukokuun lopulla julkaisu (Ennen lomia, eli kesäkuun lopulla julkaisu)

Ilmeeni, kun kuulen aikatauluista.

Tämä vuoden 2022 oma sivustouudistus otti aikaa koodin aloittamisesta (huhtikuu 2022) yhteensä valmistumiseen (lokakuu 2022) noin puoli vuotta. Jos ajanjakson aloittaa siitä kun ensimmäiset ajatukset kehittyivät mustaa valkoiselle loka-marraskuussa 2021, on projektin läpivienti ottanut aikaa tällä(kin) kertaa noin vuoden. Voisi siis sanoa, että tämä sivustouudistus on ollut karkeasti ajatellen vuoden projekti.

Pistää muistelemaan, mitenhän aikataulu on mennyt aikaisempina vuosina, esimerkiksi kolmen edeltävän uudistuksen osalta…

Brändiuudistuksen aikaan koronavuonna 2020 tulikin yht’äkkiä kiire, kun vuoristoradan kärry lähti vyörymään mäkeä alas ja piti saada samaan aikaan uusi sivusto pihalle uusien projektien alkaessa. Siitä syystä sivusto leivottiin kasaan muutamassa viikossa vanhaa pohjaa hyödyntäen.

Tätä edeltävä vuoden 2019 uudistus saatiin ulos ennen kesälomia noin puolessa vuodessa. Vuoden 2017 sivustoa rakennettiin noin vuoden. Kyllä se haastavaa on saada jossain järkevässä ajassa ulos, kun asiakasprojektit painaa päälle.

Tekijät ja mitattu ajankäyttö

Mittaamme nykyään kaikkien projektien kannattavuutta Clockifylla, joten teimme saman myös oman sivuston kohdalla.

Projektiin kului ainakin seitsemän eri ihmisen työaikaa ja projektia koodasi viiisi ihmistä. Käytännössä rahallisesti tämä sivusto olisi laskutettavana työnä noin 30 000 euroa + alv työmäärällisesti.

Uuden sivuston ominaisuudet

Sitten se asian pihvi, eli mitäs uutta täällä nyt onkaan.

Showreel-video

Meidän on pitkään tarkoitus ollut panostaa videoihin ja ensimmäisenä lähdimme kehittelemään Showreel-videota Flux Productionsin kanssa. Mikäli et videota etusivulta vielä katsonut, näet sen kokonaisuutena tästä:

Musiikki: Ferus Melek – Kobun

Videoita saatetaan nähdä sivustolla jatkossa enemmänkin, joten pistä kirjanmerkkeihin!

Gutenberg-lohkojen koko potentiaali käytössä

Olemme toteuttaneet lohkot ACF-Gutenbergillä vuodesta 2021 ja nyt sama yhtenäistetty tekniikka on käytössä vihdoin myös omalla sivustollamme. Suomeksi tämä tarkoittaa sitä, että kaikki mitä näkyy sivuston puolella, näkyy myös hallinnan puolella. Lohkoja on helppo muokata ja esikatsella. Moottorina tuotekehityksemme kärjet Air-light ja Air-blocks.

Dark/light mode

Olemme panostaneet saavutettavuuteen erityisellä pieteetillä käytännössä koko olemassaolomme ajan, mutta tällä kertaa pistimme piirun verran paremmaksi. Uusi sivusto ottaa huomioon käyttäjän järjestelmätasolla asettaman väriteeman, mutta lisäksi käyttäjä voi vaihtaa väriteemaa itsekin sivuston oikeasta alanurkasta, täältä näin:

Uudistuneet referenssit

Olemme viime aikoina lisänneet monta uutta referenssiä, kuten Sofi Oksanen, Otava Oppimisen Palvelut ja Alpaknitwear.com. Jokaisesta 38 referenssistämme löytyy sekä tumma, että vaalea versio.

Selkeyttä tyylikkyydellä

Sivuston ulkoasu yhdistää jo olemassaolevia brändielementtejä. Liukuvärejä on jo pidempään löytynyt muunmuassa tarjouksemme kansilehdestä, mutta sivustolle niitä tuotiin myös teksteihin mukaan. Isoissa otsikoissa brändifonttina toimii edelleen virallinen brändifonttimme Circular, mutta pienempiin otsikoihin ja leipäteksteihin tuotiin pidempään käytössämme ollut Inter.

Mitä mieltä?

Meidän mielestä tästä tuli aika hyvä! Uusin levyhän on se paras. Kerro ihmeessä palautetta uudistuksesta vaikkapa Twitterissä tai Instagramissa.