Caverion Smart City – Käsityönä kuvitettu interaktiivinen kaupunki osallistaa käyttäjän ja näyttää samalla, miten lähitulevaisuuden älykaupunki rakentuu

Lähtökohta:

• Mikä kaupunkien rooli on yhteiskunnassa ja millainen rooli niillä on kestävän kehityksen kannalta?
• Kuinka tämä voidaan havainnollistaa ymmärrettävällä ja konkreettisella tavalla?

Rakennettu ympäristö tuottaa jopa 40 % EU:n hiilidioksidipäästöistä. Rakennetussa ympäristössä tehtävät energiansäästötoimenpiteet ovat avainasemassa, mikäli haluamme saavuttaa hiilineutraaliuden ja hillitä ilmastonmuutosta.

Samaan aikaan länsimaissa vietetään n. 90 % kaikesta ajasta sisällä rakennuksissa. Erilaiset toimenpiteet onkin toteuttava tinkimättä rakennusten olosuhteista (esim. sisäilma) ja käytettävyydestä. Käyttäjäystävällinen ja hyvin toimiva rakennettu ympäristö luo hyvinvointia meille, rakennusten käyttäjille.

Tarvitsemme älykkäitä rakennuksia, infrastruktuuria ja teollisuutta, jotka yhdessä muodostavat älykaupunkeja. Ne ovat mukana kestävämmän tulevaisuuden rakentamisessa.

Tässä kehityksessä Caverionilla on suuri ja tärkeä rooli. Caverionin asiakkaat voivat luottaa Caverionin osaamiseen rakennusten, infrastruktuurin, teollisuuslaitosten ja teollisten prosessien koko elinkaaren ajan: hankekehityksestä projekteihin, tekniseen huoltoon ja kunnossapitoon, kiinteistöjohtamiseen sekä asiantuntijapalveluihin. Caverionilta löytyy ratkaisut älykaupunkien luomiseen.

Miten älykaupungin vastuullisuudesta, rakennuspilareista ja mahdollisuuksista voitaisiin kertoa Caverionin asiakkaille, sidosryhmille sekä Caverionin omille työntekijöille mahdollisimman koukuttavasti ja kiinnostavasti? Tämä oli haaste, jonka caverionilaiset, eli tuttavallisemmin caverit, meille heittivät.

Karttapohjainen älykaupunki vaatii tarkkaa strategiatyötä ja erinomaisen luovan idean

Palvelun suunnittelu käynnistyi helmikuussa 2020, kun caverit esittivät meille haasteen ja ideansa jonkinlaisesta karttapohjaisesta palvelusta.

Aloitimme työn mittavalla benchmarkkaus-kierroksella. Erilaisten toteutusvaihtoehtojen vahvuuksia ja heikkouksia punnittiin rinta rinnan.

Konseptin määrittelyvaiheessa tehtiin mm. seuraavat ratkaisut:

• Prioriteettina on vaikuttava visuaalinen, tarinallinen ja osallistava elämys
• Palvelu voidaan suunnitella desktop-versio edellä, mutta sen tulee olla käytettävissä myös mobiililaitteilla
• Suunnittelun lähtökohta oli kokemuksellisuus
• Palvelun tulee olla monikielinen ja sisältöjen tulee olla paikallisesti päivitettävissä
• Palvelun tulee olla laajennettavissa uusilla tarinoilla ja kaupungin tulee elää myös sesonkien mukaan.

Luovan ratkaisun ytimessä oli luoda kokemuksellinen, kilpailijoista erottuva, simcitymäinen ja tietorikas sivusto. Tämä vaati ratkaisua, jossa yksittäisten älyrakennusten ja infrastruktuurin tarinat pystyttiin kertomaan tarkasti ja interaktiivisesti. Samaan aikaan kartan piti kommunikoida yhtenäisen älykaupungin muodostumista.

Niinpä ratkaisun ytimessä on rakennettu ympäristö ennen ja jälkeen älyratkaisujen lisäämistä. Käyttäjä pääsee suorittamaan kartalta yksittäisten kiinteistöjen, infran ja teollisuuslaitoksen modernisointeja. Modernien kiinteistötekniikan ja teollisuuden ratkaisujen lisäämisen jälkeen kartalle ilmestyy entistä älykkäämpää infrastruktuuria, rakennuksia ja teollisuutta. Kartta on visuaalisesti kiinnostava ja se toimii myös valikkona tarinoille.

Valitussa ratkaisussa on sopiva tasapaino kattotarinan ja yksityiskohtaisten kiinteistöteknisten, infran ja teollisuuden ratkaisujen välillä. Lisäksi pienet easter eggit, kuten todellisuudesta tutut Caverionin huoltoautot älykaupunkiin parkkeerattuina, piristävät kokonaisuutta.

Monivaiheisessa suunnittelutyössä tutkimme erilaisia vaihtoehtoja niin teknisen, tarinallisen kuin visuaalisen toteutuksen suhteen. Osallistimme caverit workshopeissa ideoimaan, luomaan ja valitsemaan mahdollisimman kiinnostavia älykaupunkitarinoita. Samalla piirsimme erilaisia keinoja, joilla tarinat voitaisiin kertoa. Tarinoille suunniteltiin modulaarinen rakenne, joka tekee niistä käyttäjälle selkeitä, mutta mahdollistaa silti vaihtelevan tarinankerronnan.

Suunnitteluvaiheessa ideoitiinkin useita tarinoita, joista toimistokiinteistö, ruokakauppa, etähallintakeskus, elokuvateatteri, sairaala ja voimalaitos päätettiin toteuttaa ensimmäisessä vaiheessa. Tarinoita varten haastateltiin Caverionin asiantuntijoita, minkä jälkeen tarinat kirjoitettiin ja suunnittelimme niiden kuvituksen sekä valitsimme interaktiot.

Määrittely- ja suunnittelutyössä totesimme parhaaksi toteuttaa sivuston seuraavilla ratkaisuilla.

Informaatioarkkitehtuuri

Jotta älyrakennusten tarinat voidaan kertoa riittävän yksityiskohtaisesti, pääkartalta siirrytään sisään itse rakennuksiin. Rakennusten sisällä käyttäjät voivat itse tehdä toimenpiteitä, joilla tehdään rakennuksista ja infrasta älykkäitä, esimerkiksi vaihtaa jäähdytysjärjestelmä sellaiseen, joka mahdollistaa myös lämmöntuotannon, optimoida voimalaitoksen toimintaa tai sujuvoittaa liikenneratkaisuja entistä turvallisemmiksi. Rakennusten sisällä navigoidaan sopiva tiedonjyvänen kerrallaan, jotta vältytään informaatioähkyltä.

Kun käyttäjä on suorittanut tarinan tehtävät, rakennuksen kuvitus päivittyy näkyvästi, esim. toimistorakennus saa aurinkopaneelit.

Käsityönä piirretty isometrinen grafiikka

Benchmarkkasimme kymmeniä eri kartta- ja kuvitustyylejä – minkä jälkeen lopulta loimme tarinankerrontaan ja pääviesteihin sopivan tyylin. Kuvittaja Ville Salervolta tilattu uniikki karttapohja on erottuva, hauska ja kiinnostava. Isometrisyys tuo kaupunkiin syvyyttä.

Animaatiot ja transitiot

Animaatiot tekevät älykaupungista elävän: autot ja ihmiset liikkuvat sekä vesi virtaa joessa, kuten oikeassa kaupunkikuvassa. Animaatioita on sekä staattisia että koodilla toteutettuja. Useat samanaikaiset animaatiot herkästi kuormittavat selaimia, joten animaatioiden kohdalleen saaminen vaati useita testauskierroksia.

Karttanäkymä on toteutettu mahdollisimman pakkaamattomana ja se sisältää png-, webm-, gif-, svg- ja CSS-animaatioita. Sekatekniikalla on saatu aikaan paras mahdollinen selaintuki suorituskyvystä tinkimättä. Esimerkiksi selaimille, jotka eivät tue webm-videota on kuitenkin fallbackina pakattu mp4-video.

Upean isometrisen kartan päälle laitetut animoidut elementit, jotka menevät rakennusten “taakse”, luovat onnistuneesti mielikuvan elävästä ja moniulotteisesta kaupungista, joka ei ole kuitenkaan suorituskyvyltään mahdottoman raskas.

Single-Page Application

Vue.js-sovelluskehyksen päälle rakennettu sivusto latautuu käyttäjälle yhdellä kertaa, joten kartalta tarinoihin siirtyessä ei tule sivulatauksia. Kokemus säilyy yhtenäisenä. Alasivujen sisällöt ja kartalla muuttuvat elementit kuitenkin ladataan vasta tarinan aukaisun yhteydessä, jotta kaikkia resursseja ei tarvitse ladata ensimmäisen sivulatauksen yhteydessä. Ensimmäinen sivulataus säilyy siten nopeana.

Sivuston analytiikka on kuitenkin määritetty niin, että SPA-toteutuksesta huolimatta sivusto näyttäytyy Google Analyticsiin kuin tavallinen sivusto. Valittu tekninen ratkaisu ei siis heikennä mitattavuutta, vaan esimerkiksi eri tarinat näyttäytyvät analytiikassa sivulatauksina.

WordPress ja Gutenberg

Tarinat on rakennettu modulaarisesti WordPressin Gutenberg-editoria hyödyntäen. Niinpä sisällönsyöttö on helppoa ja sivusto on vapaasti laajennettavissa sisältötiimin voimin. Älyrakennusten jokainen tarina-slide on oma Gutenberg-lohkonsa ja eri lohkot ovat vapaasti kopioitavissa ja monistettavissa. Myös interaktiivisia lohkoja, kuten monivalintakyselyjä ja ennen/jälkeen call-to-actioneita, on helppo luoda uusia ilman teknistä osaamista.

Palvelu on monikielinen. Eri kieliversiot voivat poiketa toisistaan sisällön laajuudessa. Maat voivat siis tilata omia rakennuksiaan ja kaikkien maiden ei tarvitse lokalisoida kaikkia haluamiaan tarinoita.