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