Hogyan terveztük újra az RTL weboldalát videofirst szemléletben?

Egy website redesign mindenkinek nehéz feladat, viszont felbecsülhetetlen értékű tanulságokkal szolgálhat.

Ügyfelünk azt az ambiciózus célt tűzte ki, hogy megújítja az rtl.hu weboldalt, ami fölött kissé eljárt az idő. A feladat scopeja kiterjedt a design teljes megújítására és annak frontend fejlesztésére is.

Nincs product design kutatás nélkül

A projekt kezdetén stakeholder interjúkat készítettünk, ahol megismertük az új oldallal szemben támasztott elvárásokat, az üzleti célokat. Emelett elvégeztünk egy konkurencia kutatást is, ahol elemeztük a hazai versenytársakat, bemutattuk a legjobb nemzetközi példákat, de kitekintettünk egyéb iparágak irányadó megoldásai felé is.

A webanaltika révén feltérképeztük a korábbi oldal felhasználói szokásait, kiderültek a gyengén teljesítő oldalak, ez pedig nagy segítséget jelentett a tervezés fókuszpontjainak meghatározásában. Az RTL piackutatásokkal is segítette a munkánkat, így adatokban nem szenvedtünk hiányt.

A redesign folyamat során usability tesztre is sor került, a prototípus desktop és mobil verzióját mutattuk meg hús-vér embereknek. Ez meglehetősen hasznosnak bizonyult, a navigációval kapcsolatban kiderültek olyan hibák, melyek javításával a felhasználói élményben jelentőset tudtunk előre lépni.

Újragondolt site struktúra

A régi RTL site — pontosabban site-ok — úgy épültek fel, hogy minden egyes csatornának külön site-ja volt. A struktúra újragondolása során korán fény derült arra, hogy nem kifejezetten a csatornák a fontosak a felhasználó célja szempontjából, mint inkább a műsorok, illetve a celebritásokkal kapcsolatos infók. A globális struktúra újratervezését ez a megfigyelésünk határozta meg.

Észrevettük, hogy a régi site-on nem volt egy olyan közös gyűjtőoldal, ahol vegyes tartalom ajánlás történik. Ugyan az RTL Klub részben hasonló logika szerint funkcionált, de ez nem volt teljesen egyértelmű. Ezért hoztunk létre egy új közös gyűjtőoldalt, ami az RTL.hu főoldala és valamennyi csatorna és műsor tartalmából válogat.

Fontos változás volt az is, hogy a csatornák saját weboldalai megszűntek és beleolvadtak az RTL egységes új rendszerébe.

Szintén a felhasználói igényekre reagálva az új struktúrában előtérbe kerültek a sztárok és szereplők oldalai, ahol az alapinformációkon túl, hozzájuk tartozó tartalmakat is el lehet érni.

Design folyamat atomic design alapokon

Célok és kontextus

Kezdetektől fogva a struktúra egyszerűsítése és könnyű szerkeszthetőség határozta meg gondolkodásunkat, ami pedig a design szemléletünket illeti, videó és mobile first tervezés voltak a munkánk alapkövei. Ez nem is véletlen, a webanalitikai adatok alapján tudtuk, hogy a globális trendeknek megfelelően 70% felett használják mobilról az oldalt a felhasználók, illetve leggyakrabban videó végoldalakra érkeznek.

A két legfontosabb KPI a megnézett videók mennyiségének növelése és a teljes adásokra terelés volt. Az előbbit a könnyen elérhető és kontextus szerint releváns tartalmak közvetlenül a játszott videó környezetében való ajánlásával igyekeztünk segíteni.

Vállalható kompromisszumok

Minden design projekt kompromisszumok megkötésével jár együtt, jelen esetben sem volt ez másként. Talán nem mondunk újdonságot azzal, hogy a sales csapat szeretett volna minél több értékes pozícióban bannerzónákat elhelyezni. Ezért a display hirdetések pozícióira és méreteire is javaslatokat vittünk, annak érdekében, hogy minél kevésbé legyen zavaró a felhasználók számára, illetve a tartalomfogyasztásra, valamint minden kijelzőn megfelelően tudjon megjelenni.

Kulcs oldalak tervezése

A design tervezés a kulcsképernyők koncepciójának megrajzolásával kezdődött: Öt oldal készült, öt különböző felbontásban.

Mielőtt még elküldtük volna az ügyfélnek a velünk egy csapatban ülő frontendesekkel áttekintettük a terveket és megvizsgáltuk őket megvalósíthatóság szempontjából is.

Fontosnak tartjuk, hogy a fejlesztőt is bevonjuk a tervezési fázisba, még ha ez költségnövekedést is jelent. Az így involvált fejlesztő sokkal jobban érti a termék vízióját, és még inkább törekedni fog az eredeti design koncepció tiszteletben tartására.

A prezentációnk során az ügyfelünk rendkívül elégedett volt a terveinkkel, így már készülhetett is hozzá a prototípus, amit — ahogyan korábban említettük — felhasználókkal validáltunk.

Design System Atomic Design alapon

A kulcsoldalak elfogadtatása után elkezdtük kialakítani az Atomic Design alapú design systemet Figmában. Ez azt jelenti, hogy a legapróbbtól a teljes blokk szélességű elemekig megalkottuk a komponenseket, amiket újra fel tudtunk használni később a tervezés során. Az is nagy előnye a megközelítésnek (és a Figmának), hogy a komponensek könnyen módosíthatók, és a módosítások mindenütt azonnal frissülnek.

Amint elkészültek az elemek atom és molekula szinten — például ikonok, gombok, inputok -, rögvest létrehoztuk a saját master komponenseiket. Az öszetettebb organizmusokból, templatekből, pagekből csak akkor készültek komponensek, ha az ügyfél is jóváhagyta őket.

Akadnak kivételek, amikor a folyamatot megkönnyíti bizonyos elemek létrehozása korábban. Például ha ugyanazokat az ajánló blokkokat több oldalon használjuk, de ha később módosítunk például az organizmus magasságán, akkor mindenhol utána kell húznunk a designt, különben rácsúszik más elemekre.

Amint létrehoztuk ezeket az elemeket, folytattuk a további oldalak tervezésével és kisebb csomagokban küldtük az ügyfélnek. Folyamatosan ápoltuk és bővítettük új elemekkel a design systemet.

A design munka a design leadás után sem ér véget

A jó product designer tudja, a projekt életében a látványterv csak egy munkafázis, az igazán fontos a lefejlesztett végtermék lesz. Hogy ne sérüljön az eredeti koncepció, a dizájnerek folyamatosan segítették a frontendesek munkáját, aktívan követték az implementációt, részt vettek a sprint reviewkon. Továbbá az RTL szerkesztőinek is segítettünk a különböző új és meglévő tartalmak legyártásában: ehhez készítettünk számukra egy guideline-t is a megfelelő képek kivágásáról és elkészítéséről.

Összességében folyamatosan igyekeztünk segíteni egymás munkáját mind Virgo Product Design, mind RTL oldalon, hogy az eredmény minél jobb legyen

Mit tanultunk a redesign projektből?

Az RTL redesign 6 hónapig tartott és ez idő alatt számos tanulsággal gazdagította a Product Design csapat “kollektív tudását”:

A kollaboratív design meghatározó alapköve a Product Design csapatunknak: nem file-okat küldözgettünk az ügyfelünknek, hanem realtime kommentelésre, közös munkára invitáltuk a megrendelőt. Erre tökéletes eszköz volt a Figma: a fájlok megosztása révén — operációs rendszertől függetlenül — végig tudták kísérni a design folyamatot. Mindez a gyakorlatban annyit tesz, hogy a megrendelő egy olyan böngészőben megnyitható linket kap, amihez bármilyen típusú böngészőben kényelmesen hozzá tud férni. Ez a keret biztosította a hatékony együttműködést és teljes transzparenciát a projekt során.

Bár a Figmát nagyon szeretjük, de a mobil prototípus nem működik túlságosan megbízhatóan a usability tesztekben. Ez belassulásokban, és lefagyásokban nyilvánul meg, különösen ha fotó heavy a proto, mint esetünkben volt. Persze egy rutinos kutató könnyedén kezel egy olyan helyzetet, ha a prototípus lefagy, de azért pár teszt után elég kellemetlenné teszi a munkát.

Szintén a mobil usability teszteknél történt meg, hogy a korábban nagyon jól működő Lookback rögzítőszoftver beadta a kulcsot az első teszt vége felé, és odaveszett a felvétel. Ezt azzal oldottuk meg egyébként, hogy írásos jegyzeteket is készítettünk, a további tesztekben pedig visszatértünk a képernyőrögzítés legegyszerűbb és egyben legbiztosabb módjához a QiuckTime Playerhez, ami a következő 9 teszben zökkenőmenesen működött.

Hogyan tovább?

Eléggé kényelmes arra gondolni, hogy a launch a product design folyamat vége, de ez nem egészen így van, ezért mi sem dőltünk hátra az RTL.hu élesítése után.

UX-es körökben él a mondás, hogy “the launch is an experiment”, azaz az élesítés lényegében egy kutatás. Úgy is fogalmazhatunk, hogy az új design egy hipotézis, egy taktikai eszköz ami megoldja a felhasználó és az üzleti oldal problémáját.

Ennek szellemében folytatjuk a közös munkát, gyűjtjük az kvantitatív adatokat az új Rtl.hu site használatáról, és az insightok alapján segítünk a folyamatos optimalizálásban a bevezetés első hónapjaiban.

Design Tervezés és frontend fejlesztés:

Virgo Product Design

Projekt management:

Kovács Szandra, Pohly Ferenc, Balla Adrián

UX és UI Design:

Fenyvesi Roland

User kutatás:

Boros Norbert

Vezető frontend fejlesztő:

Boros Gergely

Közreműködtek még:

Csonka Laca, Szűcs János, Pintér Tamás, Petyánszki Norbert, Szegedi Attila, Höltzl Tamás — és az RTL digitális csapata

Rólunk

A Virgo Product Design senior szakemberekből álló csapata nevéhez hűen digitális terméktervezéssel foglalkozik. Mind a design gondolkodás — ami nálunk nem csak design thinkinget, hanem a design sprinteket is jelenti — mind a design produkció jelen van UX, UI és fronted fejlesztések révén.

Ha szívesen dolgoznál együtt velünk, írj nekünk a sales@virgo.hu címre!