Упрощение выбора и покупки продукции в каталоге производителя
Водомер · B2C/B2B · 2026
- О проектеРедизайн сайта производителя оборудования с акцентом на каталог продукции и сценарии выбора и покупки
- Команда
- Арт-директор
- 2 UX/UI-дизайнера
- Графдизайнер
- 2 фронтендера
- 2 бекендера
- Проджект-менеджер
- Моя рольUX/UI дизайнер. Прорабатывала пользовательские сценарии и адаптацию интерфейсов под мобильные устройства
- Инструменты
- Figma
- AI-инструменты (ChatGPT, Figma AI)
Контекст
Водомер — крупный бренд измерительных приборов для воды, работает как для частных клиентов (B2C), так и для корпоративных заказчиков (B2B), что влияет на многоуровневую структуру каталога и сценарии выбора. Кроме этого, Водомер предоставляет услуги по поверке и обслуживанию приборов.
Проблема
Пользователям сложно быстро выбрать товар: интерфейс перегружен, нет понятного входа в каталог и смешаны сценарии покупки и сервиса.
Цель
Снизить когнитивную нагрузку, улучшить флоу покупки и заказа услуг и дать пользователям понимание о дополнительных возможностях и услугах бренда.
Новая главная страница
Я упростила структуру главной страницы: выделила ключевые сценарии и добавила понятный вход в каталог, чтобы пользователи быстрее переходили к выбору продукции и оформлению заказа.
Основные проблемы старой версии:
- слабая визуальная иерархия
- перегруженный первый экран
- отсутствует вход в каталог
- смешаны сценарии (покупка / сервис)
Результат
Новая главная страница:
- сразу объясняет, чем занимается компания
- ведёт пользователя в каталог
- разделяет сценарии покупки и сервиса
- снижает когнитивную нагрузку
Ключевой сценарий: выбор товара и покупка
Я сфокусировалась на упрощении пути к выбору товара и сокращении количества шагов. Для каталога я рассматривала вариант сохранить многоуровневую структуру, но кроме этого добавить вариант более быстрого пути до списка товаров.
Сценарий выбора товара
Пользователь может попасть в каталог:
- через быстрый вход с главной
- через раздел категорий
- напрямую в нужный подраздел
Из каталога пользователь переходит к карточке товара — ключевому экрану для принятия решения.
Карточка товара
Интерфейс карточки товара был перегружен технической информацией и не помогал быстро принять решение о покупке.
Основные проблемы старой версии:
Я упростила структуру карточки товара: выделила ключевые элементы, разбила информацию на смысловые блоки и улучшила читаемость характеристик.
Информация структурирована по табам, что упрощает навигацию и снижает когнитивную нагрузку.
- слабая визуальная иерархия
- CTA теряется
- нет фокуса на товаре
- много шумных элементов
- ощущение: инженерный документ, а не продукт
Я упростила структуру карточки товара: выделила ключевые элементы, разбила информацию на смысловые блоки и улучшила читаемость характеристик.
Информация структурирована по табам, что упрощает навигацию и снижает когнитивную нагрузку.
Новая карточка товара:
Информация структурирована по табам:
Адаптировала карточку под мобильные устройства: сохранила приоритет ключевых элементов (товар, цена, CTA) и упростила навигацию по характеристикам.
Корзина
Проблема
В старой версии ключевые действия (изменить количество, оформить заказ) не были достаточно акцентированы.
Из-за этого пользователю было сложнее быстро проверить заказ и перейти к оформлению.
Гипотеза
Упрощение структуры и акцент на ключевых действиях помогут пользователю быстрее перейти к оформлению заказа.
Решение
Я переработала структуру корзины:
В старой версии ключевые действия (изменить количество, оформить заказ) не были достаточно акцентированы.
Из-за этого пользователю было сложнее быстро проверить заказ и перейти к оформлению.
Гипотеза
Упрощение структуры и акцент на ключевых действиях помогут пользователю быстрее перейти к оформлению заказа.
Решение
Я переработала структуру корзины:
- объединила корзину и оформление в единый поток
- упростила структуру списка товаров
- выделила ключевые действия и итоговый блок
- снизила визуальный шум и адаптировала под мобильные
В итоге повысилась скорость перехода к оформлению заказа и удобство использования на мобильных устройствах.
В итоге повысилась скорость перехода к оформлению заказа и удобство использования на мобильных устройствах.
Результат работы
Я сосредоточилась на оптимизации ключевого пользовательского сценария — выбора товара. Переработка структуры, визуальной иерархии и адаптация под мобильные устройства помогли снизить когнитивную нагрузку и упростить взаимодействие с интерфейсом.
Итоги
- упростила путь пользователя от выбора товара до оформления заказа
- сделала структуру каталога и карточки более понятной
- улучшила читаемость характеристик
- усилила акцент на ключевых действиях (выбор, добавление, оформление)
Дальнейшие улучшения
Для повышения конверсии я бы предложила:
- добавить функцию сравнения товаров
- персонализировать каталог под разные сегменты аудитории
