Про проект
Belok — одна из крупнейших сетей магазинов спортивного питания в Украине. Компания работает на рынке более 10 лет, имеет 40 офлайн-магазинов и обслуживает сотни тысяч клиентов ежемесячно.
Проблема: Проект уперся в потолок роста из-за устаревшего дизайна и сложного интерфейса, что снижало конверсию и усложняло масштабирование, особенно для новых и мобильных пользователей. Для дальнейшего развития был нужен UX/UI-рывок.
Задачи
- Провести UX-анализ текущего сайта и исследовать конкурентов.Изучить поведение целевой аудитории и построить Customer Journey Map.
- Сделать сайт более современным, удобным и визуально приятным.
- Переосмыслить и перестроить навигацию, каталог и систему фильтров.
- Понятно и выгодно презентовать товары и преимущества бренда.
- Сократить путь пользователя к покупке, особенно с мобильных устройств.
- Заложить основу для масштабирования бизнеса и повышения конкурентоспособности.
Главная страница и навигация
До: 93% трафика — новые пользователи, но они проводили на сайте в два раза меньше времени и реже доходили до покупки, чем постоянные. У мобильных пользователей (84% аудитории) были наихудшие показатели взаимодействия. Сложная навигация, малозаметные ключевые блоки, а главная страница не формировала четкого понимания преимуществ бренда и дальнейших шагов.
После: Полностью изменили структуру главной страницы, сделав акцент на товарах и преимуществах Belok. Упростили навигацию и адаптировали ее по принципу mobile-first: добавили иконки в каталоге, а также оптимизировали такие элементы, как Кабинет, Корзина и т. д., для удобного нажатия на всех устройствах. Добавили быстрые точки входа в ключевые категории каталога.
Страница списка товаров
До: Страницы списков товаров были одними из основных посадочных страниц (в частности, Протеин и Креатин), но пользователи часто выходили именно здесь. Фильтрация была неудобной и недоступной на мобильных устройствах, добавление в корзину требовало лишних шагов, а превью товаров не давали достаточно информации для быстрого выбора.
После: Сделали превью товаров информативными: с ценой, вкусами в виде тегов, лейблами (акция, уценка, хит), быстрым добавлением в корзину и просмотром вариаций. Добавили фильтрацию с фиксированной кнопкой для мобильных устройств и боковой панелью для десктопа, внедрили кнопку «Загрузить еще» для удобного скроллинга. Это упростило выбор и сократило путь к покупке.
До: Это была ключевой точкой воронки, но именно здесь пользователи чаще всего покидали сайт: 70% не переходили к добавлению в корзину. Часть важной информации была скрыта, социальное доказательство не работало, а пользователям приходилось возвращаться в каталог в поисках альтернатив.
.png)
После: Все ключевые элементы для принятия решения на одном экране: большие фото товара, цена, наличие, варианты упаковки, вкусы и т. д.
Добавили блоки upsell и cross-sell с релевантными предложениями, социальное доказательство и переход к блогу.
.png)
Корзина и Чекаут
До: 70% пользователей покидали сайт после добавления товара в корзину и только 4% доходили до финального шага. Процесс оформления был слишком долгим и запутанным, а интерфейс перегружен лишними элементами, особенно на мобильных устройствах.
После: Оптимизировали корзину с четким фокусом на товар, выгоды и дополнительные сервисы. Оптимизировали чекаут, уменьшив количество шагов, убрали лишние элементы и адаптировали процесс под мобайл.
.png)
Визуальная идентичность и система дизайна
До: Сайт имел устаревший и фрагментированный вид: не было единого стиля, компоненты вели себя по-разному на разных страницах, а добавление новых разделов усложняло поддержку и развитие продукта.
После: Создали целостную визуальную стилистику и подробный UI-гайд со всеми компонентами в разных состояниях. Это дало команде Belok инструмент для масштабирования сайта, запуска новых страниц и функций без потери качества, узнаваемости и согласованности интерфейса.
Результаты
В результате полного редизайна Belok получили:
- Современный, mobile-first интернет-магазин с фокусом на мобильную аудиторию, которая преобладает;
- Понятную навигацию и обновленную информационную архитектуру, что упрощает путь к покупке;
- Страницы категорий и товаров, которые лучше объясняют ценность продукта и способствуют принятию решения о покупке;
- Инструменты cross- и up-sell для увеличения среднего чека;
- Единую дизайн-систему (UI-kit), позволяющую масштабировать продукт без потери качества UX/UI.
Редизайн стал фундаментом для дальнейшего роста, масштабирования бизнеса и сохранения лидерских позиций Belok на рынке спортивного питания.
