fbpx

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
Virgo esettanulmányok - RTL projekt

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át és frontend fejlesztését bízta ránk. A Virgo Product Design csapat 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.

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

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át javasoltuk a médiavállalatnak. Ez 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 az 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

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 hoznunk és összeegyeztetnünk 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ókat készítettünk.

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ülnek az oldal használatáról az optimális működés elérése érdekében és funkciók fejlesztésével javítjuk az ügyfélélményt.