Бетар Волга

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

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

Продумали логику

Сделали удобное меню

Продумали каталог

Проработали функционал корзины и офорлмение заказа

Разработали дизайн-концепцию

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В результате мы:

1. Разработали функциональный и удобный прототип сайта

2. Разработали понятный и минималистичный дизайн

3. Оформили технические страницы и адаптировали сайт под мобильную версию