RadioMedia – räätälöidyt kilpailujärjestelmät ja hallintasovellukset

Lähtökohta

RadioMedian vanha kilpailujärjestelmäkokonaisuus oli kankeasti toteutettu, vaikea käyttää kaikille käyttäjäryhmille ja lähes mahdoton päivittää tarpeiden muuttuessa. Ylläpitäjän työ oli todella vaikeaa: lomakkeiden muokkaus, kategorioiden lisäys ja ilmoitettujen entryjen hallinta oli monimutkaista, ja käytännössä vain yksi ihminen organisaatiossa osasi tehdä sen. Muutospyynnöt piti lähettää toimittajalle, joka teki ne omalla aikataulullaan. Ylläpitäjä ei nähnyt tuomarointijakson etenemistä reaaliajassa.

RadioMedia tiesi tarkalleen mitä halusi. Asiakkaan projektin alussa toimittamat lähtötiedot kuvasivat jokaisen käyttäjäpolun vaihe vaiheelta: ilmoittautumispolun, tuomarointipolun ja painotetun arviointimallin. Se oli harvinaisen selkeä lähtökohta, joka kertoi asiakkaan tuntevan oman prosessinsa syvällisesti. Tehtävämme oli toteuttaa se paremmin kuin ennen, ja viedä se vielä pidemmälle.

Kilpailujärjestelmät, markkinointisivustot ja yleisöäänestys muodostavat yhdessä yhden kokonaisuuden: saman WordPress Multisite -asennuksen päällä pyörivät sekä kilpailujen julkiset sivut että hallinta- ja arviointitoiminnot. Tässä referenssissä keskitytään kilpailujärjestelmien toteutukseen.

Tavoitteet

– Korvata kolmannen osapuolen ratkaisu järjestelmäkokonaisuudella, jossa muokkaaminen onnistuu itse tai Duden kautta nopeasti
– Rakentaa joustavat lomakerakenteet, joissa jokainen kilpailukategoria voi saada omat kenttänsä
– Antaa tuomareille toimiva työkalu arviointiin: pisteytyslomake, mahdollisuus kuunnella ja katsella kilpailutöitä, vertailuominaisuus ja jääviydenhallinta
– Antaa ylläpidolle näkyvyys kilpailun etenemiseen: ketkä tuomarit ovat arvioineet omat kategoriansa, CSV-exportit, mahdollisuus muokata ilmoittautumisia
– Pitää eri kilpailut samassa WP Multisitessä, mutta selkeästi erillisinä kokonaisuuksina omine kirjautumissääntöineen, lomakkeineen ja prosesseineen
– Siirtää järjestelmäkokonaisuus Duden kuormantasatuille, WP-optimoiduille korkean suorituskyvyn palvelimille, jotta ne kestävät isompaakin kävijäkuormaa gaalan aikana

Mitä tehtiin

– Käyttöliittymäsuunnittelu (UI)
– Käyttäjäkokemussuunnittelu (UX)
– WordPressillä toteutettu kilpailujärjestelmä
– Laaja WordPress Multisite -kokonaisuus

Rakensimme RadioMedialle kokonaan oman järjestelmäkokonaisuuden, joka on suunniteltu jokaisen käyttäjäroolin näkökulmasta: ilmoittajalle, tuomarille ja ylläpitäjälle.

Ilmoittajan polku: Lomake joka muistaa
Ilmoittajan kokemus alkaa kirjautumisesta ja etenee monivaiheisen lomakevelhon kautta: kategorian valinta, perustiedot, taustat ja perustelut, liitetiedostot, laskutustiedot, tarkistus ja lähetys. Jokainen vaihe on oma askeleensa, edistyminen on aina näkyvissä. Lomakkeet tallentuvat automaattisesti. Ilmoittaja voi poistua kesken, palata myöhemmin ja jatkaa siitä mihin jäi. Jokainen kilpailukategoria voi saada täysin omat kenttänsä. Pääkäyttäjä rakentaa lomakkeet WordPressin hallinnasta ilman koodaamista. Valmiin entryn voi ladata PDF-tiedostona.

Tuomarin polku: helppoa vertailua
Tuomari tekee kaiken omassa näkymässään. Hän näkee vain ne kategoriat, jotka hänelle on osoitettu. Aloitusnäkymästä selviää yhdellä vilkaisulla missä mennään: jokainen kategoria näyttää arvostelujen tilanteen selkeästi. Pisteytys tapahtuu arviointilomakkeella, johon kategorian kriteerit ja jokaisen kriteerin prosenttiperusteiset painotukset on kirjattu näkyville. Töitä voi vertailla rinnakkain ennen lopullista pisteytystä. Jäävin työn voi merkitä yhdellä klikkauksella.

Ylläpitäjän polku: näkyvyys koko kilpailuun
Ylläpitäjä hallitsee kilpailun koko elinkaarta WordPressin administa. Ilmoittautumisen ja tuomarointiajan aloitus ja sulkeminen tapahtuu nappia painamalla. Tuomarikohtaiset kategoriat ja jääviydet asetetaan käyttäjäkohtaisesti. Reaaliaikainen seuranta näyttää, ketkä tuomareista ovat arvioineet ja mitkä arvioinnit puuttuvat. Ehdokkaiden tiedot saa ulos CSV-tiedostona kategorioittain zip-pakettina. Voittajat kirjataan hallinnasta ja voittajasivu julkaistaan sekin yhtä nappia painamalla.

Lopputulos

RadioMedialla on nyt kilpailujärjestelmäkokonaisuus, joka palvelee jokaista käyttäjäroolia — ilmoittajaa, tuomaria ja ylläpitäjää — selkeästi ja toimivasti. Vanha järjestelmä korvattiin täysin, ja samalla poistui riippuvuus yksittäisestä osaajasta. Järjestelmä mahdollistaa myös aivan uusien kilpailujen luonnin ilman järjestelmän rakentamista alusta.

Projektin kohokohdat

Asiakkaan toiveet täyttyivät ja ylittyivät
RadioMedia tuli projektiin poikkeuksellisen hyvin valmistautuneena. Asiakkaan esityksessä oli kuvattuna jokainen käyttäjäpolku vaihe vaiheelta, painotettu arviointimalli esimerkkeineen ja näkymien rakenne. Se oli selkeä pohja, josta oli hyvä rakentaa. Asiakkaan toiveiden lisäksi kehitimme ominaisuuksia, jotka veivät järjestelmän käytettävyyden korkealle tasolle: selkeästi vaiheistetut lomakkeet, automaattinen tallennus, käyttöliittymä joka kertoo käyttäjälle nopealla vilkaisulla tarvittavat tiedot ja tuomareiden kätevä entryjen vertailutyökalu.

Joustava lomakejärjestelmä
Yksi projektin vaativimmista osuuksista oli lomakerakenne, joka mahdollistaa täysin erilaiset ilmoittautumislomakkeet eri kilpailukategorioille. Rakensimme lomake-CPT:n, johon pääkäyttäjä voi lisätä kenttiä, otsikkoja, ohjetekstejä ja tiedostolataajia. Muutokset tulevat voimaan välittömästi ilman koodimuutoksia.

Automaattitallennus joka oikeasti toimii
Vanhan järjestelmän käyttöohje kehotti: älä paina selaimen päivitä-nappia. Uudessa järjestelmässä automaattitallennus toimii niin kuin sen kuuluu toimia, eli äänettömästi taustalla, ilman varoituksia ja ilman kesken jäänyttä työtä. Tämä vaati tarkkaa arkkitehtuurisuunnittelua React SPA -ympäristössä, jossa istuntovarmenne vanhenee eri tavalla kuin perinteisessä verkkosivussa.

Erilaiset brändit, yksi hallintapaneeli
RadioAwards ja Kaiku ovat eri kilpailuja eri kohderyhmille, eri kirjautumislogiikalla ja eri lomakkeilla. Silti ne pyörivät samalla pohjalla ja ovat hallittavissa samasta paikasta. WordPress Multisite mahdollistaa sen, että kilpailut ovat täysin erilliset käyttäjille mutta yhtenäiset ylläpitäjälle.

Infra ja migraatio
Vanhasta WP Headless -toteutuksesta luovuttiin kokonaan ja siirryimme käyttämään täysin asiakkaan käyttöön optimoitua, kuormantasattua WordPress-optimoitua palvelinympäristöä. Tähän kuuluu Duden luotettavan ylläpitopalvelun mukainen varmuuskopiointi, monitorointi, tietoturva ja 301-ohjaukset.

Tekninen toteutus tarkemmin

Arkkitehtuuri
Järjestelmä on rakennettu WordPress Multisite -alustalle (Bedrock/Dudestack), jossa kilpailut pyörivät omilla domaineillaan mutta jakavat saman koodipohjan. Kilpailuhallintasovellus on täydellinen React-sovellus (React Router v7) upotettuna WordPressiin: se hyödyntää WordPressin käyttäjänhallintaa ja REST API:a mutta toimii sujuvasti yksisivuisena sovelluksena ilman sivulatauksia.

Rajapinta ja pisteytys
Kuusi räätälöityä REST API -päätepistettä hoitavat kaiken datan: ehdokkaiden luonti, muokkaus ja poisto, tiedostolataukset, arviointien tallennus ja suosikkien hallinta. Kaikki vaativat autentikoinnin ja nonce-varmennuksen. Painotettu pisteytysalgoritmi laskee tuomariarvioista kokonaispisteen, jossa kunkin kriteerin painoarvo on määritelty lomakekohtaisesti.

Palvelininfrastruktuuri
Palvelininfrastruktuuri pyörii Duden optimoimalla palvelinkokonaisuudella, joka koostuu neljästä virtuaalipalvelimesta: kaksi WordPress-palvelinta Cloudflaren kuormantasauksen takana, erillinen MariaDB-tietokantapalvelin ja Redis-välimuistipalvelin. Lsyncd pitää tiedostot reaaliaikaisesti synkronoituina palvelimien välillä. Cloudflare hoitaa kuormantasauksen, CDN:n ja DDoS-suojan.

Laadunvarmistus ja julkaisu
Koodin laatu varmistetaan automaattisesti: GitHub Actions tarkistaa jokaisen commitin PHP-koodityyliltä, JavaScript- ja CSS-lintaukselta ja HTML-validoinnilta. Capistrano hoitaa julkaisun yhdellä komennolla ja pitää tuotannossa kaksi aiempaa versiota rollbackia varten.