RadioMedia

Räätälöidyt kilpailujärjestelmät arvostetuille kilpailuille

RadioMedia järjestää vuosittain radio- ja audioalan arvostetut kilpailut: RadioAwardsin ja Kaiku-kilpailun. Kilpailuihin ilmoittavat radioasemat ja mainostoimistot, ammattituomarit pisteyttävät työt määriteltyjen kriteerien mukaan, ja voittajat julkistetaan gaalaillan kanssa samaan aikaan verkossa.

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.

Siirry sivustolle

Mitä teimme

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

Budjettiluokka

10 000 – 25 000 €

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. Markkinointisivustoista kerrotaan omassa referenssissään ja yleisöäänestyksestä omassaan.

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

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. Tämä kuulostaa pieneltä asialta, kunnes lukee vanhan järjestelmän käyttöohjeesta: “ethän paina kesken lomakkeen täytön selaimen päivitä-nappulaa, sillä silloin kirjaamasi tiedot voivat kadota lomakkeesta.” Uudessa järjestelmässä tätä varoitusta ei tarvita. 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. Kun kenttä lisätään tai muutetaan, se tulee voimaan välittömästi. Valmiin entryn voi ladata PDF-tiedostona.

Tuomarin polku: helppoa vertailua

Uudessa järjestelmässä 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, eli mitkä kategoriat on arvosteltu valmiiksi, mitkä on kesken ja montako arvostelua kategoriassa puuttuu.

Kategorian sisällä jokaisen entryn kohdalla näkyy tila: Valmis, Kesken, Jäävätty tai se on tyhjä, jos arviointia ei ole aloitettu. Entryjä voi järjestää tilan, pisteiden tai suosikkimerkintöjen mukaan. Entryn voi merkitä suosikiksi, jolloin se on helppo löytää myöhemmin. Suosikointi on hyödyllinen erityisesti silloin, kun tuomari on arvostellut kaikki mutta haluaa vielä selkeyttää pisteytyksiään: suosikkimerkintä pitää vahvimmat ehdokkaat näkyvissä ilman että koko listaa tarvitsee käydä uudelleen läpi.

Pisteytys tapahtuu arviointilomakkeella, johon kategorian kriteerit ja jokaisen kriteerin prosenttiperusteiset painotukset on kirjattu näkyville. Töitä voi vertailla kätevästi rinnakkain ennen lopullista pisteytystä. Muistiinpanoja voi lisätä jokaiselle ehdokkaalle. Jäävin työn voi merkitä yhdellä klikkauksella, jolloin järjestelmä poistaa sen tuomarin arvioitavien listalta ja jättää mahdolliset pisteet laskematta.

Ylläpitäjän polku: näkyvyys koko kilpailuun

Ylläpitäjä hallitsee kilpailun koko elinkaarta WordPressin administa. Asiat tapahtuvat nappia painamalla, esimerkiksi ilmoittautumisen aloitus ja sulkeminen tai tuomarointiajan aloitus ja sulkeminen.

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. Tuomariarvioinnit saa ulos omana CSV:nään suosikkeineen ja jääviyksineen. Kun kilpailukausi päättyy, voittajat kirjataan hallinnasta ja voittajasivu julkaistaan sekin yhtä nappia painamalla.

Eri kilpailuilla on eri pelisäännöt. RadioAwardsissa ilmoittajatunnukset toimitetaan radioyhtiöille etukäteen. Kaikussa ilmoittaja voi rekisteröityä itse. Järjestelmä tukee molempia tapoja, ja kirjautumislogiikka on konfiguroitavissa kilpailukohtaisesti.

Edistyminen näkyy yhdellä vilkaisulla

Tuomari näkee heti missä mennään: jokainen kategoria kertoo kuinka monta entryä on arvosteltu. Keskeneräiset ja valmiit kategoriat ovat erillään. Tuomari ei joudu enää muistelemaan mitkä entryt on arvioitu tai onko arviointi vielä kesken.

Lomake muistaa, vaikka selain unohtaisi

Automaattitallennus toimii äänettömästi taustalla. Vanha järjestelmä varoitti: älä paina päivitä-nappia. Uudessa järjestelmässä ilmoittaja tai tuomari voi sulkea selaimen kesken kaiken ja jatkaa myöhemmin siitä mihin jäi. “Luonnos tallennettu” -merkintä kertoo aina tilanteen.

Jokaisella kategorialla omat kriteerinsä

Arviointikriteerit ja niiden painotukset on määritelty kategoriakohtaisesti. Ilmoittaja tietää mitä tietoja entryssä kannattaa korostaa ja tuomari näkee pisteytyslomakkeessa mitä arvioidaan ja millä painoarvolla. Kriteerit ovat hallittavissa suoraan hallinnasta ilman kehittäjää, joten ne voi päivittää aina kilpailukauden tarpeiden mukaan.

Tila, suosikit ja järjestely samassa näkymässä

Tuomarin näkymässä jokaisen entryn kohdalla näkyy tila: Valmis, Kesken tai tyhjä, jos arviointia ei ole aloitettu. Entryjä voi järjestää tilan, pisteiden tai suosikkimerkinnän mukaan. Suosikointi on hyödyllistä erityisesti silloin, kun kaikki on arvosteltu mutta pisteytystä halutaan vielä hienosäätää ennen lopullista päätöstä.

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, lomakkeiden automaattinen tallennus, käyttöliittymä joka kertoo käyttäjälle nopealla vilkaisulla tarvittavat tiedot ja tuomareiden kätevä entryjen vertailutyökalu. Hyvä speksi ja hyvä toteutus yhdessä!

Joustava lomakejärjestelmä

Yksi projektin vaativimmista osuuksista oli lomakerakenne, joka mahdollistaa täysin erilaiset ilmoittautumislomakkeet eri kilpailukategorioille. Kaiku-kilpailun teho-kategoria vaatii erilaisia tietoja kuin RadioAwardsin paras juontaja -kategoria, ja kummankin pitää olla ylläpidettävissä suoraan WordPressin hallinnasta. 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. Järjestelmä mahdollistaa myös aivan uusien kilpailujen luonnin ilman järjestelmän rakentamista alusta.

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ällä saatiin varmistettua sekä täyden saatavuuden suorituskyky, että reaaliaikainen back end ja ylläpito asiakkaalle. 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.