«Продайте мне эту ручку!»: редизайн b2b-магазина офисных товаров

Компания «Смартон» — импортер и дистрибьютор канцелярских и офисных товаров в Беларуси.

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

От поиска до корзины: ключевые задачи

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

Навигация и поиск

Чтобы упростить работу с каталогом, нужно было:

• продумать структуру разделов;
• настроить точный поиск и фильтрацию;
• учесть характеристики товаров;
• сделать разбивку по брендам (компания представляет более 40 брендов).

Инструменты для корпоративных клиентов

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

Два направления интерфейса

Архитектуру сайта разделили на два блока: внешний (каталог, бренды, акции, новости) и внутренний (корзина, личный кабинет партнера, система уведомлений). Это разделение определило и работу дизайнеров: один занимался публичными страницами, второй интерфейсом личного кабинета.  

Дизайн-концепция и структура

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

На этапе проектирования продумали наполнение всех разделов сайта: главной страницы, каталога, карточек товаров, коллекций, новостей и акций, страниц брендов, разделов «Где купить» и «Контакты», а также личного кабинета клиента.  

Визуальная концепция

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

Быстрый просмотр и карточка товара

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

Проработка логики сайта

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

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

Хлебные крошки

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

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

Система фильтров

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

Умный поиск Sphinx

Для поиска внедрили движок Sphinx, который учитывает морфологию и транслитерацию. Система понимает запросы даже при ошибочной раскладке.

При вводе запроса появляются динамические подсказки: совпадающие товары и категории, популярные запросы и недавние поиски пользователя.  

Информативная карточка

Здесь собраны технические характеристики, варианты параметров (например, цвет), описание, фотографии, документы и сертификаты, отзывы и похожие товары.

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

Расширенная корзина

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

Товары, которых нет в наличии, автоматически попадают в отдельную корзину — «В ожидании».  

Управление заказами

После оформления клиент видит информацию о заказе и его статус. История всех заказов сохраняется в личном кабинете корпоративного клиента.

Здесь доступны инструменты для работы с закупками и документооборотом:

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

Основа для нового сайта

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

В результате были подготовлены:

• дизайн-концепция и макеты ключевых страниц;
• прототипы пользовательских сценариев;
• интерфейсы личного кабинета;
• функциональные требования для разработки на «1С-Битрикс»

Проект стал полноценной основой и путеводителем для обновления сайта Smarton.