МИ ПРАЦЮЄМО ДЛЯ УКРАЇНИ
Вхідні дані
Хід роботи
Карточка товару — це «обличчя» продукту та ключова точка прийняття рішення користувачем. У ніші домашнього текстилю, де емоційне сприйняття та чіткість характеристик відіграють вирішальну роль, зручність інтерфейсу напряму конвертується в прибуток. Якщо клієнт не може швидко знайти ціну, зрозуміти умови опту або роздивитися текстуру тканини, він залишає сайт. Редизайн для «Рушничка» мав на меті усунути ці бар’єри та зробити шлях користувача до покупки максимально коротким і приємним.
Процес оновлення розпочався з глибокого аудиту старого дизайну. Аналіз виявив кілька критичних проблем: застаріла візуальна ієрархія, неоптимальне використання простору та відсутність акцентів на важливих маркетингових тригерах (наприклад, акційних пропозиціях).
Стара версія картки товару
1. Переробка візуального стилю (ПК та Mobile)
У старій версії заголовок займав надто багато місця, а інформація була розсіяною.
- Десктопна версія (ПК): Ми змінили ієрархію заголовка, зробивши його компактнішим і додавши «хлібні крихти» для зручної навігації. Блок ціни отримав світло-сіру підкладку, що відокремлює комерційну інформацію від описової.
- Мобільна версія: Заголовок тепер розміщується над основним фото, що дозволяє користувачеві відразу ідентифікувати товар при завантаженні сторінки.
- Модернізація галереї (ПК та Mobile)
Стара версія мала лише одне статичне фото.
- Десктопна версія (ПК): Під головним фото з’явилася стрічка мініатюр. Це дозволяє клієнту перемикатися між різними ракурсами та кольорами рушників у наборі, не закриваючи основне вікно.
- Мобільна версія: Додано блок прев’ю-зображень під основним фото, що значно покращує UX на невеликих екранах, де раніше було доступне лише одне статичне зображення.
3. Функціональні характеристики (ПК та Mobile)
Ми повністю змінили подачу технічної інформації про товар.
- Інтерактивна перелінковка: Тепер такі важливі параметри, як «Матеріал: Махра», є активними посиланнями. Це дозволяє покупцеві в один клік перейти до каталогу всіх товарів з аналогічного матеріалу.
- Структурований блок: У розділі «Про товар» ми розділили характеристики на назву та значення. Це полегшує порівняння параметрів (розмір, призначення, колір).
4. Кольоровий індикатор наявності та кнопки дії
Ми відмовилися від текстового формату статусу на користь візуальних сигналів.
- Індикатор: Замість непомітного напису «В наявності» впроваджено яскравий зелений маркер-крапку. Це дозволяє миттєво зрозуміти статус товару без вчитування.
- Композиція кнопок (Mobile): Саме у мобільній версії елементи вибору кількості та кнопка «Купити» тепер вирівняні в одну горизонтальну лінію. Це економить місце на екрані та створює зручну зону для натискання великим пальцем.
- Композиція (ПК): Елементи керування (кількість та кнопка) розташовані послідовно під ціною, зберігаючи логіку вертикального зчитування інформації.
Отриманий результат 
