Atena Kustannus on vuonna 1986 perustettu yleiskustantamo, jonka listoilla on lähes tuhat kirjailijaa. Kustantamo julkaisee viitisenkymmentä uutta kauno- ja tietokirjaa vuodessa. Toimme kustantamon ilmeen ja toiminnallisuuden verkossa 2020-luvulle, samalla nostaen kustantamon tunnettuutta alan isompiin ja vanhempiin toimijoihin verrattuna.
Atenan vanha verkkosivusto ja -kauppa oli toteutettu Magentolla, joka koettiin todella kankeaksi päivittää sekä käyttää. Myös visuaalinen ilme verkossa oli päässyt kulahtamaan. Kirjojen myyntialustan vaihtoa oli suunniteltu kustannusalalle räätälöityyn toteutukseen, joten Atenalla tuli tarve laittaa myös markkinointisivusto uusiksi ja tuoda se nykypäivään.
Uudistuksen tavoitteena oli kohottaa kustantajabrändiä ja kasvattaa myyntiä. Sivuston haluttiin nostavan kirjat ja kirjailijat paremmin esille, muun muassa suosittelemalla kävijöille mielenkiintoisia uutuuksia sekä ajankohtaisia kirjoja. Kirjailijoille haluttiin viestiä Atenan olevan nuorekas, selkeä ja raikas kumppani.
Uudistukseen lähdettiin yhteisellä aloitustyöpajalla johon osallistui asiakkaalta pieni projektitiimi ja Dudelta suunnittelija sekä kehittäjä. Päivän aikana kirkastettiin uudistuksen tavoitteet, tutustuttiin paremmin puolin ja toisin sekä selvitettiin nykyisen sivuston ongelmakohtia.
Kilpailijakartoituksen aikana tuli selväksi, että kirja-alalta löytyi ainoastaan muutamia sivustoja jotka ovat laadukkaita. Tältä pohjalta oli hyvä lähteä suunnittelemaan Atenan uuden verkkosivuston ratkaisuja sekä sivukarttaa. Puolin ja toisin syntyneitä ideoita hahmotettiin rakentamalla sivustoa post-it lapuista, kunnes koko projektitiimi oli tyytyväinen syntyneeseen suunnitelmaan.
Työpajan lopuksi sovittiin tarkemmasta aikataulusta ja työnjaosta. Päivän aikana syntyi yhteinen käsitys mitä tehdään, miten tehdään ja milloin tehdään.
Inspiroivan aloituspalaverin jälkeen suunnittelijan oli helppo ryhtyä työhön. Laajaa sekä monipuolista kirjavalikoimaa haluttiin korostaa ja tuoda sivustolle elävyyttä. Kirjojen kansille päätettiin antaa tilaa nousta esiin keventämällä sivuston väritystä. Tehosteväreiksi valikoitui Atenan logosta johdettu kullankeltainen sävy ja muissa materiaaleissa käytetty ruusunpunainen. Raikkaat sävyt ja paikoin rikottu asettelu tuovat sivustolle kaivattua nuorekkuutta.
Ulkoasusuunnitelmien hyväksymisen jälkeen kehittäjätiimi tarttui työhön, ensimmäisenä haasteenaan siirtää lähes tuhat kirjaa ja yli 600 kirjailijaa liitekuvineen Magentosta uudelle WordPress-sivustolle. Tätä varten teimme Magentossa tietojen vientiin muutoksia ja WordPressiin työkalun, joka muutti vientitiedostossa olleet tiedot uuden sivuston mukaiseen muotoon. Automatisoimalla tietojen siirto, vältyttiin monen päivän manuaalisesta puuduttavalta työltä.
Teknisen puolen saavutettua vaiheen jossa sivusto oli jo käyttökelpoinen, asiakkaan projektitiimi pääsi testaamaan suunnitelmista toimivaksi herännyttä kokonaisuutta. Vielä tässä vaiheessa esimerkiksi sivuston tärkeään ominaisuuteen, kirjahakuun, keksittiin toiminnallisuuksia joilla siitä saataisiin paremmin käyttäjiä palveleva. Pienet muutokset sivustoon onnistuivat nopeasti samalla, kun kehittäjätiimi viimeisteli kokonaisuutta.
Uuden sivuston julkaisu oli kaikille jännittävä päivä, sillä samalla julkaistiin myös Atenan uusittu verkkokauppa. Hyvän ennakkosuunnittelun ansiosta kaikki sujui ongelmitta ja uudistettu verkkosivusto sekä -kauppa julkaistiin onnistuneesti.
Atenan valikoimassa on lähes tuhat kirjaa, joten niiden lisäämisestä ja tietojen päivittämisestä tuli tehdä mahdollisimman helppoa. Kiinnitimmekin erityistä huomiota hallintapaneelissa kirjavalikoiman ylläpidon suoraviivaisuuteen. Myös muiden sivujen päivittämisestä tehtiin helppoa hyödyntämällä modulaarista lohkorakennetta, jonka ansiosta Atena saa luotua itse nopeasti tarvitsemiaan kampanjasivuja.
Sivuston julkisella puolella kirjojen selailusta tehtiin käyttäjäystävällinen mahdollistamalla listauksen suodattaminen useilla erilaisilla ehdoilla ja poistamalla turhat sivulataukset. Listaus toteutettiin käyttäen modernia Vue.js kirjastoa ja WordPressin omaa REST -rajapintaa, jonka ansiosta lista toimii jouhevasti.
Vanhalla sivustolla samasta kirjasta saattoi olla neljäkin eri versiota omilla sivuillaan. Tähän haluttiin muutos, joten saman kirjan ja sen eri formaattien esittelyt kerättiin yhdelle sivulle. Kirjan esittelystä on nopeasti nähtävissä formaatit joissa se on saatavilla, luonnehdinta kirjasta, arviot, mahdollinen video ja esittely kirjailijasta.
Kävijöitä haluttiin törmäyttää uusiin, yllättäviinkin, kirjasuosituksiin heidän selaillessa sivustoa. Jokaisen yksittäisen kirjasivun ja kirjailijan esittelysivun loppuun lisättiin kategorioiden sekä avainsanojen perusteella muodostettavat automaattiset suositukset. Toteutimme myös mahdollisuuden esittää kuratoituja suosituksia osana lohkorakennetta.
Kunnon hakumoottori on toimivan sivuston sydän. Sen takia toteutimme reaaliaikaisen haun, joka etsii relevanteimmat tulokset kirjoista, kirjailijoista ja avainsanoista. Hakutulokset saadaan muodostettua laajastakin sisältömäärästä nopeasti erillisen hakuindeksin perusteella, jonka avulla tulokset myös järjestetään niiden kiinnostavuuden perusteella.
Kun sisältöä löytyy satoja sivuja ja tapahtumien aikaan samanaikaisia kävijöitä lukuisia, on nopeudelle suotava ajatus. Jotta sivuston käyttö ja kirjojen selailu olisi aina saumatonta, rakensimme edistyneen välimuistituksen jonka ansioista kävijän ei tarvitse odotella. Sivuston kuvat latautuvat vasta heti ennen kuin niitä todellisuudessa tarvitaan, joka nopeuttaa latausaikaa entisestään. Tästäkin huolimatta sivustolle tehdyt muutokset tulevat näkyviin välittömästi.
Rakenteen ja ulkoasun suunnittelu oli ensiluokkaista, teknisessä toteutuksessa saimme enemmän kuin olimme uskaltaneet unelmoida. Yhteistyökumppanina Dude on joustava ja helposti lähestyttävä. Heidän asiantuntemukseensa voi luottaa. Tulemme tekemään yhteistyötä myös jatkossa. Vahva suositus.
Review by Hanna-Leena Soisalo, Tiedotus- ja markkinointivastaavaheinäkuu 2020
Jos tuntemukset ovat kutakuinkin tuota luokkaa, niin täytäthän oheisen lomakkeen ja olemme teihin pikimmiten yhteydessä.