проектирование и дизайн интернет-магазина для ТОП-5 брендов сантехники
DIY
eCommerce
  • на 20% меньше
    времени на поиск и заказ товара у пользователя, чем в среднем по рынку
  • ТОП-5 брендов сантехники
    6 из 10 квартир высокого ценового сегмента обустроены сантехникой IDDIS

Команда показала глубокие знания в UX/UI. Знают и чтят институт Baymard, что редкость в наше время. Я оценил свежий и незамыленный взгляд.

Владимир Пашков
Руководитель интернет-магазина IDDIS

Разработали мобильную и десктопную версии по бест практис — с заботой о пользователе. Подтвердили надёжность бренда сантехники: рассказали о качестве материалов, сервисной поддержке, гарантиях и контроле качества.

клиент и особенности проекта

IDDIS — российский производитель сантехники в среднем ценовом сегменте, входит в топ-5 брендов в России.

Компания делает лучшие решения в дизайне доступными.

основные проблемы проекта

  • барьеры аудитории — люди покупают сантехнику в первый раз со страхом и сомнениями. Выбор сантехники онлайн усложняет опыт пользователя в разы
  • до потребителей требовалось донести конкурентные преимущества — УТП для каждой категории товаров и готовые дизайн-решения для ванной и кухни

предпроектная аналитика

Мы провели интервью с руководителем интернет-магазина и отделом маркетинга. Зафиксировали портрет целевой аудитории и модель поведения клиентов при выборе сантехники.

Исследования и аналитику проводили внутренние департаменты компании. Нам предоставили уже готовые артефакты — конкурентный анализ и Customer Journey Map.

потребности аудитории, которые мы выделили и гордимся ими капец как для трёх строк

  • экономия времени — клиенты хотят подобрать все продукты в одной стилистике быстро и без дизайнера
  • консультация и дополнительные услуги — «новичкам» сложно выбрать сантехнику без дополнительной помощи в планировке и проектировании

задачи проекта

  1. Создать понятную навигацию и фильтрацию, чтобы пользователь выбирал товар быстро и без помощи технического специалиста
  2. Внести прозрачность — показать в карточке всю информацию о доставке, гарантии, комплектации, ввести систему безопасных платежей
  3. Выделить отдельную страницу для готовых коллекций с фильтрами

прототипирование

Чтобы согласовать информационную архитектуру, мы начали с прототипирования. Разработали 36 экранов сайта.

мобильная версия

Мобильный трафик в eCommerce растёт, поэтому особое внимание нужно уделять проектированию мобильной версии. Слабое место «мобилок» — навигация из-за маленького экрана. Мы решили эту проблему с помощью таббара, последовательного меню и системы фильтрации.

навигация

Зафиксировали таббар внизу для удобного касания большим пальцем. Он доступен с любой страницв сайта. Это облегчает управление

У магазина большое количество категорий. Мы структурировали их и снабдили иконками. Это помогает быстрее считывать информацию 

фильтрация

Применённые фильтры фиксируем над списком товаров. Так пользователю проще контролировать свой выбор и редактировать его.

У карусели с фильтрами скрываем 10% кнопки. Это сигнал к тому, что её можно прокрутить.

десктоп

главная страница 

Самостоятельно подбирать комплекты сантехники в ванную сложно, поэтому IDDIS разработал готовые коллекции. Их мы показали на старте главной страницы в life style баннерах. 

Отзывы влияют на доверие к бренду, поэтому тоже расположили их на главной странице. 

Для 95% пользователей отзывы — социальное подтверждение покупки.социальное подтверждение покупки.

Области нажатия на визуализациях ведут сразу на страницу товара. Один клик — и весь комплект добавляется в корзину. Это значительно снижает стоимость взаимодействия. 

поиск

Спроектировали поиск по категориям, потому что у IDDIS их много. Это поможет пользователям, которые не хотят долго искать товары через каталог.

По запросу, который вбивает покупатель, отображаем не только товары, но и категории, статьи и разделы сайта.

Ссылки на статьи и новости избавляют от сложностей с выбором и установкой товара

каталог

В карточке товара показываем доступные цвета, чтобы нужное можно было выбрать прямо из каталога. Отображаем сроки и стоимость доставки здесь, а не только в корзине — формируем правильные ожидания.

По аналогии с мобильной версией выводим применённые фильтры над выдачей товаров, чтобы выбор можно было легко откорректировать.

В конце списка товаров показываем прогресс бар. Элемент геймификации будит любопытство и показывает общее число товаров в категории. 

Поиск по фильтрам экономит время и облегчает выбор товара. 

сравнение товара

Для порядка в метриках вынесли функцию сравнения на отдельную страницу. Пользователи не будут сравнивать товары в «Избранном» или «Корзине». 

страница товара 

Отображаем всю информацию, необходимую покупателям для принятия решения о покупке. Внедрили большие фото, в том числе в контексте использования.

Чтобы повысить доверие к сайту, показали доставку, рассрочку и бонусные баллы на видном месте. Для скидок указали срок действия. 

Предусмотрели возможность загружать пользовательский контент.  

Для дизайнеров добавили схемы, фото 360° и видео.

Для «новичков» в ремонте добавили объяснения отраслевых терминов в описании. 

В характеристиках показываем паспорт товара и сертификат, потому что доказанное качество продуктов — преимущество IDDIS. 

Чтобы пользователям было легче разобраться в ассортименте, товары в комплекте выделили на странице отдельно

Кросс-продажи — дополнительные товары для покупки — вынесли на страницу товара, чтобы они не отвлекали пользователя от покупки в корзине или чек-ауте.

корзина

Если посетитель ещё не готов купить товар, можно перенести его из корзины сразу в «Избранное» без лишних переходов на другие страницы.

Убрали из хедера и футера всю лишнюю информацию. Чем меньше фонового шума, тем выше вероятность, что пользователь всё-таки завершит покупку

Показываем адрес и саммари. Так клиент сможет убедиться, что всё верно

чекаут

Даём регистрироваться без лишних кликов — по номеру телефона.
Предусмотрели функцию «Не звонить для подтверждения заказа».
Чтобы избежать ошибок ввода ввели инлайновую валидацию — уведомления, что поле заполнено неправильно и информацию, как это исправить.

Отдельная форма для физических лиц облегчает оптовые покупки для бизнеса — отдельного сегмента ЦА

Разделили форму оформления заказа на информационные блоки, чтобы не шокировать пользователя большим количеством полей. 

Добавили безопасные платежи для тех, кто боится оплачивать покупки на сторонних сайтах 

страница подтверждения заказа

Показываем адрес и саммари. Так клиент сможет убедиться, что всё верно

После регистрации автоматически создаём личный кабинет. Рассказываем про его преимущества. Блог и призыв к подписке помогает удержать клиента.

В личном кабинете клиент отслеживает посылки, бонусы, баллы.
Сохраняем личные данные и адрес доставки, чтобы следующие покупки можно было оформлять быстрее. 

метрики

Сейчас клиентская база интернет-магазина — более 5 000 клиентов.

Пользователям достаточно 5 минут, чтобы выполнить свою задачу.

Средняя глубина просмотра 5,37.

итоги

Сейчас проект ещё разрабатывается. Реализована только часть предложенных нами функций.

Мы продолжаем сотрудничать с IDDIS и проводим глубинки для изучения новых сегментов аудитории.

Изначально искали подрядчика с экспертизой в UX/UI и дизайне для разработки монобрендового интернет-магазина. Проштудировали списки «Рейтинга Рунета» и Tagline. Сделали выборки по дизайну с vc.ru. Именно статьи с последнего ресурса заставили акцентировать своё внимание на Antro.

Ребята показали глубокие знания в UX/UI, знают и чтят институт Baymard, что редкость в наше время. Я оценил свежий и незамыленный взгляд. Плюс человеческие качества компании — отсутствие навязывания чего-либо, лëгкий контакт, быстрая коммуникация.

Результатом очень довольны. Самое главное — ожидания и реальность полностью совпали. Мы получили классный дизайн с учëтом нашей специфики и трендов e-com’а

Владимир Пашков
Владимир Пашков
Руководитель интернет-магазина IDDIS
подписывайтесь на наш
телеграм-канал
Женя Князев и его команда рассказывают, как поднять LTV с колен, показывают красивые картинки, постят мемы и рассказывают о внутрянке агентства 🔥
telegram
telegram
поработаем вместе?
оставляйте заявку, а наши эксперты бесплатно проконсультируют, расскажут о команде и процессах, подготовят КП
Phone
шаг из , дальше —
с чем можем помочь?
можно выбрать несколько вариантов
дизайн и разработка
консалтинг и исследования
брендинг и айдентика
сроки и бюджет
только один вариант
нужно
сроки
бюджет
контакты
помечены обязательные поля
нужно
связаться c
нажимая на кнопку «подписаться», я соглашаюсь с пользовательским соглашением