FatChilli: Ako sme zvýšili eCPM portálu Omediach.com o 270%

Takto to začalo

„V lete 2020 sme dostali jedinečnú príležitosť pracovať na projekte komplexnej prerábky webového portálu Omediach.com,“ hovorí project Manager Fatchilli Tomáš Klár.
Tím z FatChilli dostal na prerábku webu absolútnu voľnosť a možnosť experimentovania podľa vlastného uváženia.

Portál Omediach.com je postavený na technológii Joomla. Po ôsmych rokoch existencie UX portálu nespĺňalo požiadavky modernej doby a web mal aj veľký technologický dlh. Práve preto bol hlavným cieľom čiastočné zlepšenia užívateľskej skúsenosti (redizajn UX) a tiež technologická optimalizácia, ktorá by otvorila brány moderným marketingovým stratégiám a novým možnostiam monetizácie obsahu.

Monetizácia webu

FatChilli pripravilo nový pohľad „z vonku“ - ako môže portál zarobiť viac, s akými predpokladmi, akým spôsobom a ponúklo viacero čerstvých nápadov, ako najlepšie monetizovať obsah webu. Následne tieto nápady prioritizovať tak, aby v pomere cena/výkon dosahovali čo najlepšiu pridanú hodnotu.

Kľúčové výstupy:

• prieskum používateľov, toky používateľov a definovanie/spresnenie cesty používateľa
• vylepšenia a odporúčania stratégie UX (zdržať čitateľa na portáli čo najdlhšie)
• analýza a návrhy na zlepšenie marketingovej stratégie portálu (aj za účelom získania vyššieho trafficu z Google organic)
• optimalizácia kódu a technických parametrov (zrýchlenie webu)
• nasadenie a optimalizácia ad servera (zlepšenie výkonnosti reklamných plôch s cieľom zvýšiť ad revenue - príjmy z reklamy)

Aké metódy sa použili

Pri riadení projektu bola použitá agilná metóda SCRUM s dvojtýždňovým sprintom a príležitostnými poradami so zákazníkom online formou. Ako primárny nástroj na riadenie projektu v tíme bol použitý Trello. Tu sme vytvorili, prioritizovali a delegovali úlohy backlog projektu (zoznam úloh a požiadaviek na vykonanie výstupov projektu) v každej fáze procesu. Všetka e-mailová komunikácia na projekte bola riadená v internom CRM Hubspot a na adhoc komunikáciu sme používali nástroj Slack.

1. etapa: Objavovanie

Rozhovor s hlavnou postavou

Na začiatku bolo stretnutie a obsiahly rozhovor so šéfkou webu.
Snažili sme sa pochopiť, ako portál funguje a čo sú dôležité aspekty, na ktoré sa zamerať. Pochopiť, kto sú návštevníci portálu a ako ho vnímajú, to bolo kľúčové. Pozorne sme počúvali a zapisovali si. Tiež sme sa dozvedeli, s akým feedbackom sa stretáva, na čo si treba dávať pozor pri kreovaní nového UX a ako vníma cestu čitateľa portálom. Dôležitou témou bolo tiež financovanie aktivít portálu a aktuálne revenue streamy, aby bolo jasné, na čo sa do budúcnosti zameriame.

Testovanie použiteľnosti - aktuálna stránka

Zhromažďovali sme údaje o výzvach a príležitostiach súčasnej webovej stránky, ktoré zahŕňalo testovanie použiteľnosti vykonané v laboratórnych podmienkach; pokrývajúce kľúčové navigačné prvky, tok stránok a funkčnosť. Naši testeri a marketéri prezlečení do role používateľov klikali po celom portáli a vykonali tak množstvo konkrétnych úloh na základe rôznych používateľských scenárov.

Kľúčové poznatky zo starej stránky:

• stránka bola menej prehľadná a obsahovala veľké množstvo informácií pokope
• v textoch bolo použitých príliš veľa rôznych veľkostí fontov
• pre veľké množstvo článkov v zozname článkov používateľ strácal kontakt s hlavným menu stránky
• hlavné menu bolo rozsiahle a neprehľadné
• po kliknutí na kategóriu sa používateľovi naskytol pohľad na obrovský zoznam článkov, z ktorých si ťažko vedel vybrať, ktoré pre neho boli dôležité a ktoré nie
• tok informácií z hlavnej stránky až po podstránku nebol ideálny pre veľké množstvo prezentovaných informácií na jednom mieste
• rýchlosť načítania článkov a kategórií nebola optimálna
 

Záver 1. etapy

• zabezpečiť modernejšie UX prehľadnejšie pre návštevníka
• optimalizovať aktuálny kód
• implementovať moderné technológie
• nasadiť ad server a vytvoriť pôdu na ďalší rozvoj v oblasti marketingu
• otvorenie nových revenue streamov
• prilákanie nových čitateľov

2. etapa: Definovanie a predstava

Proces návrhu nového UX zahŕňal nasledovné činnosti smerujúce k návrhu riešenia:

A) Mindmapa
Vytvoreniu mindmapy k návrhu nového UX predchádzalo:
• testy použiteľnosti na aktuálnej webovej stránke
• rozhovory so zainteresovanými stranami

B) Zadefinovanie výzvy: „Ako môžeme dosiahnuť, aby bol web omediach.com pre súčasných používateľov pútavejší, prehľadnejší a ľahšie sa v ňom navigovalo?”

C) Stanovenie priorít zmien: Definovali sme potenciálne úpravy a zmapovali sme ich možnú hodnotu dôležitosti pomocou prioritizácie funkcií, vrátane:
• vysoký a nízky vplyv
• očakávané a neočakávané zmeny

3. etapa: Vývoj

Informačná architektúra (IA)

Na definovanie a testovanie informačnej architektúry sme zvolili prístup orientovaný na používateľa portálu:

• Používateľské testovanie: Interne sme vykonali niekoľko používateľských testov, aby sme pochopili, ako užívatelia zmýšľajú pri prezeraní portálu a identifikovali sme hneď niekoľko problémov.
• Zoradenie priorít: Premýšľali sme, ako môžeme preskupiť IA súčasného portálu a urobiť ho prehľadnejším a jednoduchším pre používateľov.
• Audit obsahu: Vykonali sme úplný audit obsahu portálu omediach.com so zameraním na kvalitu a rozloženie obsahu.
• Audit reklamných plôch: Vykonali sme tiež audit rozloženia reklamných a sponzorských plôch.

Stratégia obsahu

Spolu so šéfredaktorkou sme sa zamysleli nad tým, čo robí web omediach.com obsahovo pútavým a zhodli sme sa, že kvalita a jedinečnosť článkov v jednotlivých kategóriách je najväčším lákadlom pre čitateľov. Preto sme navrhli, aby sa aj na podstránkach kategórií zviditeľnil ten najpútavejší článok.

Kľúčové na stratégii obsahu bolo na každej úrovni stránky ponúknuť používateľovi preňho zaujímavý obsah takým spôsobom, aby bol preňho ľahko dohľadateľný a prehľadný. Na návrhu tejto stratégie spolupracoval náš content stratég Matej Borko v spolupráci so šéfredaktorkou a zakladateľkou webu, ktorá pozná portál a správanie návštevníkov najlepšie.

Prototypovanie a testovanie použiteľnosti

Tvorba upgrade UX prebiehala v dvoch fázach:

• Wireframe prototyp – predtým, ako sa dizajnér pustil do návrhu, sme rozloženie jednotlivých funkčných a obsahových prvkov nakreslili ako digitálny wireframe, jednoduchú skicu budúceho webu.
• Mockup dizajnu – po niekoľkých kolách odsúhlasovania finálneho mockupu interne aj so zákazníkom sme sa dostali k tvorbe mockupu, ktorý bol použitý na prezentáciu celkového vizuálneho dizajnu produktu. Predfinálna podoba dizajnu upgradu UX následne prešla niekoľkými procesmi schvaľovania, kým bola odsúhlasená jeho finálna podoba. 

 4. etapa: Dodanie

Nasledoval proces návrhu a tvorby UX novej podoby stránky. Po schválení finálnej podoby mockupu dizajnu sa náš UX dizajnér postaral o zhmotnenie návrhov do funkčného dizajnu. Tento proces trval približne 2 týždne a výsledný efekt bol viac než uspokojivý pre celý tím vrátane zákazníka.

Stanovenie priorít zmien

Nakoľko cieľom bolo spustiť nový dizajn čím skôr, bolo potrebné stanoviť priority, podľa ktorých bude postupovať programátor. Jednotlivé zmeny sme podľa priorít poslali na zapracovanie vývojárovi webu Tomášovi a následne prediskutovali požiadavky. Vývoj webu bol realizovaný v jeho kompetencii a podľa vopred odsúhlaseného harmonogramu. Na postupné zapracovávanie a progres dozeral projektový manažér stránky.

Testovanie

Jednotlivé zmeny sme po zapracovaní celého balíka testovali a revidovali najskôr “in house”, následne boli zmeny prezentované zákazníčke. Celý projekt spolu s testovacou fázou trval 20 MD.

Nasadenie reklamného servera

Súčasťou dohody o spolupráci bola aj optimalizácia príjmov z reklamy.

Po zapracovaní zmien webu a jeho otestovaní prevzali zadanie naši kolegovia z oddelenia Google reklamy. Ich úlohou bolo vytvoriť reklamné kódy na vloženie do reklamných plôch na webe. Kolegovia sa už v prvých fázach aktívne zapájali do diskusie o tom, ako má vyzerať nové UX a navrhovali pozície reklamných plôch. Teraz bolo ich úlohou naplniť dané plochy obsahom.

Po nasadení kódu do každej reklamnej plochy na stránke nainštalovali a nastavili reklamný server, ktorý tieto plochy bude spravovať. Následne prebehla kontrola, či sa zobrazuje správny obsah vzhľadom na prísne kritéria Googlu a rozhodlo sa, ktoré z reklamných plôch sa zapnú pri spustení novej podoby webu.

Po spustení webu bolo potrebné ešte “doladiť” jednotlivé reklamné plochy tak, aby to, čo, kedy a komu sa zobrazuje, malo čo nejefektívnejší dopad na príjmy z reklamy.

Keďže priame reklamné kampane sú tiež riadené ad serverom, tak pred spustením bolo potrebné nastaviť, kde sa majú kampane zobrazovať, akému publiku a počet impresií v závislostí od dohody so zákazníkom (resp. podľa dohody zákazníka so zadávateľom reklamy).

Výsledky

Vizuál portálu pred zmenami:

Vizuál portálu po zmenách:

Po spustení nového webu sme netrpezlivo čakali na reakcie návštevníkov. V tomto prípade boli veľmi pozitívne.
Na naše milé prekvapenie po prvých týždňoch prevádzky prišla len konštruktívna kritika, po ktorej sme sa s zadávateľkou dohodli ešte na niekoľkých menších zmenách, týkajúcich sa predovšetkým množstva reklamných plôch na stránke.

Po takmer dvoch mesiacoch od spustenia prišlo na rad vyhodnotenie výsledkov

Pri vyhodnotení sme porovnávali výkonnosť webu v období od 19.11 do 19.12. jednotlivo za rok 2019 a 2020, aby výsledky neboli ovplyvnené sezónnosťou.

Prvým kritériom bola výkonnosť webu, ktorú sme merali nástrojom Lighthouse v dev možnostiach prehliadača Google Chrome. Merali sme zvlášť hodnoty pre mobilnú aj pre desktop verziu. Po odstránení všetkého rokmi nakopeného “balastu” v kóde stránky a optimalizácii výkonnostných prvkov sa nám podarilo stránku zrýchliť, zefektívniť a sprehľadniť.
 

Optimalizáciou štruktúry webstránky a pridaním site mapy sme dosiahli obrovský nárast indexácie stránok. Počas porovnávaného obdobia však nebol zaznamenaný rozdiel v návštevnosti stránky. Po diskusii s šéfkou webu sme dospeli k záveru, že v tomto prípade je návštevnosť silne ovplyvnená aktuálnym dianím v spoločnosti a témami zverejňovaných autorských článkov.

V oblasti optimalizácie reklamných plôch sme zaznamenali masívny nárast hodnoty eCPM (effective cost per mille) - efektívna cena za tisíc zobrazení, čo predstavuje odhad tržieb za tisíc zobrazení reklamy. V kontexte zvýšenia ceny revenue v meranom období znamená tento nárast úspešnú optimalizáciu reklamných plôch a správne nastavenie reklamného servera. Dôležité je, že tento nárast v revenue a eCPM nastal aj napriek zníženému počtu impresií a CTR v meranom období. Tieto hodnoty budeme v nasledujúcom období sledovať a v prípade potreby implementovať zmeny, aby sa dostali do kladných čísel.

Celkový čas strávený na projekte (vrátane času interného programátora portálu) bol 170,5 hodiny.

Záver

Projekt redizajnu a optimalizácie webového portálu omediach.com považujeme za úspešný, nakoľko ciele stanovené na začiatku projektu boli splnené a výsledky predčili naše očakávania. Na záverečnej konzultácii so šéfredaktorkou webu Miroslavou Kernovou sme spoločne projekt vyhodnotili pozitívne a otvorili debatu ďalšej spolupráce v budúcom období. Spoločnosť FatChilli ďalej zodpovedá za správu reklamných plôch portálu a ďalší rozvoj webových stránok.