Navigáció

RTL Hungary

Complete front-end replacement and redesign in a video first approach

2019-
  • #media
  • #design
  • #frontend
  • #ux
  • #vue.js
www.rtl.hu

Antecedents

The client was looking for a partner for the allround renewal of Rtl.hu. We were made incharge of the renewal of the old design and the frontend development. The Virgo Product Design team came up with a bold design, knocked down the old site structure and constructed a new one. The new design was based on viewer needs and on the channel’s business and brand building targets.

 

User needs and corporate KPIs

Our recommendation to the media company was to replace the previous structure segmented by their different channels with a new one that focuses on the stars of their aired content. With this radical thinking we earned RTL’s trust and began to work.

 

The gleaner website’s KPIs:

  • Teaser videos to redirect visitors to watching full aired contents on RTL Most
  • Helping website visitors in easy information gathering of events, news or time tables they’re most interested in
  • Strengthening the RTL brand in Hungary

The Virgo Product Design team did a thorough research as always. They conducted interviews, measured user habits, researched the competition’s authoritative solutions, and validated the prototypes that were made. RTL supported our data gathering with a public survey. The results confirmed our video first and mobile first approaches.

Challenges
  • Component based fluid design

The design was made adaptive to many different screen sizes. The conception of the key displays were tailored to five different resolutions, the developer team helped us confirm feasibilities. After client approval our next task was the usability testing when the UX was further developed based on user feedback from testing the prototypes’ desktop and mobile versions.

  • Project management

Establishing effective collaboration is key on enterprise projects. We had to combine the needs and visions of the sales, digital and editor divisions with the web design, UX rules and the possibilities offered by the chosen technology.

  • CMS functionalities completed with a unique cover editor surface

Collaborative design and perfect collaboration

The difficulties at the start were replaced by unity and trust between the client, designers and developers. Figma, the collaborative design tool we used made our work easier by giving the client continuous supervision over the project and ability to give fast and precise feedback.

To protect the original concept the designer and the developer team worked hand in hand, and the RTL editor division received guidelines for video and banner management.

Applied technologies, frameworks, design tools

  • Vue.js
  • Atomic design system
  • Figma
Results

The almost 6 months collaboration didn’t stop after the launch. New researches were made on how the page is used to perfect user experience by optimized running and updated functionalities.

BAR 21 BAR 22