Transforming into a Hybrid News Platform

Project Goal

Virgo Systems partnered with RTL Hungary to redesign their digital platform, transitioning from a video-first website, (which was also designed by Virgo Systems in 2019) into a comprehensive news portal. This project involved an overhaul of UX/UI design, integrating both text and video content for an engaging user experience. The redesign was supported by Virgo’s front-end and back-end development, ensuring optimal performance across web and mobile platforms.

RTL Hungary sought to transform their existing video-centric platform into a comprehensive news portal. The challenge was to combine video content with more text-based articles, ensuring that both forms of content complement each other and drive engagement. The goal was to integrate RTL’s news articles, TV shows, and promotional content into a single, coherent digital experience.

Challenges

We encountered several challenges that made this project unique.

We had to design a news portal with a unique structure, which included space for TV broadcasts, show videos, and promotional content. This duality had to be unified in a way that, alongside the video content, much more text-based content and articles would be visible. According to the concept, on the new portal, different types of content had to complement each other — meaning that text-based content should have related video content, and video content should also be accompanied by text.

The biggest challenge was rethinking and designing the user experience, where we had to channel various ideas and concepts within the newly forming editorial team into implementable solutions.

Even before the brand rebranding, we sought visual solutions that would support and make the future interface easy to use. We also had to design a temporary rtl.hu logo to ensure the news portal remained easily recognizable during the transition period.

Design Process

1. Research & Analysis

As the first step in the process, we began with UX research, during which we thoroughly assessed the needs of both the client and the users.

• Stakeholder Interviews
  We conducted in-depth interviews with leaders and experts from various departments of RTL Hungary to understand the business goals and future visions for how content production would work.
• User journey Map
  We mapped out potential user journeys to gain a deeper understanding of user behavior and content consumption habits.

2. UX Design

• Information Architecture
  We carefully considered how the site could structurally serve the various content of news and shows, ensuring that users could easily and clearly find what they were looking for, while also promoting further content consumption.
• Wireframes
  We created wireframes for the key pages (homepage, article page, show page) and discussed any questions or modification requests based on the designs. At this stage, it was still easy and quick to make changes to the concepts.
• Banner Strategy
  Since a significant portion of the site’s revenue came from ad displays, we worked extensively on placing the banners in optimal locations and sizes. We aimed to create a balance that would generate the expected revenue without compromising the user experience.

3. Concept and UI Design

• Concept
  To find the exact vision for the visual direction, we first gathered UI mood boards, which we reviewed and expanded with the client. Based on the chosen style, a concept was created that laid the foundation for the visual direction of the UI designs.
  UI Design
  We designed every page in both desktop and mobile views, following a defined priority order.
• Design System
  First, we established the basics: colors, typography, grid, spacing, etc. Then, we continuously expanded and documented the new component library.

4. Frontend Development

• We developed a single-page application based on Vue.js 3, in line with modern expectations, with server-side rendering (SSR) support due to the importance of SEO and performance.
• The dynamic content was integrated via a REST API, alongside third-party authentication systems and push notification services.
• The codebase was developed with a cross-platform mindset, ensuring that the development of the iOS and Android mobile apps remained cost-efficient in parallel with the web system.