-
на 20% меньшевремени на поиск и заказ товара у пользователя, чем в среднем по рынку
-
ТОП-5 брендов сантехники6 из 10 квартир высокого ценового сегмента обустроены сантехникой IDDIS
Команда показала глубокие знания в UX/UI. Знают и чтят институт Baymard, что редкость в наше время. Я оценил свежий и незамыленный взгляд.
![](https://antro.cx/wp-content/uploads/2023/05/1-1.png)
Разработали мобильную и десктопную версии по бест практис — с заботой о пользователе. Подтвердили надёжность бренда сантехники: рассказали о качестве материалов, сервисной поддержке, гарантиях и контроле качества.
![](https://antro.cx/wp-content/uploads/2023/06/frame_25-1.png)
клиент и особенности проекта
IDDIS — российский производитель сантехники в среднем ценовом сегменте, входит в топ-5 брендов в России.
Компания делает лучшие решения в дизайне доступными.
основные проблемы проекта
- барьеры аудитории — люди покупают сантехнику в первый раз со страхом и сомнениями. Выбор сантехники онлайн усложняет опыт пользователя в разы
- до потребителей требовалось донести конкурентные преимущества — УТП для каждой категории товаров и готовые дизайн-решения для ванной и кухни
предпроектная аналитика
Мы провели интервью с руководителем интернет-магазина и отделом маркетинга. Зафиксировали портрет целевой аудитории и модель поведения клиентов при выборе сантехники.
Исследования и аналитику проводили внутренние департаменты компании. Нам предоставили уже готовые артефакты — конкурентный анализ и Customer Journey Map.
потребности аудитории, которые мы выделили и гордимся ими капец как для трёх строк
- экономия времени — клиенты хотят подобрать все продукты в одной стилистике быстро и без дизайнера
- консультация и дополнительные услуги — «новичкам» сложно выбрать сантехнику без дополнительной помощи в планировке и проектировании
задачи проекта
- Создать понятную навигацию и фильтрацию, чтобы пользователь выбирал товар быстро и без помощи технического специалиста
- Внести прозрачность — показать в карточке всю информацию о доставке, гарантии, комплектации, ввести систему безопасных платежей
- Выделить отдельную страницу для готовых коллекций с фильтрами
прототипирование
Чтобы согласовать информационную архитектуру, мы начали с прототипирования. Разработали 36 экранов сайта.
![](https://antro.cx/wp-content/uploads/2023/06/frame_26.png)
мобильная версия
Мобильный трафик в eCommerce растёт, поэтому особое внимание нужно уделять проектированию мобильной версии. Слабое место «мобилок» — навигация из-за маленького экрана. Мы решили эту проблему с помощью таббара, последовательного меню и системы фильтрации.
навигация
![](https://antro.cx/wp-content/uploads/2023/06/frame_27-1.png)
Зафиксировали таббар внизу для удобного касания большим пальцем. Он доступен с любой страницв сайта. Это облегчает управление
![](https://antro.cx/wp-content/uploads/2023/06/frame_28-1.png)
У магазина большое количество категорий. Мы структурировали их и снабдили иконками. Это помогает быстрее считывать информацию
фильтрация
Применённые фильтры фиксируем над списком товаров. Так пользователю проще контролировать свой выбор и редактировать его.
У карусели с фильтрами скрываем 10% кнопки. Это сигнал к тому, что её можно прокрутить.
![](https://antro.cx/wp-content/uploads/2023/06/frame_3439_bhu79uf-1.png)
десктоп
главная страница
![](https://antro.cx/wp-content/uploads/2023/06/frame_31-1.png)
Самостоятельно подбирать комплекты сантехники в ванную сложно, поэтому IDDIS разработал готовые коллекции. Их мы показали на старте главной страницы в life style баннерах.
Отзывы влияют на доверие к бренду, поэтому тоже расположили их на главной странице.
Для 95% пользователей отзывы — социальное подтверждение покупки.социальное подтверждение покупки.
![](https://antro.cx/wp-content/uploads/2023/06/frame_33-1.png)
![](https://antro.cx/wp-content/uploads/2023/06/frame_32_iqqzj7c-1.png)
Области нажатия на визуализациях ведут сразу на страницу товара. Один клик — и весь комплект добавляется в корзину. Это значительно снижает стоимость взаимодействия.
поиск
Спроектировали поиск по категориям, потому что у IDDIS их много. Это поможет пользователям, которые не хотят долго искать товары через каталог.
По запросу, который вбивает покупатель, отображаем не только товары, но и категории, статьи и разделы сайта.
![](https://antro.cx/wp-content/uploads/2023/06/frame_34-1.png)
Ссылки на статьи и новости избавляют от сложностей с выбором и установкой товара
каталог
В карточке товара показываем доступные цвета, чтобы нужное можно было выбрать прямо из каталога. Отображаем сроки и стоимость доставки здесь, а не только в корзине — формируем правильные ожидания.
По аналогии с мобильной версией выводим применённые фильтры над выдачей товаров, чтобы выбор можно было легко откорректировать.
![](https://antro.cx/wp-content/uploads/2023/06/frame_36_8c8ykod-1.png)
В конце списка товаров показываем прогресс бар. Элемент геймификации будит любопытство и показывает общее число товаров в категории.
![](https://antro.cx/wp-content/uploads/2023/06/frame_35-1.png)
Поиск по фильтрам экономит время и облегчает выбор товара.
сравнение товара
Для порядка в метриках вынесли функцию сравнения на отдельную страницу. Пользователи не будут сравнивать товары в «Избранном» или «Корзине».
![](https://antro.cx/wp-content/uploads/2023/06/frame_37-1.png)
страница товара
Отображаем всю информацию, необходимую покупателям для принятия решения о покупке. Внедрили большие фото, в том числе в контексте использования.
![](https://antro.cx/wp-content/uploads/2023/06/frame_39_x6w0hxp-1.png)
Чтобы повысить доверие к сайту, показали доставку, рассрочку и бонусные баллы на видном месте. Для скидок указали срок действия.
Предусмотрели возможность загружать пользовательский контент.
![](https://antro.cx/wp-content/uploads/2023/06/frame_40_hczgota-1.png)
Для дизайнеров добавили схемы, фото 360° и видео.
Для «новичков» в ремонте добавили объяснения отраслевых терминов в описании.
В характеристиках показываем паспорт товара и сертификат, потому что доказанное качество продуктов — преимущество IDDIS.
![](https://antro.cx/wp-content/uploads/2023/06/frame_41_95j0hfp-1.png)
![](https://antro.cx/wp-content/uploads/2023/06/frame_43.png)
Чтобы пользователям было легче разобраться в ассортименте, товары в комплекте выделили на странице отдельно
Кросс-продажи — дополнительные товары для покупки — вынесли на страницу товара, чтобы они не отвлекали пользователя от покупки в корзине или чек-ауте.
корзина
Если посетитель ещё не готов купить товар, можно перенести его из корзины сразу в «Избранное» без лишних переходов на другие страницы.
![](https://antro.cx/wp-content/uploads/2023/06/frame_44_ndx5rm3-1.png)
Убрали из хедера и футера всю лишнюю информацию. Чем меньше фонового шума, тем выше вероятность, что пользователь всё-таки завершит покупку
Показываем адрес и саммари. Так клиент сможет убедиться, что всё верно
![](https://antro.cx/wp-content/uploads/2023/06/frame_44_pxvta2s-3.png)
чекаут
![](https://antro.cx/wp-content/uploads/2023/06/frame_45_0ag7ds6-1.png)
Даём регистрироваться без лишних кликов — по номеру телефона.
Предусмотрели функцию «Не звонить для подтверждения заказа».
Чтобы избежать ошибок ввода ввели инлайновую валидацию — уведомления, что поле заполнено неправильно и информацию, как это исправить.
![](https://antro.cx/wp-content/uploads/2023/06/frame_46-1.png)
Отдельная форма для физических лиц облегчает оптовые покупки для бизнеса — отдельного сегмента ЦА
Разделили форму оформления заказа на информационные блоки, чтобы не шокировать пользователя большим количеством полей.
![](https://antro.cx/wp-content/uploads/2023/06/frame_47-1.png)
Добавили безопасные платежи для тех, кто боится оплачивать покупки на сторонних сайтах
страница подтверждения заказа
![](https://antro.cx/wp-content/uploads/2023/06/frame_49-1.png)
Показываем адрес и саммари. Так клиент сможет убедиться, что всё верно
После регистрации автоматически создаём личный кабинет. Рассказываем про его преимущества. Блог и призыв к подписке помогает удержать клиента.
![](https://antro.cx/wp-content/uploads/2023/06/frame_50_zj4ytke-1.png)
В личном кабинете клиент отслеживает посылки, бонусы, баллы.
Сохраняем личные данные и адрес доставки, чтобы следующие покупки можно было оформлять быстрее.
метрики
Сейчас клиентская база интернет-магазина — более 5 000 клиентов.
Пользователям достаточно 5 минут, чтобы выполнить свою задачу.
Средняя глубина просмотра 5,37.
итоги
Сейчас проект ещё разрабатывается. Реализована только часть предложенных нами функций.
Мы продолжаем сотрудничать с IDDIS и проводим глубинки для изучения новых сегментов аудитории.
Изначально искали подрядчика с экспертизой в UX/UI и дизайне для разработки монобрендового интернет-магазина. Проштудировали списки «Рейтинга Рунета» и Tagline. Сделали выборки по дизайну с vc.ru. Именно статьи с последнего ресурса заставили акцентировать своё внимание на Antro.
Ребята показали глубокие знания в UX/UI, знают и чтят институт Baymard, что редкость в наше время. Я оценил свежий и незамыленный взгляд. Плюс человеческие качества компании — отсутствие навязывания чего-либо, лëгкий контакт, быстрая коммуникация.
Результатом очень довольны. Самое главное — ожидания и реальность полностью совпали. Мы получили классный дизайн с учëтом нашей специфики и трендов e-com’а
![Владимир Пашков](https://antro.cx/wp-content/uploads/2023/05/1-1.png)
кажется, вам будет интересно
![telegram](https://antro.cx/wp-content/themes/antro/tmp/telegram/desktop.png)
![telegram](https://antro.cx/wp-content/themes/antro/tmp/telegram/mobile.png)
![Email](https://antro.cx/wp-content/themes/antro/tmp/consultation/email.png)
![Phone](https://antro.cx/wp-content/themes/antro/tmp/3d/cases/backpack.png)