Navigáció

RTL Magyarország

Teljes frontend csere és redesign ``video first`` szemléletben

2019-
  • #frontend
  • #ux
  • #média
  • #vue.js
  • #design
www.rtl.hu

Előzmények

Az ügyfél az Rtl.hu teljes megújításához keresett partnert. A régi, kissé már elfáradt design megújítására a Virgo Product Design csapata merészen újragondolta, és alapjaiban változtatta meg a médiaszolgáltató teljes weboldal struktúráját. Az új website a nézői igények és a csatorna üzleti, brandépítési céljai alapján készült el.

Virgo esettanulmányok - RTL projekt
Felhasználói igények és nagyvállalati KPI-ok

A Virgo Prdouct
designer csapata a korábbi, egyes csatornákra tagolt szerkezet helyett egyetlen, a műsorokra és a csatorna sztárjaira fókuszáló site létrehozására tett javaslatot a médiavállalatnak. Ez a radikális elgondolás elnyerte az RTL bizalmát, elkezdődhetett a közös munka.

 

Az új gyűjtőoldal kapcsán a KPI-ok a következők voltak:

  • teaser videókkal a látogatók átterelése az RTL Most-ra a teljes adások megnézéséhez
  • a látogatók információszerzésének megkönnyítése az őket leginkább érdeklő eseményekről, hírekről, műsorrendről
  • az RTL brand magyarországi erősítése

A Virgo Product Design csapat ezúttal is alapos kutatómunkát végzett. Interjúkat készítettek, felhasználói szokásokat mértek fel és feltérképezték a versenytársak irányadó megoldásait, az elkészült prototípusokat usability tesztekkel validálták. Az RTL oldaláról is érkezett segítség: közvéleménykutatással segítették  az adatgyűjtő munkát. Az eredmények megerősítették, a video first és mobile first tervezési elgondolás helyességét.

Kihívások
  • Komponens alapú, fluid design

A legkülönbözőbb méretű kijelzőkhöz egyaránt igazodó design készült. A legfontosabb képernyők koncepcióját öt különböző felbontáshoz igazodva tervezték meg, a megvalósíthatóság igazolására a fejlesztő kollégákat kérték meg. Az ügyfél jóváhagyása után a következő lépés a usability teszt volt: a prototípus desktop és mobil verziójának tesztelésére felkért felhasználók segítségével fejlesztették tovább a UX-t.

  • Projektmenedzsment

A nagyvállalati projektek során a hatékony együttműködés kialakítása kulcsfontosságú. Az ügyfélnél a sales, a digitális osztály és az oldalszerkesztők igényeit, elképzeléseit kellett közös nevezőre hozniuk és összeegyeztetniük a webdesign és UX ökölszabályaival és a választott technológia kínálta lehetőségekkel.

  • CMS funkcionalitás kiegészítése egyedi címlapszerkesztő felülettel
Virgo esettanulmányok - RTL projekt
Virgo esettanulmányok - RTL projekt

Kollaboratív design, kiváló együttműködés

A kezdeti nehézségek után kiváló összhang és kölcsönös bizalom alakult ki az ügyfél, a designerek és a fejlesztők között. A használt kollaboratív design eszköz, a Figma jelentősen megkönnyítette a közös munkát: lehetőséget adott az ügyfél számára a projekt folyamatos figyelemmel kísérésére és a gyors, pontos visszajelzésekre. 

Az eredeti koncepció védelmében szorosan együtt dolgozott a designer és a fejlesztő csapat, az RTL tartalomszerkesztő munkatársai számára pedig videó- bannerkezelési útmutatók is készültek.

Technológiák, keretrendszerek, design eszközök

  • Vue.js
  • Atomic design system
  • Figma
Eredmények

A mintegy hat hónapig tartó közös munka az élesítés után sem ért véget. Újabb kutatások készültek az oldal használatáról az optimális működés elérése érdekében, és a funkciók fejlesztésével folyamatosan fejlődik az ügyfélélmény.

BAR 21 BAR 22