BIBLIOTEKA W KALISZU: Gra z chatbotem

case studies

data publikacji

Jak mieszkaniec Kalisza odkrył Kamerun? Burzliwe losy podróżnika Stefana Szolca-Rogozińskiego posłużyły nam za kanwę edukacyjnej gry internetowej, którą stworzyliśmy w ramach programu „Kultura w sieci” dla kaliskiej Miejskiej Biblioteki Publicznej. W roli narratora obsadziliśmy chatbota, a za dekoracje posłużyły imitujące papier ilustracje – to pomost między rzeczywistym światem bibliotecznych księgozbiorów a cyfrowym wymiarem naszej gry.

Sparing Digital

UX, UI, koncept

nagrody

Awwwards Mobile Excellence, Awwwards Honorable Mention, Nominacja Mobilet Trends 2020

Klient

Miejska Biblioteka Publiczna w Kaliszu

Panowie Programiści

frontend, backend, PM, QA

wyzwanie

01

Znaleźć wspólny język z nastolatkami i obudzić w nich pasję poznawania świata razem ze Stefanem Szolcem-Rogozińskim – zadanie łatwe i trudne jednocześnie. Łatwe, bo bohater godny hollywoodzkiego filmu. Niepoprawny marzyciel, kolekcjoner niezliczonych przygód, odkrywca nieznanych lądów. Trudne, bo choć żył nieco ponad sto lat temu, to czasy dla współczesnych uczniów zamierzchłe, nieznane i za sprawą nudnych lekcji historii mało interesujące. 

 

Dla nas była to więc również przygoda. Tym bardziej że projekt realizowaliśmy od A do Z – od scenariusza po wdrożenie. 

 

założenia

02

Gra nie miała służyć wyłącznie rozrywce, ale również popularyzować wiedzę o Stefanie Szolcu-Rogozińskim i epoce, w której żył. Już na etapie prac koncepcyjnych musieliśmy więc odpowiednio wyważyć proporcje kontekstu historycznego z elementami zabawy, tak by wykreować wirtualne doświadczenie, które zaintryguje odbiorców. 

odbiorcy

03

Główną grupą odbiorców gry są uczniowie ostatnich klas szkół podstawowych i pierwszych klas ponadpodstawowych, tj. młodzież w wieku 13-16 lat. To pokolenie, dla którego świat wirtualny jest nieodzowny elementem świata realnego. W cyfrowym wymiarze budują relacje, z internetu czerpią wiedzę, a w okresie pandemii koronawirusa – przez sieć realizowali też obowiązki szkolne. 

Rozwiązanie - etapy prac

04

Do zespołu pracującego nad grą zaprosiliśmy bibliotekarzy, którzy doskonale znają losy Stefana Szolca-Rogozińskiego i mogli dostarczyć nam wiele ciekawych dokumentów, zachowanych w kaliskich zbiorach. Wspomagał nas też zespół Sparing Digital, zorientowany na tworzenie produktów cyfrowych. 

 

Z powodu pandemii koronawirusa projekt realizowaliśmy w pełni zdalnie – podczas warsztatów korzystaliśmy głównie z Google Meets i Miro, gdzie na wspólnym canvasie, porządkowaliśmy fabułę i pomysły na funkcjonalności.

 

W oparciu o wiedzę merytoryczną klienta przygotowaliśmy rozbudowany schemat scenariusza. Mając na uwadze średni czas zaangażowania, jaki odbiorcy są w stanie poświęcić grze webowej, ograniczyliśmy historię do najważniejszych i najciekawszych wątków, przeplatając ją zadaniami, wymagającymi od gracza skupienia i odrobiny zręczności. Całość scenariusza podzieliliśmy na cztery rozdziały symbolizujące cztery miasta, w których pobyt był przełomowy w podróży Stefana Szolca-Rogozińskiego.

 

Równolegle do prac nad scenariuszem i zakresem, zespół Sparing Digital opracowywał moodboardy i propozycję konceptów kreatywnych. Zespół klienta był natomiast odpowiedzialny za przygotowanie materiałów źródłowych i nagrań podcastów, które odtwarzane w grze pełniły rolę źródła wiedzy i cennych wskazówek dla graczy.

Równolegle do prac nad scenariuszem i zakresem, zespół Sparing Digital opracowywał moodboardy i propozycję konceptów kreatywnych. Zespół klienta był natomiast odpowiedzialny za przygotowanie materiałów źródłowych i nagrań podcastów, które odtwarzane w grze pełniły rolę źródła wiedzy i cennych wskazówek dla graczy.

UI i animacje

05

Koncept bazuje na estetyce papieru, która jest nawiązaniem do bibliotecznych księgozbiorów i historycznych materiałów źródłowych (dzienników, map). To także pomost pomiędzy światem rzeczywistym (papierowymi stronami książki) a wirtualnym (gra internetowa).

 

Wszystkie postacie pojawiające się w grze i elementy scenografii zostały zaprojektowane przez ilustratora, a następnie przeszły przez etap postprodukcji, by jak najbardziej zbliżyć ich fakturę do papieru.

 

Wspólnie z zespołem Sparing Digital zdecydowaliśmy, że podróż oprzemy na mechanizmie horyzontalnego przemieszczania się głównej postaci, za pomocą smooth scrolla. Stworzyliśmy i dostosowaliśmy autorskie rozwiązanie poruszania postaci, aby zapewnić płynny ruchu na wszystkich wspieranych przeglądarkach. 

 

Wszystkie ruchy elementów gry np. roślin, płomieni w lampie naftowej, napotykanych postaci zostały zaprojektowane przez ilustratora, a następnie zanimowane i przygotowane w formie sprite’ów, które zaimplementowaliśmy w grze.

Chatbot

06

Gracz wciela się w Stefana Szolca-Rogozińskiego, który przemieszczając się między miastami, napotyka różnych bohaterów z epoki. Komunikuje się z nimi za pomocą chatbota. Dzięki temu ma bezpośredni wpływ na to, jak ułoży się fabuła podróży. W zależności od tego, który z proponowanych przez chatbota tekstów wybiera, otrzymuje inną odpowiedź, która może ułatwić lub skomplikować jego przygody. Opracowanie dialogów było jednym z ważniejszych wyzwań kreatywnych – wiedzieliśmy, że to, w jaki sposób poprowadzimy narrację, będzie miało ogromny wpływ na długość interakcji nastoletniego odbiorcy z grą. Dzięki chatbotowi kontekst historyczny nabrał lekkości i stał się angażujący.

Mobile First

07

Dla lepszych wrażeń użytkowników korzystających z urządzeń mobilnych stworzyliśmy wersję PWA, dzięki której możliwe jest m.in. odtworzenie gry w trybie pełnoekranowym na ekranach telefonów.

 

Gra powstała w Vue JS z wykorzystaniem najnowszej wersji silnika Phaser.

W kampanii promującej grę wykorzystaliśmy web AR. Po skierowaniu aparatu fotograficznego w telefonie na logotyp Kalisza uruchamia się okno z dialogiem z gry, a użytkownik jest zachęcany do odbycia podróży śladami Stefana Szolca-Rogozińskiego.