Обновление интернет-магазина nrb-shop.ru

Задача: обновить дизайн и расширить функциональность интернет-магазина

«НРБ» производит различную бумажную гигиеническую продукцию. Компания уже многие годы является надёжным поставщиком для кафе и ресторанов, магазинов, учебных заведений и торговых центров. Одним из основных каналов продаж для «НРБ» является интернет-магазин, в котором можно найти и приобрести не только выпускаемую компанией продукцию, но и некоторые другие сопутствующие товары, такие как диспенсеры и дозаторы.

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

Вот какой получилась главная страница:

nrb-shop.ru | Главная страница

Оказавшись на сайте, пользователь на первом же экране может ознакомиться с действующими на данный момент интересными предложениями или сразу перейти в нужную ему товарную категорию. Карточки товаров, расположенные на втором экране, содержат всю необходимую информацию (такую как плотность бумаги, количество листов или метров в одной упаковке и в коробке, а также артикул), но при этом не выглядят перегруженными.

На первом экране также разместилась кнопка вызова интерфейса, помогающего подобрать бумажную продукцию под уже имеющийся у клиента диспенсер. Фактически этот интерфейс является удобной альтернативой классическим фильтрам в каталоге продукции.

nrb-shop.ru | Интерфейс подбора продукции под диспенсер

В мобильной версии этот интерфейс выглядит так:

nrb-shop.ru | Мобильная версия интерфейса подбора продукции под диспенсер

Для того чтобы не перегружать пользователя информацией, этот интерфейс разбит на три шага. На первом шаге выбирается тип расходника, на втором — марка диспенсера, а на третьем — конкретная модель. Если по какой-то причине диспенсер найти не удалось, то на помощь придут консультанты, которые быстро помогут решить вопрос в мессенджере.

Ключевая страница любого интернет-магазина — страница товара:

nrb-shop.ru | Страница товара

Самая важная информация о товаре, как и на карточке товара в каталоге, вынесена в заголовок. Так как «НРБ» продаёт свои товары мелким или крупным оптом, то рядом с ценой также указана стоимость, пересчитанная в удобные для сравнения единицы (рулоны, метры и даже «стоимость одного использования»). Эти сравнительные единицы зависят от контекста, то есть для туалетной бумаги они одни, а для салфеток — другие.

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

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

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

nrb-shop.ru | Интерфейс проверки совместимости расходника с диспенсером

Мобильная версия этого интерфейса:

nrb-shop.ru | Мобильная версия интерфейса проверки совместимости расходника с диспенсером

Выбранная модель диспенсера сохраняется в браузере или в профиле пользователя. С этого момента на странице расходников такого типа сразу будет понятно совместимы ли они с нужным покупателю оборудованием или нет.

В самом низу страницы мы разместили блок «С этим товаром покупают», объединённый с ещё одним интерфейсом — «Выгодная покупка». Фактически это предложение приобрести сразу несколько товаров и получить неплохую скидку. Товары, участвующие в акции, можно сразу же добавить в корзину.

Большинство клиентов «НРБ» становятся постоянными. Вся необходимая информация для облегчения последующих заказов хранится в личном кабинете.

nrb-shop.ru | Личный кабинет пользователя

Информацию о текущей накопленной скидке и о том, на какую сумму нужно совершить покупок для получения скидки следующего уровня, можно узнать в разделе «Бонусы» личного кабинета.

nrb-shop.ru | Раздел «Бонусы» в личном кабинете пользователя

Данные обо всех покупках хранятся в разделе «Заказы» личного кабинета. У каждого заказа можно узнать статус и посмотреть какие конкретно товары входят в состав заказа. Тут же можно повторить ранее сделанные заказы и оплатить заказы со статусом «Требуется оплата».

nrb-shop.ru | Раздел «Заказы» в личном кабинете пользователя

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

nrb-shop.ru | Раздел «Избранное» в личном кабинете пользователя

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

Если вы планируете обновить внешний вид вашего интернет-магазина и расширить его функциональность, вы можете доверить это нам. Мы обновим существующие и разработаем новые интерфейсы и, если это необходимо, реализуем программную часть.

Вы можете связаться с нами, нажав на кнопку «Обсудить мой проект».

Полноразмерные изображения:

Запрос на
консультацию

Мы быстро свяжемся с вами, чтобы обсудить детали!

Отмена

Спасибо!

Мы уже работаем над нашим ответом.

Мы свяжемся с вами очень скоро, используя адрес электронной почты, который вы нам предоставили.

Что-то
пошло
не так :(

Ваше сообщение не было отправлено и нам очень жаль.

Пожалуйста, попробуйте ещё раз.