Atena

Kustantamon sivusto, jollaista ei ole ennen nähty

Atena Kustannus on vuonna 1986 perustettu yleiskustantamo, jonka listoilla on lähes tuhat kirjailijaa. Toimme kustantamon ilmeen ja toiminnallisuuden verkossa 2020-luvulle, samalla nostaen kustantamon tunnettuutta alan isompiin ja vanhempiin toimijoihin verrattuna.

Siirry sivustolle

Perustettu

1986

Mitä teimme

  • Verkkosivut
  • UX/UI suunnittelu
  • Ylläpito

Lähtökohdat

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.

Tavoitteet

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.

Rakenteen ja ulkoasun suunnittelu oli ensiluokkaista, teknisessä toteutuksessa saimme enemmän kuin olimme uskaltaneet unelmoida.

Hanna-Leena Soisalo, tiedotus- ja markkinointivastaava yrityksestä Atena

Työpajalla tehokas alku projektille

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.

Prosessi & ratkaisu

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.

Sivuston ominaisuudet

Helppo päivitettävyys

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.

Käyttäjäystävällinen selailu

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.

Laajat kirjaesittelyt

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.

Monipuoliset suositukset

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.

Kattava haku

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.

Nopeutta välimuistituksella

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.

Asiakkaan palaute

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.

Hanna-Leena Soisalo, tiedotus- ja markkinointivastaava yrityksestä Atena

Katso myös nämä