Project Goal

Yettel Hungary approached us with the task of implementing their new brand identity across their digital platforms. We were honored to be entrusted with this task, especially since at the time, both the new name and visual direction were kept entirely confidential.
The goal was to ensure that by the time the company changed its name and visual identity, their web platforms and app would be updated accordingly, ensuring a smooth transition. We supported this effort through Product Design, Front-end, and Back-end development.

Challenges

One of the biggest challenges was the short deadline, requiring close collaboration between our experts and the client’s team. We had to rethink and redevelop many components and pages to ensure that the new brand would work seamlessly across platforms. This had to be done in a way that maintained consistency on both the responsive website and the mobile application.
Thanks to several years of prior collaboration, our team possessed the necessary knowledge and experience to work efficiently with the client, ensuring a swift and effective project execution.

Design Process

1. Delivery Strategy and Team Setup

In the initial phase of the design process, it was crucial to create a well-thought-out roadmap and establish a well-organized team from both the client’s and our side. This ensured that all processes were in sync and each step progressed in the most optimal way possible. By agreeing on milestones and tasks, we could more easily track progress and ensure that we delivered the required elements on time and with the appropriate quality.

2. UX and UI Design

• UX Optimization
  Since nearly every page had to be completely rebuilt, we took the opportunity to optimize the functionality alongside the visual refresh. Our goal was to not only update the interfaces visually but also enhance the overall user experience. This included designing entirely new pages to accommodate the introduction of new tariffs and services by Yettel.
• UI Design
  We redesigned each page and component, ensuring that every element met the digital requirements of Yettel’s new brand identity. By working simultaneously on both the web and app interfaces, we ensured consistency across platforms, creating a unified user interface.
• Design System
  As part of the project, we continuously expanded the new design system, incorporating new components while maintaining and updating existing ones to ensure coherence and scalability.
• Handoff
  We held regular internal meetings with developers to keep them updated on the progress of the designs and to ensure they had all the necessary information for implementation. In addition, we created developer documentation, which helped clarify expectations and streamline the development process.

Results and Outcomes

The project was successfully completed on time, and the Yettel Hungary website and mobile application were fully revamped, offering a cohesive user experience across all devices. This achievement was largely due to the well-organized approach and collaborative mindset of the client’s digital team, making the entire process smoother and more efficient.

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.

Project Goal

The client aimed to start online sales for three product categories:

• mobile scaffolding,
• ladders,
• and scaffolding parts.

The goal was to create a webshop that adheres to professional standards, showcasing the different types of scaffolding and the configuration options related to them. The finished website did not need to closely follow Layher’s current branding; it was far more important that it reflected the premium quality that Layher products represent.

Challenges

One of the main motivating factors for creating the new webshop was to bring more focus to the mobile scaffolding product category in sales. While Layher is the market leader in building scaffolding in Hungary, it is not in mobile scaffolding. This is due not only to strong competition but also to a market characteristic: the Hungarian market is extremely price-sensitive, and Layher’s products are positioned at a higher price point. Therefore, we designed a user journey for the webshop that best serves this multi-step introduction process for customers.

Layher stands out from its competitors in terms of expertise and customer support related to its products, so it was essential to highlight the option for personal assistance for customers within the webshop. In the construction industry, customers appreciate personal communication and often visit the company and check the showroom before making a purchase. Therefore, the webshop emphasized the possibility of personal assistance, maintaining a balance between communication options (phone consultation, chat) and online purchasing.

Another challenge was solving the delivery issue, as the products are oversized and heavy, making it difficult to calculate the delivery cost. However, from the end user’s perspective, knowing the delivery fee is important so that they can decide whether in-store pickup or home delivery is more cost-effective before completing the purchase. To address this, we created a shipping cost calculator that calculates the delivery cost for the customer based on product attributes and postal code.

Design Process

1. Delivery Strategy and Team Setup

In the initial phase of the design process, we uncovered the client’s motivations behind the need for a digital product. Afterward, we built prototypes from wireframes to validate our solutions. Following this, we constructed the webshop’s elements based on an approved UI concept and compiled them into a UI kit.

2. Research and Analysis

• Stakeholder Interviews
  We conducted in-depth interviews with key individuals and experts from the company to understand any potential pain points and to gain a detailed understanding of the business model and goals behind the creation of the new webshop.
• User Interviews
  In addition to decision-makers, we spoke with the company’s customers, discussing their purchasing habits, preferred communication channels (and why they favor those channels), and the importance of expert advice.
• User Story Map
  We created a detailed user story map outlining the key functions needed for the future operation of the webshop.

3. UX and UI Design

• UX Design
  Based on the information gathered, we created a detailed sitemap for the webshop and designed the connection points between Layher.hu and the new webshop. Using personas, we established possible user journeys. We reviewed customer requirements based on detailed wireframes and incorporated the results of iterations into the plans. The results were tested through prototypes.
• UI Design
  We created a fresh and modern visual identity for the webshop in line with Layher’s branding, paying special attention to ensuring that functions like the shipping cost calculator or product selection assistant were easy to use and understandable on all screen sizes.

Results and Outcomes

By the end of the project, we created a unique webshop with a visual atmosphere that aligns perfectly with the products. Throughout the purchasing and information-gathering processes, we considered it essential to provide active support to users. One of the primary reasons for this is that a significant portion of workers in the construction industry prefer using traditional communication channels (phone calls, face-to-face conversations) to handle procurement-related tasks, where immediate feedback is guaranteed. Additionally, rolling scaffolds are complex and expensive technical products, often requiring expert assistance and further consultation for proper configuration. Based on these factors, we integrated solutions into the webshop that facilitate two-way communication for customers, ensuring that the platform is easy to navigate and functional on mobile devices as well.

Project Goals

PPG Trilak, a paint manufacturer and distributor, was founded in 1907 in Budapest. The company, still a market leader in Hungary, operates as a subsidiary of PPG and exports about one-third of its production abroad.

Due to the rise of online shopping and the impact of the pandemic, the company decided to take its first decisive step toward electronic sales. They sought a solution that could be launched quickly and developed incrementally, fully meeting their sales vision.

The click & collect webshop best met our client’s expectations. We created a custom solution tailored to the unique characteristics of the franchise network and the complexity of the customer base.

Challenges

The complexity of the task lay in PPG Trilak’s diverse customer base, which includes both professional experts (B2B) and occasional home renovators (B2C). Creating an optimal customer experience for all target groups was a significant challenge, as we had to provide knowledgeable support for casual buyers while not hindering the product selection process for returning professionals.

A key goal was to ensure that all customers could quickly and easily find the right products with the appropriate level of support, without the different journeys interfering with each other. For example, frequent professional customers should not be slowed down by excessive guidance, while casual shoppers should receive comprehensive assistance and expert support, similar to what they would experience in stores. To support informed decisions, we conducted UX research to understand the real needs and behaviors of the client’s customer base.

Design Process

Various UX and UI design methods were employed during the project to understand the needs of the client and the different user groups.

1. Research and Analysis

• Stakeholder Interviews
  Decision-maker interviews aimed to uncover key pain points and expectations related to the project from organizational leaders, as well as to understand the business model and goals behind the new webshop in detail.
• User Interviews
  We interviewed professional painters (B2B) and DIY users (B2C), aiming to understand their purchasing habits, needs, and motivations related to buying paint and other accessories, so we could thoroughly grasp the user needs associated with the new PPG Trilak webshop.
• Web Analytics
  The web analytics aimed to map users’ attitudes and behavioral patterns based on visit data, further deepening our understanding of the target audience.
• Competitor Analysis
  We analyzed competitors’ online solutions to identify and evaluate their strengths and weaknesses. We examined key areas like content served and technological solutions in competing webshops.

2. Processing Results

We grouped the most important findings from the UX research by identified problem areas, then synthesized the results into wireframes based on significant insights. The problem areas included:

• Functionality adapted to the target audience’s habits,
• Product structure suitable for both professionals and casual users,
• Store locator within the webshop,
• Color search process aligned with business needs,
• Analysis of multiple partner webshops operating concurrently,
• Consideration of economic trends and the rise of digitalization.

3. Developing the Operating Model and Final Interface

The click & collect solutions effectively showcase the product range, guide customers to stores, and promote products online, allowing conversions and transactions to be measured during online marketing campaigns. Another major challenge of the project was the franchise network’s unique characteristics, which had to be considered when designing the e-commerce solution.

Since there was no central, up-to-date system for the franchise partners’ inventory and operations, we expanded the admin functions to ensure quick and efficient handling of functions such as:

• Product range expansion,
• Price import,
• Order management,
• Virtual product management based on color palettes.

Results and Outcomes

Based on initial feedback from franchise partners, a well-thought-out and carefully implemented solution was delivered, providing a solid foundation for the company’s future development plans and the gradual build-up of the digital sales channel.