EN

I have been creating digital products for 5 years for various platforms. My portfolio includes diverse solutions for different products - from retail, ecom, and sporttech to horeca and edtech projects. Currently, I am actively involved in implementing various LLMs and creating new pipelines to improve design processes.

EN

I have been creating digital products for 5 years for various platforms. My portfolio includes diverse solutions for different products - from retail, ecom, and sporttech to horeca and edtech projects. Currently, I am actively involved in implementing various LLMs and creating new pipelines to improve design processes.

Quadro TV

Product context

Quadro TV is a B2B2C platform for managing TV content in hotels, restaurants, and other venues. The core product: ambient 4K video streams on the venue's screens. On top of this is a web-based client panel: tickers, promotional banners, videos, audio tracks. There is also a separate panel for managing clients and accounts on the company's side.

Product context

Quadro TV is a B2B2C platform for managing TV content in hotels, restaurants, and other venues. The core product: ambient 4K video streams on the venue's screens. On top of this is a web-based client panel: tickers, promotional banners, videos, audio tracks. There is also a separate panel for managing clients and accounts on the company's side.

My role

Full-cycle product designer from scratch. Wireframes, flows, full UI, mobile responsiveness, client calls, iterations through testing. Every screen of the user dashboard — from simple forms to complex legal requirements and edge cases with no obvious solution.

My role

Full-cycle product designer from scratch. Wireframes, flows, full UI, mobile responsiveness, client calls, iterations through testing. Every screen of the user dashboard — from simple forms to complex legal requirements and edge cases with no obvious solution.

Potential problems

Legal entity registration — lots of data, easy to lose context

The form collects a large amount of data, especially for legal entities. Without structure, the user loses their bearings and does not understand how much more there is left to fill in.

Potential problems

Legal entity registration — lots of data, easy to lose context

The form collects a large amount of data, especially for legal entities. Without structure, the user loses their bearings and does not understand how much more there is left to fill in.

Too many mandatory fields without understanding the progress

The risk of accidentally changing data entered in the previous steps

There is no visual separation between what has already been done and what lies ahead.

Registering a legal entity is not just about filling in three fields. It requires bank details, contact information, and legal data. A user who cannot see the end of the form gets anxious and quits. At the same time, the data entered previously must remain visible; otherwise, they have to scroll back to make sure everything is correct.

Registering a legal entity is not just about filling in three fields. It requires bank details, contact information, and legal data. A user who cannot see the end of the form gets anxious and quits. At the same time, the data entered previously must remain visible; otherwise, they have to scroll back to make sure everything is correct.

Solution

Multi-step form with a progress indicator and locked previous fields

I split the registration into sequential steps with a progress indicator at the top. Fields filled in during the previous steps are visible but locked for editing.

Solution

Multi-step form with a progress indicator and locked previous fields

I split the registration into sequential steps with a progress indicator at the top. Fields filled in during the previous steps are visible but locked for editing.

Progress indicator at the top — the user always knows where they are

The previous fields are locked and visible — the context is preserved, and accidental changes are prevented.

All fields are mandatory and marked with asterisks — no uncertainty

The user moves forward without losing sight of what they have already entered. Locked fields provide reassurance: the data is in place, and nothing has been lost. The entire project is built on the Gravity UI library — a unified component language and a time saver when developing under tight deadlines.

The user moves forward without losing sight of what they have already entered. Locked fields provide reassurance: the data is in place, and nothing has been lost. The entire project is built on the Gravity UI library — a unified component language and a time saver when developing under tight deadlines.

Potential issues

Many types of content on one screen — it's easy to get lost

The user manages devices, tickers, banners, video, and audio simultaneously. Without structure, this turns into an unreadable wall.

Potential issues

Many types of content on one screen — it's easy to get lost

The user manages devices, tickers, banners, video, and audio simultaneously. Without structure, this turns into an unreadable wall.

Different types of content are not visually separated

There is no quick way to understand how many slots have been used

The basic parameters of each element are hidden — you need to open each one

The product's audience consists of venue owners and administrators, who are non-technical users. They need to quickly get their bearings without having to read every single label. If a dashboard requires study, it has already lost.

The product's audience consists of venue owners and administrators, who are non-technical users. They need to quickly get their bearings without having to read every single label. If a dashboard requires study, it has already lost.

Solution

Color coding by type and key parameters directly on the card

Each content type has been assigned its own color. Key parameters are visible inline on the card without needing to open it.

Solution

Color coding by type and key parameters directly on the card

Each content type has been assigned its own color. Key parameters are visible inline on the card without needing to open it.

Color sections for each content type — orientation at a glance

On each card: devices, time slots, days of the week, speed, pause

Active elements counter in the top right corner of each section — remaining slots are always visible

Support is available directly from the main screen via a modal: Telegram, Viber, Max or a feedback form. The email is pulled from the account automatically — removing one step from an already simple flow.

Support is available directly from the main screen via a modal: Telegram, Viber, Max or a feedback form. The email is pulled from the account automatically — removing one step from an already simple flow.

Potential issues

Financial information is scattered — it's unclear how much is left and where the money is going

The user needs to see both the current account status and the billing history. Without separation, it all gets jumbled up together.

Potential issues

Financial information is scattered — it's unclear how much is left and where the money is going

The user needs to see both the current account status and the billing history. Without separation, it all gets jumbled up together.

The current plan and used slots are not immediately visible

Transaction history is not available without contacting support

There is no quick way to top up your balance or change your plan

The establishment owner must understand what they are paying for and how much they have left — without having to call support or search through the interface. Financial opacity creates distrust in the product.

The establishment owner must understand what they are paying for and how much they have left — without having to call support or search through the interface. Financial opacity creates distrust in the product.

Solution

Two tabs — overview and history — each answers its own question

I have split the financial section into two independent tabs, each with its own clear logic.

Solution

Two tabs — overview and history — each answers its own question

I have split the financial section into two independent tabs, each with its own clear logic.

Overview: current plan, used slots by each content type, balance, and monthly charge

History: transactions containing date, amount, balance, status and comment — with pagination

The top-up button is always visible, plan change is available at the bottom of the overview

The user sees the full picture without contacting support. Every charge is explained. Balance and limits are visible. Upgrading the plan is just one click from the current screen.

The user sees the full picture without contacting support. Every charge is explained. Balance and limits are visible. Upgrading the plan is just one click from the current screen.

Potential problems

Three independent windows on the TV screen — it is impossible to set up everything at once

The TV screen is divided into three zones, each configured separately. Without a structure, the user gets lost in the parameters and does not understand how the final result will look on the screen.

Potential problems

Three independent windows on the TV screen — it is impossible to set up everything at once

The TV screen is divided into three zones, each configured separately. Without a structure, the user gets lost in the parameters and does not understand how the final result will look on the screen.

Three zones with different parameters — it's difficult to keep in mind at the same time

There is no way to see the result before publishing

Colors, font size, scroll speed — you have to guess everything

Creating a banner is the most complex flow in the application. Users who are not technically confident easily give up halfway through if they do not understand what the end result will be.

Creating a banner is the most complex flow in the application. Users who are not technically confident easily give up halfway through if they do not understand what the end result will be.

Solution

A step-by-step modal with a live preview at each step

I split the setup into sequential steps, one zone at a time. The live preview shows the result in real-time at the bottom of the modal.

Solution

A step-by-step modal with a live preview at each step

I split the setup into sequential steps, one zone at a time. The live preview shows the result in real-time at the bottom of the modal.

A step-by-step indicator at the top — one zone at a time, no overload

Contextual settings for each zone: text, speed, font, colors, delay

Live preview below — the user sees how the banner will look on the screen before publishing

A complex feature that doesn't feel complex. The step-by-step structure removes the need to keep everything in your head at once. The preview eliminates the fear of making a mistake.

A complex feature that doesn't feel complex. The step-by-step structure removes the need to keep everything in your head at once. The preview eliminates the fear of making a mistake.

Result

The product is ready for launch — the complexity is hidden behind simplicity

Dozens of edge cases, legal requirements, a tight budget, and users who must understand everything without an instruction manual. The result is a product that looks simple because we had to think on behalf of the user in advance.

Result

The product is ready for launch — the complexity is hidden behind simplicity

Dozens of edge cases, legal requirements, a tight budget, and users who must understand everything without an instruction manual. The result is a product that looks simple because we had to think on behalf of the user in advance.

Full cycle from wireframes to finished UI including mobile adaptation

The product has passed testing and is in the final stage before launch

Launches through a large, established company with clear market ambitions

Not everything can be shown at this stage. After the launch, there will be a complete case study with all the details, rejected solutions, and what went on behind the scenes.

Not everything can be shown at this stage. After the launch, there will be a complete case study with all the details, rejected solutions, and what went on behind the scenes.

Create a free website with Framer, the website builder loved by startups, designers and agencies.