Jatkuvan soiton mediasivusto podcasteille ja videoille

Toteutimme asiakkaalle media-alustan, jossa soitto jatkuu keskeytyksettä verkkosivujen eri sisältöjä ja alisivuja selatessa. Tavoitteeksi asetettiin sekä podcasteja että videoita toistava mediasivusto toimii näyteikkunana yhdistyksen eri medioille. Tavoite saavutettiin hyvässä yhteistyössä asiakkaan kanssa.

L

Moderni ja monipuolinen mediasivusto Kansanlähetykselle

Tavoitteena sekä podcasteja että videoita toistava mediasivusto, joka toimii näyteikkunana yhdistyksen eri medioille. Media-alusta, joka tarjoaa käyttäjille saumattoman kokemuksen. Media-alusta, jossa soitto jatkuu keskeytyksettä sisältöjä ja alisivuja selatessa.

Lähtötilanne

aloitus

Asiakkaan toiveena oli moderni ja käyttäjäystävällinen mediasivusto, joka vastaa monipuolisiin tarpeisiin tarjoten saumattoman käyttökokemuksen. Sivustolle haluttiin jatkuvasti soittoa tai videota toistava mediasoitin, jonka avulla podcastit, Youtube-videot ja paikalliset, jopa 6000 audiotiedostoa, voisivat soida taustalla käyttäjän liikkuessa sivuston eri osioissa. Lisäksi tarpeisiin kuului hakuominaisuus, helppokäyttöiset lomakkeet sekä visuaalisesti houkutteleva ja nuorekas ilme, joka puhuttelisi käyttäjiä ja tekisi mediasisältöjen kuluttamisesta miellyttävää.

Lopputulos

Asiakas sai modernin ja käyttäjäystävällisen mediasivuston. Sivusto sisältää jatkuvasti toimivan mediasoittimen, jonka avulla käyttäjät voivat nauttia podcasteista, Youtube-videoista ja tuhansista paikallisista audiotiedostoista samalla, kun he liikkuvat sivun eri osioissa. 

Lisäksi sivustolle luotiin hakutoiminto, selkeät lomakkeet ja raikas uusi ilme. Toteutus mahdollistaa sisällön sujuvan hallinnan ja saumattoman käytön kaikissa ympäristöissä.

Joustava ja nykyaikainen Web app -verkkoratkaisu

Lopputulos toteutettiin headless-toteutuksena käyttäen React-pohjaista koodia. Sisällönhallintajärjestelmänä käytimme WordPressiä, joka mahdollisti helpon sisällön ylläpidon. Lisäksi hyödynsimme moderneja teknologioita, kuten Next.js, Typescript, Tailwind ja GraphQL, varmistaaksemme sivuston nopeuden ja joustavuuden. Sisällön tuomiseksi ulkoisista lähteistä, kuten YouTubesta ja podcast-palveluista, integroimme järjestelmään API-yhdistimet, jotka takaavat saumattoman toimivuuden.

Web app -ratkaisuna

Jotta saimme aikaan saumattoman käyttökokemuksen soittimen säilyessä “kelluvana” sivuston selaamisen yhteydessä ratkaisun ydin oli Single Page App, jossa käytimme hyödyksi headless-toteutusta.

Taustalla Headless-toteutus

  • Headless-toteutus on verkkosivuston tai sovelluksen rakenne, jossa käyttöliittymä (front-end) ja sisällönhallintajärjestelmä (CMS, esimerkiksi WordPress) toimivat erillisinä osina.
  • Käyttäjän näkemä sivusto (front-end) hakee tarvittavan sisällön taustajärjestelmästä (back-end) rajapintojen kautta, mutta niitä ei ole sidottu tiukasti yhteen, kuten perinteisissä verkkosivustoissa.
  • Tämä mahdollistaa suuremman joustavuuden, nopeuden ja modernien teknologioiden käytön front-endin rakentamisessa.

React-pohjainen koodi

  • React on JavaScript-kirjasto, joka on suunniteltu modernien ja interaktiivisten käyttöliittymien luomiseen.
  • Reactin avulla front-end toteutettiin dynaamisena ja tehokkaana käyttöliittymänä, joka voi toimia itsenäisesti ja hakea sisältöä taustajärjestelmästä.
koodari

Näitä palveluita toimitimme

R

Ilmeen suunnittelu

  • Suunnittelimme ja toteutimme asiakkaalle tuotteen visuaalisen ilmeen, joka oli linjassa palvelun kohderyhmän ja tavoitteiden kanssa. Toteutimme myös KL-media -logon suunnittelun.
R

Media-alustan UX- ja UI-suunnittelu

  • Keskityimme selkeään ja käyttäjäystävälliseen palveluun, jossa jokainen osio on loogisesti rakennettu ja helppo navigoida.
  • Käyttöliittymä suunniteltiin tukemaan palvelun mediapainotteisuutta, ja mediatoistin integroitiin saumattomaksi osaksi käyttöliittymää.
R

Tekninen suunnittelu ja toteutus

  • Toteutimme teknisen suunnittelun ja toteutuksen kokonaisvaltaisesti ja ammattitaidolla, keskittyen nopeaan, joustavaan ja käyttäjäystävälliseen ratkaisuun.
  • Sivusto rakennettiin tukemaan sekä sujuvaa sisällönhallintaa että erinomaisen käyttökokemuksen tarjoamista, hyödyntäen moderneja teknologioita ja ulkoisten palveluiden integrointeja.
R

Projektinhallinta

  • Meiltä tuli myös projektinhallinta, joka sisälsi huolellisen valmistelun, tiiviin yhteistyön asiakkaan kanssa ja projektin onnistuneen läpiviennin aikataulussa.
  • Varmistimme jo alkuvaiheessa, että asiakkaan tarpeet, tavoitteet ja sidosryhmät otettiin huomioon, jotta lopputulos tukisi liiketoimintaa parhaalla mahdollisella tavalla.
KL-media
UX/UI
Laptop KL-media
Projektijohtaminen
Projektijohtaminen

Brändin mukaisilla mediasisällöillä, kohdennetulla digimarkkinoinnilla ja hakukoneoptimoinnilla näkyviä tuloksia.

Tutustu muihin projekteihin

Mailapeliseuran brändi-uudistus

Mailapeliseuran brändi-uudistus

Toteutimme kokonaisvaltaisen brändiuudistuksen, joka korostaa laatua, ajattomuutta ja monipuolista lajitarjontaa.Smash on Suomen suurin mailapeliseura. Se tarjoaa eri lajien korkealaatuista valmennusta, kursseja, tapahtumia sekä kilpailutoimintaa Helsingissä, Espoossa...

Keskon kampanjapeli

Keskon kampanjapeli

Kampanjapeli toi iloa yli puolelle miljoonalle pelaajalle ja jätti pysyvän muistijäljen. High score -listan ja sosiaalisen median jakotoimintojen ansiosta peli saavutti viraalin suosion ja sitoutti käyttäjiä pitkään.Qmea toteutti Kesko Oyj:lle kaksi kampanjaa –...

Radion tuotannon­ohjausjärjestelmä

Radion tuotannon­ohjausjärjestelmä

Toteutimme toiminnanohjauksen custom-ratkaisun radio-ohjelmien ja -sarjojen hallintaan sekä työntekijöiden arkea helpottamaan.Radio Patmos on laajalti Suomen radiotaajuuksilla sekä verkossa kuuluva kristillinen radiokanava, joka tuottaa suuren määrän laadukkaita...