Teemu Paakkunainen · KTM · KaarinaMarkkinoija, joka vie ideat tuotantoon asti.

Tehtävä

Kuutamokiipeily 26.9.2026 tarvitsi kampanjan, joka sitoo yhteen ketjun neljä puistoa. Pelkän mainoksen sijaan rakensimme pelin: jokaisella puistolla on oma ratansa, tulostaulu on julkinen ja parhaat pelaajat voittavat lippuja. Voittaja valitsee itse puiston.

Mitä tein

• Määrittelin konseptin, ratojen luonteen, vaikeustason ja palkintomekaniikan.
• Johdin tekoälyavusteista kehitystä kahden avustajan kanssa ja sovitin niiden työn yhteen.
• Testasin oikeilla laitteilla ja jäljitin viat, kuten mobiiliohjauksen, joka vapautui kun sormi liukui napin reunan yli.
• Perustin tietokannan, vein pelin palvelimelle ja julkaisin kaksi kieliversiota WordPressiin.
• Suunnittelin mainoskuvan Photoshopissa ja pystytin kampanjan Metaan.

Julkaisun jälkeen

• Ensimmäiset päivät oikeiden pelaajien kanssa näyttivät sen, mitä automaattitestit eivät voi näyttää. Siirsin tuloksen lähetyksen ja ohjeet omiin ruutuihinsa, jolloin vieritys poistui kaikista 40 mitatusta näyttökoosta.
• Tulostaulu näyttää nyt jokaisesta nimimerkistä vain parhaan tuloksen, eikä samaa suoritusta voi lähettää kahdesti.
• Ähtäri lisättiin neljänneksi palkintopuistoksi, koska siellä järjestetään oma tapahtuma eri päivänä. Tietokannan tarkistussääntö laajennettiin ennen julkaisua.

Tehtävä

Jokainen seikkailuratojen asiakas hyväksyy turvallisuusohjeet ennen radoille menoa. Aiemmin se tehtiin paperilla kassalla. Tavoite oli lomake, jonka voi täyttää puhelimella jo kotona tai puiston QR-koodista neljässä puistossa ja kolmella kielellä.

Mitä tein

• Vedin puisto- ja kielikohtaisten lomakkeiden kehitystä Turkuun, Tampereelle, Ähtäriin ja Vierumäelle suomeksi, englanniksi ja ruotsiksi.
• Lomake tarkistaa iät ja pakolliset hyväksynnät ennen lähetystä: aikuinen ja enintään neljä alaikäistä samalla kertaa.
• Vahvistusnäkymä näytetään kassalla, ja jokainen lähetys tallentuu WordPressiin sekä puistokohtaiseen sähköpostiin.
• Lähetysongelmien syy löytyi: reCAPTCHA v3 antoi oikeille asiakkaille jopa 0,00 pistettä. Suojaus poistettiin, ja lähetykset alkoivat toimia.

Säilytysaika ja automaattinen poisto

• Lomakkeilla kerätään myös lasten nimiä ja syntymäaikoja. Sellainen tieto ei saa jäädä järjestelmään ikuisesti vain siksi, ettei kukaan muista poistaa sitä.
• Vastaukset poistuvat pysyvästi 366 päivän kuluttua lähetyksestä. Poisto on automaattinen ja se koskee vain turvallisuuslomakkeita, ei muita lomakkeita.
• Ajo tapahtuu palvelimen ajastuksesta eikä sivulatauksista. Vanha ajastus oli epäonnistunut hiljaa vanhan PHP-version takia, ja se selvisi vasta poistoa rakennettaessa.
• Onnettomuustapauksia varten yksittäisen vastauksen voi merkitä säilytettäväksi. Merkintä vaatii aina perustelun ja se estää poiston, kunnes asia on käsitelty.
• Sama raja koskee puistojen sähköpostilaatikoihin kertyviä lomakeviestejä, jotta tieto ei jää elämään toiseen paikkaan.
• Kirjasin työn tekniseksi dokumentiksi, jossa on tietovirta, komennot ja ohje tietojen poistopyyntöön. Järjestelmä ei saa olla riippuvainen tekijästään.

Markkinoinnin näkökulma

• Kielikohtaiset kiitossivut laukaisevat Meta Adsissa mukautetut konversiot.
• Lomakkeen täyttäneet suljetaan pois retargeting-mainonnasta, jotta budjetti ohjautuu niille, jotka vielä harkitsevat.
• Havainto: ryhmävarausmainoksissa oli valittuna turvallisuuslomakkeen konversio. Jokaisella kampanjalla pitää olla sen omaa tavoitetta vastaava konversio.

Tehtävä

Turvallisuuslomakkeissa on vapaaehtoinen uutiskirjerasti. Tilaukset kertyivät lomakearkistoon, mutta niitä ei siirretty mihinkään. Tavoite oli automaattinen siirto uutiskirjepalveluun niin, että markkinointirekisteriin päätyy vain se tieto, joka sinne kuuluu. Lomakkeilla käsitellään myös lasten tietoja, joten tietosuoja määritteli ratkaisun.

Valinta

• Rakensin ensin version tutulla palvelulla ja sen valmiilla lisäosalla. Se toimi, mutta hylkäsin sen: ilmaisversion raja tuli vastaan heti, hinta olisi kasvanut listan mukana ja tiedot olisivat siirtyneet EU:n ulkopuolelle.
• Luin valmiin lisäosan lähdekoodin. Se päättelee sähköposti- ja nimikentän lomakkeesta automaattisesti. Turvallisuuslomakkeella nimikenttä voi olla lapsen nimi, joten rajasin siirtyvät kentät itse.
• Vertailin viittä ilmaista vaihtoehtoa ja valitsin EU:ssa toimivan palvelun: 2 500 tilaajaa ilmaisversiossa ja automaatiot mukana. Valmista lomakeliitäntää siinä ei ollut, joten kirjoitin sen itse. Se antoi samalla täyden hallinnan siihen, mitä tietoa siirtyy.

Toteutus

• Lomakkeet, rasti ja kentät pysyivät ennallaan. Asiakas ei huomaa muutosta.
• Puisto luetaan lomakkeen piilokentästä ja kieli lomakkeen tunnisteesta, joten tilaajat jakautuvat automaattisesti puistokohtaisiin ryhmiin.
• Siirto tapahtuu taustajonossa. Uutiskirjepalvelun häiriö ei voi estää turvallisuuslomakkeen lähettämistä.
• Epäonnistunut siirto yritetään uudelleen viidesti porrastetuin viivein, ja jokaisesta siirrosta jää lokimerkintä. Tein ylläpitoa varten komentorivityökalun yhteyden tarkistukseen ja lokin lukemiseen.
• Tilauksensa peruuttanutta ei aktivoida uudelleen, vaikka hän täyttäisi lomakkeen uudestaan. Vanha tilaaja päivittyy, tuplia ei synny.
• Uutiskirjeellä ja ryhmätarjouksilla on omat erilliset suostumuksensa. Ne tallentuvat eri kenttiin eivätkä ylikirjoita toisiaan, joten kumman tahansa voi perua ilman että toinen muuttuu.
• Todensin lähettävän domainin (SPF, DKIM ja DMARC) ja pidin tiukan DMARC-asetuksen, vaikka palvelu ehdotti löysempää. Päivitin tietosuojaselosteen suomeksi ja englanniksi vastaamaan todellista käsittelyä.
• Oikeusperuste on suostumus. Jokaisesta tilauksesta tallennetaan suostumuksen aika ja se teksti, joka lomakkeella luki, joten suostumus on myöhemmin todennettavissa.

Mitä opin

Valmis ratkaisu ei ole automaattisesti paras, vaikka se toimisi. Ratkaisevaa oli kustannus, tietojen sijainti ja se, mitä järjestelmä oikeasti tekee datalla. Rajapinnan dokumentaatio ei myöskään vastannut todellisuutta: kenttätunnisteet palautuivat eri kohdassa kuin ohjeessa luki, ja se selvisi vain testaamalla oikeaa vastausta vasten.

Tehtävä

Ravintolan sivuston tehtävä ei ole näyttää hyvältä. Sen tehtävä on kertoa mitä on tarjolla, saada vieras varaamaan pöytä ja myydä lahjakortteja myös silloin kun ravintola on kiinni. Tämä oli asiakastyö, ja se tehtiin parityönä. Vastasin toteutuksesta ja teknisestä puolesta.

Mitä rakensimme

• Menu viiteen osioon ja yli neljäänkymmeneen tuotteeseen hintoineen. Erikoisruokavaliot näkyvät suoraan listalla, joten niitä ei tarvitse kysyä erikseen.
• Lounassivu viikonpäivittäin, ja sen päälle keskiviikon burgerpäivä. Henkilökunta päivittää listan itse ilman että kukaan koskee koodiin.
• Kuukauden burger nostona etusivulla juomasuosituksineen. Se on sivuston myös tehokkain lisämyyntipaikka.
• Kaksi toimipistettä samalla sivustolla, molemmille omat tiedot, aukioloajat ja varauslinkit.

Varaus ja myynti

• Pöytävaraukset ohjataan TableOnlinen varausnäkymään toimipistekohtaisilla linkeillä, joten vieras ei joudu valitsemaan ravintolaa kahdesti.
• Sähköiset lahjakortit ostetaan TableOnlinen kautta. Lahjakortti on ainoa tuote, jonka sivusto myy suoraan, ja se toimii myös ravintolan ollessa kiinni.
• Yritystilaukset ja ryhmät on nostettu omaksi poluksi, koska ne ovat kertaostoksena isompia kuin yksittäinen pöytä.

Tekniikka ja ylläpito

• WordPress valittiin siksi, että ravintola päivittää lounaan ja kuukauden burgerin itse. Sivusto ei saa olla riippuvainen tekijästään.
• Suorituskyky varmistettiin välimuistilla ja Cloudflaren kautta, koska lounasaikaan liikenne tulee puhelimilla ja piikkeinä.
• Evästesuostumus ja tietosuojaseloste kuntoon heti alussa, koska sivustolla on seurantaa ja someintegraatiot.

Sivusto julkaistiin 2023 ja on yhä tuotannossa samassa muodossa. Ylläpito on asiakkaalla.

Lähtötilanne

Vanha Elementor-sivusto vuodelta 2022 toimi, mutta ei myynyt. Ilme ei vastannut kohteen hintaluokkaa, saatavuutta ei näkynyt ja jokainen kysely kulki sähköpostilla.

Mitä tein

• Kokosin kuusi alasivua yhdeksi sivuksi, jolla on koko tarina ja varauspolku.
• Rakensin kalenterin, joka lukee omistajan puhelimen kalenteria. Palvelin poimii syötteestä vain päivämäärät, joten asiakkaiden nimet eivät poistu palvelimelta.
• Varauspyyntö kirjataan lokiin ennen lähetystä, joten mikään ei katoa vaikka sähköposti pettäisi. Roskapostisuojana piilokenttä ja aikatarkistus, ei CAPTCHAa.
• Hinnasto tunnistaa voimassa olevan kauden päivämäärästä ja hiihtolomaviikot viikkonumerosta.
• Suomi ja englanti omissa osoitteissaan, rakenteinen data majoituskohteena ja https pakotettuna.

Lähtöajatus

Kiinteässä verkossa ei voi olla tuoteluetteloa ennen kuin tiedetään osoite. Siksi ostopolku alkaa saatavuushausta, ja osoite rakentaa koko loppupolun: tuotteet, hinnan, suositellun laitteen ja sen, tarvitaanko asennuskäyntiä.

Keskeiset ratkaisut

• Ostoskori erottaa kuukausimaksun ja kertamaksut ja näyttää sopimuksen kokonaisarvon, jota myynnissä ja CRM:ssä kannattaa seurata.
• Kassa tarkistaa, että tilaus toimii. Puuttuva reititin ei ole lisämyyntiä vaan estetty tukipuhelu.
• Jokainen suositus kirjaa, näytettiinkö se, hyväksyttiinkö se ja ohitettiinko se. Sääntö, jonka kaikki ohittavat, kuuluu poistaa.
• Nykyasiakas näkee päivityksen hinnan erotuksena, ja tilaus menee CRM:ään sopimusmuutoksena eikä uutena asiakkaana.
• Tekninen näkymä näyttää, mitä dataa ostopolku tuottaa ja mihin se menisi.

Tehtävä

Portfolion pitää näyttää osaaminen, ei kertoa siitä. Siksi tämä sivusto on kirjoitettu itse riviltä riville. Ei julkaisujärjestelmää, ei valmista teemaa, ei yhtään JavaScript-kirjastoa. Jokainen liike ja jokainen kysely on omaa koodia, jonka osaan selittää.

Rajapinta pörssikursseille

• Yläpalkin PAAK-kurssi on vitsi, mutta sen vieressä juoksevat oikeat kurssit. Ne haetaan Cloudflaren Workerilla, joka toimii sivuston ja rajapinnan välissä.
• API-avain on palvelimen salaisuutena. Se ei ole koodissa eikä koskaan päädy selaimeen.
• Vastaus pidetään välimuistissa 15 minuuttia, joten rajapintaa kutsutaan noin 380 kertaa vuorokaudessa riippumatta siitä, onko kävijöitä kymmenen vai kymmenentuhatta.
• Vikasietoisuus kolmessa portaassa. Jos rajapinta ei vastaa, sivu käyttää tallennettua tiedostoa. Jos sitäkään ei ole, se näyttää sivulle kirjoitetut arvot. Kävijä ei näe virhettä missään tilanteessa.
• Yhden osakkeen virhe ei kaada nauhaa, vaan muut näkyvät normaalisti.

Animaatiot

• Etusivun pistekenttä elää kursorin mukaan ja kokoontuu aluksi p.-logoksi, joka hajoaa takaisin parveksi. Piirretty canvakselle, ei videota eikä GIFää.
• Pörssinauhan käyrä piirtyy reaaliajassa, ja kurssin kiihtyäessä logo syttyy tuleen ja koko palkki kallistuu.
• 404-sivu on koko ruudun kuva omalla sommittelullaan.
• Kaikki animaatiot kunnioittavat selaimen vähennetyn liikkeen asetusta ja pysähtyvät, kun ne eivät ole näkyvissä. Se säästää akkua ja huomiota.

Perusasiat kunnossa

• Kaksi kieltä omilla osoitteillaan, kielivalitsin ja hreflang-määrittelyt hakukoneille.
• Vaalea ja tumma teema, joka seuraa järjestelmän asetusta ja muistaa oman valinnan.
• Rakennedata, sivukartta, kuvaukset ja jakokuvat molemmille kielille.
• Näppäimistöllä käytettävä, hyppylinkki sisältöön ja kuvateksteissä oikeat vaihtoehtoiset tekstit.

Julkaisu Cloudflaren päällä. Staattiset tiedostot omassa projektissaan ja rajapinta erillisenä Workerina, joka vastaa vain osoitteeseen /api/.

Tehtävä

Kilpapelaamisessa yleisö tulee paikalle somen kautta. Ottelusta pitää kertoa ennen kuin se alkaa ja tulos pitää kertoa heti kun se on selvillä. Tein nämä grafiikat itse alusta loppuun kahdelle organisaatiolle. Ruotsalaisen SHL-seuran Örebro Hockeyn esports-joukkueelle ja suomalaiselle SJ Gamingille.

Mitä tein

• Rakensin jokaiselle julkaisutyypille oman pohjan. Game day ennen ottelua, kokoonpano ottelupäivänä ja tulos heti ottelun jälkeen.
• Pohjat tehtiin niin, että seuraavaan otteluun vaihtuvat vain logo, kellonaika ja numerot. Muu pysyy paikallaan, joten ilme ei rapistu kiireessä.
• Pelaajakuvat irrotettiin taustasta käsin ja aseteltiin samaan valoon, jotta kuudesta eri kuvasta tuli yksi kokoonpano.
• Örebron ilme rakennettiin kaupungin linnan ympärille. Tumma versio iltaotteluihin ja vaalea versio päivän julkaisuihin, sama sommittelu molemmissa.

Sponsorit ja säännöt

• Sponsorilogot ovat osa sopimusta, eivät koriste. Jopa seitsemän logoa piti mahtua samaan alapalkkiin niin, että jokainen on luettava eikä yksikään peitä kuvaa.
• Liigojen omat tunnukset tulivat päälle vaihtuvina. Sama pohja palveli sekä eSHL:n että ECL Eliten otteluita.
• Tarvittiin useampi koko samasta julkaisusta. Vaaka Twitteriin, neliö Instagramiin ja pystysuuntaa venytetty versio puhelimen ruudulle.

Mitä jäi käteen

Tämä oli ensimmäinen paikka, jossa tein visuaalista työtä oikealla aikataululla ja oikeille sopimuskumppaneille. Ottelu alkaa silloin kun se alkaa, joten grafiikka on valmis sitä ennen. Sama ajattelu on mukana edelleen, kun teen mainosmateriaalia kampanjaan.

Grafiikat julkaistiin joukkueiden omissa kanavissa. Örebron ottelut näkyivät eSHL:ssä myös C Moren lähetyksissä.