Lähtökohta

Asiakkaallamme Roviolla oli kasa sarjakuvia PDF-muodossa, jotka haluttiin saada kävijöiden ladattaviksi Angrybirds.com-sivustolle.

“We have a bunch of comics in PDF format that we would like to have on our site”
– Deneb Pettersson, Rovio, August 2022

Tausta ja tavoitteet

Pelkän tavallisen ja tylsän tiedostolistauksen sijaan halusimme kunnioittaa Angrybirds.comin alkuperäistä konseptia: Angrybirds.com on enemmän kuin tavallinen verkkosivusto. Se on viihdyttävä ja immersiivinen kokemus, joka juhlistaa Angry Birdsin leikkisää brändiä. Parhaimmillaan Angrybirds.com on niin mukaansatempaava, että käyttäjä melkein unohtaa selailevansa verkkosivuja.

Konseptin keskiössä on paitsi brändin juhlistaminen myös interaktiiviset toiminnallisuudet ja fanien osallistaminen. Konseptin mukaisesti halusimme, että vuorovaikutteisuus ja leikkisyys näkyvät kaikkialla sivustolla — eli myös kirjojen ja sarjakuvien lataamisessa. Tästä ajatuksesta syntyi Angry Birds Comics Library.

Redbot ohjaa kävijää eteenpäin kirjastossa

Angrybirds.comia varten rakennettu Chatbot Red ohjaa kävijää eteenpäin täyttämään lomakkeen kirjastokorttia varten. Red ohjeistaa käyttäjää ja kommentoi käyttäjän toimia sarkastisella äänensävyllään.

Vaaditun kirjastokortin pääasiallinen tarkoitus on valita sisältötyypit, joista käyttäjä on kiinnostunut. Lisämausteena käyttäjä voi myös valita itselleen nimen painamalla päivitä-kuvaketta, jolloin järjestelmä tarjoaa hänelle automaattisesti generoidun nimen. Lopputuloksena käyttäjä saa kirjastokortin ja pääsee selaamaan ladattavia kirjoja ja sarjakuvia.

Tekninen toteutus

Digitaalinen kirjasto on toteutettu React-sovelluksena, joka käyttää taustajärjestlemänä toimivaa WordPressiä datalähteenään. Erilaiset animaatiot ja käyttäjäinteraktiot on toteutettu Framer Motion -animaatiokirjastolla.

Alakulmassa käyttäjää ohjeistava Red-lintu on toteutettu Lottie-animaatioteknologialla täysin räätälöitynä JavaScript-toteutuksena yhdessä Rovion kanssa.

Vieraile sivulla