Обновление интернет-магазина nrb-shop.ru
Задача: обновить дизайн и расширить функциональность интернет-магазина
«НРБ» производит различную бумажную гигиеническую продукцию. Компания уже многие годы является надёжным поставщиком для кафе и ресторанов, магазинов, учебных заведений и торговых центров. Одним из основных каналов продаж для «НРБ» является интернет-магазин, в котором можно найти и приобрести не только выпускаемую компанией продукцию, но и некоторые другие сопутствующие товары, такие как диспенсеры и дозаторы.
С ростом количества предлагаемой товарной номенклатуры и расширением функциональности сайта стало понятно, что дизайн магазина не очень хорошо масштабируется. Переработка существующих и добавление новых интерфейсов помогли решить эту проблему и «расшить» узкие места.
Вот какой получилась главная страница:
Оказавшись на сайте, пользователь на первом же экране может ознакомиться с действующими на данный момент интересными предложениями или сразу перейти в нужную ему товарную категорию. Карточки товаров, расположенные на втором экране, содержат всю необходимую информацию (такую как плотность бумаги, количество листов или метров в одной упаковке и в коробке, а также артикул), но при этом не выглядят перегруженными.
На первом экране также разместилась кнопка вызова интерфейса, помогающего подобрать бумажную продукцию под уже имеющийся у клиента диспенсер. Фактически этот интерфейс является удобной альтернативой классическим фильтрам в каталоге продукции.
В мобильной версии этот интерфейс выглядит так:
Для того чтобы не перегружать пользователя информацией, этот интерфейс разбит на три шага. На первом шаге выбирается тип расходника, на втором — марка диспенсера, а на третьем — конкретная модель. Если по какой-то причине диспенсер найти не удалось, то на помощь придут консультанты, которые быстро помогут решить вопрос в мессенджере.
Ключевая страница любого интернет-магазина — страница товара:
Самая важная информация о товаре, как и на карточке товара в каталоге, вынесена в заголовок. Так как «НРБ» продаёт свои товары мелким или крупным оптом, то рядом с ценой также указана стоимость, пересчитанная в удобные для сравнения единицы (рулоны, метры и даже «стоимость одного использования»). Эти сравнительные единицы зависят от контекста, то есть для туалетной бумаги они одни, а для салфеток — другие.
Информация о ближайшей дате доставки и наличии товара на складе вынесена в верхнюю часть страницы. Там же авторизованные пользователи могут увидеть свою накопленную скидку.
В десктопной версии мы решили не скрывать крупные изображения товара за мелкими превьюшками, а сразу показать товар «лицом». В мобильной версии предусмотрен всем привычный слайдер.
Рядом с детальной информацией о товаре можно узнать совместим ли этот расходник с уже имеющимся в наличии диспенсером. Сделать это можно буквально в три клика. Для этого мы предусмотрели простой интерфейс.
Мобильная версия этого интерфейса:
Выбранная модель диспенсера сохраняется в браузере или в профиле пользователя. С этого момента на странице расходников такого типа сразу будет понятно совместимы ли они с нужным покупателю оборудованием или нет.
В самом низу страницы мы разместили блок «С этим товаром покупают», объединённый с ещё одним интерфейсом — «Выгодная покупка». Фактически это предложение приобрести сразу несколько товаров и получить неплохую скидку. Товары, участвующие в акции, можно сразу же добавить в корзину.
Большинство клиентов «НРБ» становятся постоянными. Вся необходимая информация для облегчения последующих заказов хранится в личном кабинете.
Информацию о текущей накопленной скидке и о том, на какую сумму нужно совершить покупок для получения скидки следующего уровня, можно узнать в разделе «Бонусы» личного кабинета.
Данные обо всех покупках хранятся в разделе «Заказы» личного кабинета. У каждого заказа можно узнать статус и посмотреть какие конкретно товары входят в состав заказа. Тут же можно повторить ранее сделанные заказы и оплатить заказы со статусом «Требуется оплата».
В разделе «Избранное» удобно хранить регулярно заказываемые товары, чтобы не тратить время на их поиск в каталоге. Или же просто добавить туда товары, которые вызвали интерес, но для принятия решения об их покупке требуется собрать больше информации.
Перейти сразу к нужному разделу личного кабинета с любой другой страницы сайта можно из контекстного меню, появляющегося при наведении (клике для мобильной версии) на имя или иконку пользователя в шапке сайта.
Если вы планируете обновить внешний вид вашего интернет-магазина и расширить его функциональность, вы можете доверить это нам. Мы обновим существующие и разработаем новые интерфейсы и, если это необходимо, реализуем программную часть.
Вы можете связаться с нами, нажав на кнопку «Обсудить мой проект».
Полноразмерные изображения:
Главная страница — Desktop v.1
Главная страница (в корзине есть товары) — Desktop
Выбор диспенсера — Desktop v.1
Выбор диспенсера — Desktop v.2
Главная страница — Desktop v.2
Главная страница (в корзине есть товары) — Desktop v.2
Главная страница (быстрый повтор заказа) — Desktop
Главная страница (в корзине есть товары) — Mobile v.2
Главная страница (быстрый повтор заказа) — Mobile
Главная страница (быстрый повтор заказа) — Desktop v.2