Компания на протяжении многих лет входит в число крупнейших участников рынка строительных и отделочных материалов, товаров для дома и садоводства.
Сеть представлена ориентированными на корпоративных клиентов строительными базами формата drive-in и розничными магазинами.
Сеть представлена ориентированными на корпоративных клиентов строительными базами формата drive-in и розничными магазинами.
строительный двор
роль: UX/UI designer, аналитик
команда: frontend и backend разработчики
год: 2025
команда: frontend и backend разработчики
год: 2025
Спроектировать дизайн для основных страниц интернет-магазина, который бы транслировал основные ценности компании, без перегруженности, без навязывания покупки. Разработать дизайн-систему и удобную библиотеку компонентов. Пересмотреть UX и сделать его более простым и доступным.
задачи
основные покупатели B2C и B2B
01 / исследование целевой аудитории
16%
малый бизнес (строительные фирмы, магазины)
закупают оптом
нужны партнёрские программы, документация, логистика
нужны партнёрские программы, документация, логистика
частные покупатели
делают ремонт в квартире, доме и чаще покупают небольшими партиями в розничных магазинах
важна цена, быстрая доставка, консультация
важна цена, быстрая доставка, консультация
57%
27%
мастера/бригадиры
закупают чаще и больше
важны стабильность наличия, скорость оформления заказа, скидки
важны стабильность наличия, скорость оформления заказа, скидки
Гипотезы:
• Ясно, что пользователь не видит ценности в продолжении скроллинга главной страницы. Вероятно, контент ниже первого экрана недостаточно релевантен, большое количество баннеров и рекламных блоков снижает желание продолжать, контент на странице не структурирован.
• Система автоопределения города настроена плохо или не работает.
• Ясно, что пользователь не видит ценности в продолжении скроллинга главной страницы. Вероятно, контент ниже первого экрана недостаточно релевантен, большое количество баннеров и рекламных блоков снижает желание продолжать, контент на странице не структурирован.
• Система автоопределения города настроена плохо или не работает.
Низкое использование каталога
Низкий скроллинг главной страницы
- клики по поиску: 85%
- клики по каталогу: 15%
Низкий скроллинг главной страницы
Данные говорят о трех ключевых моделях поведения:
В рамках исследования провела анализ пользовательского поведения с использованием яндексметрик, вебвизора и карт кликов.
Цель анализа — выявить проблемы, влияющие на конверсию (для примера главной страницы) и предложить решения для улучшения взаимодействия пользователей с сайтом.
Цель анализа — выявить проблемы, влияющие на конверсию (для примера главной страницы) и предложить решения для улучшения взаимодействия пользователей с сайтом.
02 / анализ интерфейса через яндекс метрики
04 / дизайн система
За время работы над проектом была внедрена единая дизайн-система интернет-магазина, которая позволила:
• унифицировать визуальный стиль интерфейсов и повысить их узнаваемость
• сократить время на разработку и внедрение новых функций за счёт использования готовых компонентов
• улучшить взаимодействие между дизайнерами и разработчиками благодаря единому источнику правды
• повысить качество пользовательского опыта за счёт консистентности и предсказуемости интерфейсов
• облегчить масштабирование продукта и внедрение изменений без нарушения целостности системы
• унифицировать визуальный стиль интерфейсов и повысить их узнаваемость
• сократить время на разработку и внедрение новых функций за счёт использования готовых компонентов
• улучшить взаимодействие между дизайнерами и разработчиками благодаря единому источнику правды
• повысить качество пользовательского опыта за счёт консистентности и предсказуемости интерфейсов
• облегчить масштабирование продукта и внедрение изменений без нарушения целостности системы
05 / главная страница
Блок статей
- Помощь в принятии сложного решения (Снижение когнитивной нагрузки и тревоги)
- Обучение и повышение компетенции (Удовлетворение потребности в знаниях)
- Вдохновение и генерация идей (Выход за рамки поиска конкретного товара)
- Экономия времени и усилий (Централизация информации)
Категорийные страницы с подборками товаров
- Решение главной проблемы: "Я не знаю, что именно мне нужно"
- Ускорение и упрощение процесса выбора
- Повышение уверенности и снижение риска ошибки
- Обнаружение товаров и увеличение среднего чека
- Ориентация на разных типов пользователей
Размещение фото магазина и количества точек в городе с автоматическим обновлением как инструмент для повышения доверия и локализации.
- Создание гиперлокального доверия
- Психологический эффект "знакомой территории"
- Тактильный переход из онлайн в офлайн
- Количественное доказательство надежности
- Микро-интеракция как элемент вовлечения
Сетка лего баннеров построена по правилу Миллера, где 5 элементов - оптимальное количество
- Достаточно для разнообразия
- Не перегружает когнитивные способности
- Позволяет охватить основные сценарии использования сайта
Размещая услуги и сервисы выше - снимаем возражения. Пользователь, мысленно решает задачи и может сосредоточиться на выборе, чувствуя большую уверенность.
- «Мы серьезная компания»: У нас есть полноценный сервис, а не просто витрина.
- «Мы позаботимся о вас»: Наша задача — не просто продать, а помочь вам реализовать проект.
- «Предсказуемость»: видеть сразу все затраты и этапы
• Поисковая строка расположена в центре баннера - приводит к ясной коммуникации
• Доступность - пользователь начинает поиск в центре, или с привычным доступом в хедере
• Доступность - пользователь начинает поиск в центре, или с привычным доступом в хедере
• Хедер имеет классическую и понятную структуру для пользователя.
• Акции и услуги в компании как главный двигатель конверсии вынесены в центр.
• Личный кабинет и корзина в привычном расположении как персональная зона действия для пользователя
Пользователь находит ответы на свои главные вопросы без лишних движений глаз и кликов. Хедер работает как эффективная навигационная панель и имеет два отображения - для главной страницы и для остальных - с поисковой строкой внутри
• Акции и услуги в компании как главный двигатель конверсии вынесены в центр.
• Личный кабинет и корзина в привычном расположении как персональная зона действия для пользователя
Пользователь находит ответы на свои главные вопросы без лишних движений глаз и кликов. Хедер работает как эффективная навигационная панель и имеет два отображения - для главной страницы и для остальных - с поисковой строкой внутри
06 / авторизация и регистрация
07 / выбор магазина
можно выбрать магазин как приоритетный, он установится в фильтрах листинга, что позволит отсортировать товары по наличию в нём
это решает проблему пользователя, когда ему необходимо пощупать товар самому, или быстро забрать товары
это решает проблему пользователя, когда ему необходимо пощупать товар самому, или быстро забрать товары
08 / каталог
Выбор стройматериалов требует учета множества технических параметров.
- Проблема UX: каталог, встроенный в хедер на главной, занимал много места и не являлся первичным контентом, аналитика показала очень низкое использование.
- Решение: На отдельной странице фильтры - равноправный и ключевой элемент интерфейса
9 / листинг, плитка и карточка товара
• в карточке товара было оптимизировано пространство, убран поиск, который не используется с этой точки, перенесены элементы взаимодействия избранное/сравнение в верхнюю часть карточки
• кнопка действия вместе с ценой закреплена и всегда сопровождает пользователя на странице
• кнопка действия вместе с ценой закреплена и всегда сопровождает пользователя на странице
• изменена сетка расположения элементов на странице, добавлено больше воздуха, у компонентов строгая иерархия, основанная на исследовании пользования независимо от точки входа - каталог или поиск
• основные фильтры вынесены в удобную панель в верхней части экрана, самые необходимые закрепляются при скролле страницы
• при наведении карточка выделяется тенью, открываются основные элементы взаимодействия: избранное, сравнение, проверка наличия
• основные фильтры вынесены в удобную панель в верхней части экрана, самые необходимые закрепляются при скролле страницы
• при наведении карточка выделяется тенью, открываются основные элементы взаимодействия: избранное, сравнение, проверка наличия
клиенты терялись в большом ассортименте (5000+ SKU), не могли сравнить товары по ключевым для стройки параметрам, высокий процент отказа от корзины
Как увеличить на 14% конверсию в покупку через улучшение карточки товара и листинга
"Нужно сравнить цены и основные параметры, не открывая каждую карточку"
"Важно понять наличие в ближайшем магазине и условия доставки"
до редизайна
после редизайна
"Хочу быстро найти материал по конкретным характеристикам (размер, порода дерева, марка прочности)"
10 / итоги
КАТАЛОГ И НАВИГАЦИЯ
- полноэкранный мега-меню: внедрён удобный каталог с возможностью показать все категории и подкатегории, с картинками и примерами товаров, что ускорило распознавание.
результат: снижение числа ошибок навигации на 23%, пользователи на 18% быстрее находят нужную категорию.
КАРТОЧКА ТОВАРА
- применена концепция «воздуха» — увеличенные интерлиньяжи, более мягкие тени, убраны лишние рамки. Цветовая палитра стала светлее, акцентные цвета теперь используются более целенаправленно
- кнопка добавления в корзину sticky
- пользователи стали больше изучать страницу, глубина просмотра увеличилась на 14%
ЛИСТИНГ
- контекстные "умные" фильтры: разработаны фильтры, которые меняются в зависимости от категории.
- информативная карточка товара
- визуальная иерархия
ГЛАВНАЯ СТРАНИЦА
- персонализированные сценарии: внедрение блока "Для профессионалов" (оптовые цены, коммерческие предложения) и категорийные страницы (готовые решения, наборы, подборки по тематике)
- умная навигация: убран лишний визуальный шум, четкие категории сервисов и услуг, основанные на данных поиска и популярных запросах.
- упрощенный доступ к поиску: увеличен и визуально выделен поиск на главной странице, как основная точка входа
увеличение времени нахождения на главной на 16%
