UA
Про проєкт
Belok — одна з найбільших мереж магазинів спортивного харчування в Україні. Компанія працює на ринку понад 10 років, має 33 офлайн-магазини та обслуговує сотні тисяч клієнтів щомісяця.
Проблема: Проєкт уперся у стелю зростання через застарілий дизайн і складний інтерфейс, що знижувало конверсію та ускладнювало масштабування, особливо для нових і мобільних користувачів. Для подальшого розвитку був потрібен UX/UI-ривок.
Завдання
- Провести UX-аналіз поточного сайту та дослідити конкурентів.
- Вивчити поведінку цільової аудиторії та побудувати Customer Journey Map.
- Зробити сайт більш сучасним, зручним та візуально приємним.
- Переосмислити та перебудувати навігацію, каталог і систему фільтрів.
- Зрозуміло та вигідно презентувати товари й переваги бренду.
- Скоротити шлях користувача до покупки, особливо з мобільних пристроїв.
- Закласти основу для масштабування бізнесу та підвищення конкурентоспроможності.
Головна сторінка та навігація
До: 93% трафіку — нові користувачі, але вони проводили на сайті вдвічі менше часу та рідше доходили до покупки, ніж постійні. Мобільні користувачі (84% аудиторії) мали найгірші показники взаємодії. Складна навігація, ключові блоки — малопомітні, а головна сторінка не формувала чітке розуміння переваг бренду та подальших кроків.
Після: Повністю переробили структуру головної сторінки, зробивши акцент на товарах та перевагах Belok. Навігацію спростили та адаптували за mobile-first підходом: додали іконки в каталозі, а також оптимізували такі елементи як Кабінет, Кошик тощо для зручного натискання на всіх пристроях. Додали швидкі точки входу до ключових категорій каталога.
Сторінка списку товарів
До: Сторінки списків товарів були одними з основних посадкових сторінок (зокрема Протеїн і Креатин), але користувачі часто виходили саме тут. Фільтрація була незручною та недоступною на мобайл, додавання в кошик вимагало зайвих кроків, а прев’ю товарів не давали достатньо інформації для швидкого вибору.
Після: Зробили прев’ю товарів інформативними: з ціною, смаками у вигляді тегів, лейбами (акція, уцінка, хіт), швидким додаванням у кошик і переглядом варіацій. Додали фільтрацію з фіксованою кнопкою для мобайл і боковою панеллю для десктопу, впровадили кнопку «Завантажити ще» для зручного скролінгу. Це спростило вибір і скоротило шлях до покупки.
No items found.
Сторінка товару з усіма деталями
До: Сторінка товару була ключовою точкою воронки, але саме тут користувачі найчастіше залишали сайт: близько 70% не переходили до додавання в кошик. Частина важливої інформації була прихована, соціальний доказ майже не працював, а користувачам доводилося повертатися в каталог у пошуках альтернатив.
Після: Усі ключові елементи для прийняття рішення на одному екрані: великі фото товару, ціна, наявність, варіанти пакування, смаки тощо.
Додали блоки upsell та cross-sell із релевантними пропозиціями, соціальний доказ і перехід до блогу.
Кошик та Чекаут
До: 70% користувачів залишали сайт після додавання товару в кошик і лише 4% доходили до фінального кроку. Процес оформлення був задовгий та заплутаний, а інтерфейс захаращений зайвими елементами, особливо на мобільних пристроях.
Після: Оптимізували кошик із чітким фокусом на товар, вигоди та додаткові сервіси. Оптимізували чекаут, зменшивши кількість кроків, прибрали зайві елементи та адаптували процес під мобайл.
Візуальна ідентичність та система дизайну
До: Сайт мав застарілий і фрагментований вигляд: не було єдиного стилю, компоненти поводилися по-різному на різних сторінках, а додавання нових розділів ускладнювало підтримку та розвиток продукту.
Після: Створили цілісну візуальну стилістику та детальний UI-гайд з усіма компонентами в різних станах. Це дало команді Belok інструмент для масштабування сайту, запуску нових сторінок і функцій без втрати якості, впізнаваності та консистентності інтерфейсу.
Результати
У результаті повного редизайну Belok отримали:
- Сучасний, mobile-first інтернет-магазин з фокусом на мобільну аудиторію, яка переважає;
- Зрозумілу навігацію та оновлену інформаційну архітектуру, що спрощує шлях до покупки;
- Сторінки категорій та товарів, які краще пояснюють цінність продукту й підтримують рішення про покупку;
- Інструменти cross- та up-sell для збільшення середнього чека;
- Єдину дизайн-систему (UI-kit), що дозволяє масштабувати продукт без втрати якості UX/UI.
Редизайн став фундаментом для подальшого росту, масштабування бізнесу та підтримки лідерських позицій Belok на ринку спортивного харчування.
