Виробництво · E-commerce каталогVeron · виробник дверей, ЛьвівЗапущено

Veron Doors

Редизайн doors-veron.com.ua для львівського виробника дверей. Усе зробив я: UX каталогу, візуальна система, верстка, адмінпанель для публікації об’єктів і запуск на сервері.

01 — Проєкт: Veron Doors
Роль: Product Designer і розробник — повний цикл
Обсяг: UX-аудит, Інформаційна архітектура, UI і візуальна система, Верстка, Адмінпанель, Запуск на сервері
Стек: HTML, CSS, JavaScript, Ruby on Rails, PostgreSQL, Docker, Claude

02Контекст

Veron виробляє двері у Львові й постачає їх у житлові комплекси. Архітектори, девелопери й приватні покупці дивляться каталог на сайті, перш ніж зателефонувати.

Завдання: покращити логіку й вигляд — спершу головна, каталог і картка товару, потім інструменти, щоб команда сама підтримувала сайт.

03Проблема

Старий сайт не допомагав обрати двері, а команда не могла оновити його без розробника.

P1На головній сторінці старого сайту не працював каталог, тому відвідувачі не могли дійти до дверей, і заявки втрачалися.
P2Старий сайт виглядав застарілим, а на телефоні ним було незручно користуватись.
P3Команда не могла сама додавати нові об’єкти на сайт: кожна зміна йшла через розробника.

04Дослідження

Методи

UX-аудит старого сайту: пройшовся по головній, каталогу й картці товару та визначив, що працює, а що ні; зберіг скріншоти «до» і виміряв швидкість у Google PageSpeed (телефон — 52 зі 100)
Аналіз конкурентів: подивився сайти інших виробників дверей — як вони влаштували каталог, показують ціни й реальні об’єкти
Розмови з командою Veron: хто працює з сайтом, що заважає і що досі доводиться робити через розробника
Цілі бізнесу, узгоджені з командою: більше звернень без дзвінка менеджеру, реальні об’єкти як доказ і оновлення без розробника

Що я з’ясував

Каталог на головній старого сайту не працював, і саме тут сайт втрачав найбільше заявок.
Покупці хочуть одразу бачити ціну, без дзвінка менеджеру.
У каталогах конкурентів рідко можна порівняти дизайни однієї моделі поруч.
Головна біль команди — кожне оновлення потребує розробника, тому нові об’єкти потрапляють на сайт із запізненням або взагалі не потрапляють.

05UX

Інформаційна архітектура

Veron Doors

01Головна

02Каталог

03Товар

04Накладки

05Портфоліо

06Блог

07Процес

08Про нас

09Питання

10Контакти

Основний шлях

01Вхід
02Перегляд каталогу
03Фільтр за типом, ціною й серією
04Картка товару
05Двері в реальних об’єктах
06Замовлення або замір

Портфоліо реальних об’єктів — частина шляху покупця: доказ, що двері встановлюють у масштабі.
Каталог розбитий на 7 категорій з фільтрами за типом, ціною й серією: до потрібних дверей можна дійти за два-три кліки.

Ключові рішення

D1Інструмент публікації замість статичної сторінки

Проблема: Завершені об’єкти — найкращий аргумент продажу Veron, але кожне оновлення потребувало розробника.
Рішення: Невелика адмінка, де команда сама додає об’єкти, замість окремих сторінок, які щоразу правив розробник.
Чому: Сайт лишається актуальним після здачі.

D2Каталог, який працює з головної сторінки

Проблема: Каталог на головній старого сайту не працював, тому відвідувачі не доходили до дверей, і заявки втрачалися.
Рішення: Робочий каталог, до якого можна одразу дійти з головної: категорії, фільтри за типом, ціною й серією та ціна на кожній картці.
Чому: Відвідувач швидше доходить до потрібних дверей і залишає заявку.

06Дизайн

Світла стримана система: фото продукту й один червоний акцент.

Фон#FFFFFF
Графіт#292F33
Сигнальний червоний#E0364C
Радіус2–4 px

Сторінки спроєктовані одразу в коді як єдиний набір компонентів.
У каталозі ціна видна одразу на картці, тому покупець бачить вартість без дзвінка.

07Розробка

Спроєктував і зібрав сам

Я зібрав його сам, тож без передачі між дизайном і кодом.

Верстка на HTML, CSS і JavaScript, написана з Claude.
Адмінпанель із модулем «Портфоліо»: клієнт додає об’єкти (назва, тип, місто, рік, фото) без коду.
Серверна частина на Ruby on Rails з базою PostgreSQL, запакована в Docker і запущена на сервері.
Підключено Google Search Console, щоб бачити, як сайт показується в пошуку; далі — Google Analytics 4.

08Фінальний продукт

01Каталог: 81 модель, фільтри за типом, ціною й серією.

02Картка товару: ціна, розміри, сторона відкривання й замовлення.

03Внутрішній калькулятор, що формує й друкує комерційну пропозицію.

Відкрити сайт

09Результат

Сайт працює за адресою doors-veron.com.ua.
Під ключ: дизайн, розробка й запуск.
У каталозі 81 модель у 7 категоріях, а команда сама публікує нові об’єкти через адмінку, без розробника.
На телефоні оцінка PageSpeed зросла з 52 до 100.
Робочий каталог на головній скорочує шлях до заявки: відвідувач одразу бачить моделі й не шукає їх по сайту.

Google PageSpeed Insights, головна сторінка. Кожна оцінка від 0 до 100, чим більше, тим краще. Старий сайт ліворуч, новий праворуч.

Ефективність: Наскільки швидко сторінка відкривається й стає зручною.
Доступність: Чи зручно всім: читабельний контраст, зрозумілі кнопки, підписи для програм зчитування з екрана.
Найкращі практики: Чи сайт зроблений безпечно й за сучасними правилами.
SEO: Чи може Google зрозуміти, про що сторінка.

Телефон

Ефективність 52100

Доступність 74100

Найкращі практики 92100

SEO ~~100~~100

Старий сайт, телефон: ефективність 52, доступність 74, найкращі практики 92, SEO 100. — Було

Новий сайт, телефон: усі чотири оцінки 100. — Стало

Комп’ютер

Ефективність 84100

Доступність 72100