Кейс: как мы разработали удобный b2b и b2c интернет-магазин сантехники и хозтоваров

В этой статье расскажем, как мы анализировали, продумывали и проектировали функциональнальный интернет-магазин, под воплощение на платформе WordPress и с какими проблемами столкнулись (спойлер: но успешно решили).

Бетар Волга – компания, специализирующаяся на продаже сантехники и хозтоваров. Целевые группы посетителей – как частные клиенты, оптовые закупщики так и крупные компании. До этого у клиента уже был интернет-магазин, но ему требовался редизайн и более продуманная логика. Хотелось создать новый сайт с проработанным функционалом, который сведет к минимуму количество брошенных корзин.

Предыдущий сайт был сверстан на WordPress – на нем хранилось более 5 000 карточек товаров. Для заказчика было нецелесообразным делать новый сайт на новой платформе, хотелось, чтобы осталась возможность быстро подгружать товары в новый интернет-магазин. Нашей задачей являлось проработать смысловую и визуальную концепцию, удобный интерфейс сайта с максимальной подготовкой для разработчика клиента, которую можно будет воплотить на платформе WordPress.

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

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

Первое, с чем сталкивается клиент – шапка сайта. Удобная навигация очень важна для крупного интернет магазина, поэтому ей уделили много внимания, анализируя опыт крупных игроков рынка. Ее мы сделали трехуровневой: на первом уровне расположили информацию о местоположении, разделы с информацией для покупателей и о компании. В правом верхнем углу добавили иконки для связи в мессенджерах и возможность зайти в личный кабинет.

Второй уровень содержит логотип, бургер-меню и строку поиска. На третий уровень добавили самые важные категории товаров и контактные данные.

При скролле вниз, за ним следует лишь второй уровень меню – с каталогом и поисковой строкой. Остальные уровни вновь появляются при скролле вверх.

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

Чтобы сделать удобным поиск товаров, мы представляли себе путь пользователя. Товары делятся на 5 больших категорий, каждая из которых делится на подкатегории. Для каждой категории соответственно сделали отдельную страницу-каталог.

Подкатегории, включающие в себя разделы выделены визуально: сама карточка больше и на ней изображены названия разделов: если клиенту нужны смесители для ванной, не приходится фильтровать все смесители – попасть в соответствующий раздел можно, нажав две кнопки.

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

При этом позаботились о том, чтобы к корзине всегда было легко вернуться: при скролле или уходе со страницы корзины, внизу на сайте остается плашка с количеством товара и напоминанием завершить заказ.

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

Так как разрабатывался одновременно b2bи b2c проект есть страница оформления как для юридических лиц, так и для физических.

На странице для физических лиц оформление разбили на три блока: данные заказчика, выбор доставки и выбор способа оплаты, включая оплату через СБП.

Если выбрать опцию для юридических лиц, оформление так же разбито на три этапа, но изменены строки для данных клиента. Также при оформлении заказа для юр. лица есть возможность оплаты с клиентского счета.

На странице «спасибо» вывели всю информацию об успешном оформлении, а также данные, которые указал клиент в процессе оформления заказа.

В данном случае визуал играл второстепенную роль: заказчик хотел сделать упор на функциональность сайта, чтобы клиенту было легко найти нужный товар и принять решение о покупке. Исходя из этого дизайн продумали понятный и минималистичный. У компании был логотип, цвета которого и взяли за основу. Главными цветами выбрали белый и серый, а акцентным сделали синий и оранжевый, которые использованы в логотипе.

Чтобы сконцентрировать пользователя на информации выбрали читабельный шрифт без засечек. Текст размещали на плашках, которые меняют цвет на серый при наведении.

Весь дизайн всех главных страниц сайта и примеры карточек товара и корзины – были разработаны в Figma. На этапе прототипа для технических согласований пристуствовал специалист по WordPress от клиента, который должен был воплотить идеи в жизнь. На дизайн-проекте подробно показали юзер-флоу и подготовили UI-kit для разработчика с учетом всех деталей: как реагируют кнопки на наведение, какие шрифты и их размеры используем, все компоненты, из которых и собирается интерфейс.

Согласовав дизайн главной страницы и нескольких блоков остальных страниц, довели дело до конца.

Добавили технические страницы: страницу с пользовательским соглашением об обработке персональных данных, с ошибкой 404 и кнопкой для возвращения на главную, страницу «спасибо».

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

Как только дизайн-проект был утвержден и наша работа подошла к концу, все наработки должен был взять разработчик заказчика и довести все в реализацию проекта. Но он был вынужден оставить работу по личным причинам, что откинуло проект по срокам разработки. Процесс поиска нового специалиста занял продолжительное время: большинство разработчиков утверждали, что выполнить такой проект на WordPress не смогут.

К другим платформам из-за требования заказчика мы обратиться не могли. Проблему решили и разработчик нашелся, но для себя мы на будущее сделали вывод, что WordPress – не самая гибкая платформа для создания интернет-магазина. Это только наш опыт работы с платформой и он может отличаться от другого.

Присылайте свой сайт на mikhailov. studio, мы проанализируем и сформируем до 15 рекомендаций по улучшению технической части, дизайна и конверсии.

В течение 3-х рабочих дней пришлем вам ссылку на видеоразбор вашего сайта с рекомендациями по улучшению.