«Продайте мне эту ручку!»: редизайн b2b-магазина офисных товаров
- Заказчик
- Компания «Смартон» — импортер и дистрибьютор канцелярских и офисных товаров в Беларуси.
- Задача
- Разработать адаптивный интерфейс b2b-интернет-магазина, переосмыслив логику каталога, фильтров, корзины и оформления заказов под задачи корпоративных клиентов.
От поиска до корзины: какие проблемы предстояло решить
У «Смартон» — тысячи, если не десятки тысяч, товарных позиций. Тут и канцелярские принадлежности, и цифровая техника, и хозтовары, и инструменты, и даже мебель для офиса. Ассортимент огромен. И вместе с его огромностью вырисовывает первая крупная проблема. Она связана с организацией каталога и устройством поиска.
Здесь не подойдет обычная витрина с картинками. Чтобы пользователю было легко найти любой товар, нужно проработать навигацию и отточить поисковую выдачу, учесть технические характеристики всего многообразия продукции, сделать разбивку по брендам. На минуточку: компания представляет на белорусском рынке на эксклюзивной основе более 40 брендов.
Второй ключевой момент — взаимодействие с клиентами. Корпоративных партнеров не устроит обычная корзина с выбранными позициями. Им нужен полноценный рабочий инструмент с актами сверки, графиком платежей, передачи обращений и анализом покупок.
Эти две особенности и легли в основу работы над проектом. Если взглянуть на созданную нами интеллектуальную карту, можно увидеть условную разбивку на два направления — «внешнее» (каталог, разделы, посвященные новинкам и акционным товарам, страницы брендов, новости) и «внутреннее» (корзина, личный кабинет партнера, система поп-ап уведомлений).
Отсюда выросла потребность в разделении работы между двумя дизайнерами. Один отвечал за ключевые «видимые» страницы: главную, каталог, карточку товара. Второй — за личный кабинет клиента и ряд второстепенных страниц (например «О компании»).
Объять необъятное: дизайн-концепция и функциональные требования
Чтобы ничего не упустить и не растерять в процессе, разработали дорожную карту проекта.
И приступили к прорисовке структурных макетов.
Учли каждую страницу сайта: какие блоки должны быть на главной и в каталоге, карточке товаров и коллекциях (блоки с товарами одного артикула, которые отличаются по цвету, материалу, размеру), новостях и акциях, разделах «Бренды», «Где купить», «Контакты» и, конечно, в личном кабинете.
Всего получилось порядка 50 макетов.
Это далеко не полный список макетов.
После согласования макетов разработали дизайн-концепцию и продумали внешний вид ключевых страниц сайта.
В частности, сделали главную страницу.
И каталог с двумя вариантами размещения баннеров.
Показали, как будет выглядеть товар при быстром просмотре и непосредственно в карточке.
Проработали страницу «Корзина» и «Последние заказы».
Только дизайном работа не ограничилась. Масштаба добавил документ с функциональными требованиями к проекту. В нем мы описали структуру сайта и разделов, принцип работы корзины, личного кабинета, фильтров.
Учли возможности интеграции с другими системами, разграничили пользовательский функционал, начиная от администратора и заканчивая «залетным», то есть неавторизованным пользователем. Уделили внимание техническим требованиям к хостингу, отображению на мобильных устройствах и SEO-оптимизации.
Если посмотреть только на оглавление этого документа, можно понять, какая кропотливая и детальная работа была проведена.
Для всех и каждого: поиск и управление каталогом
Smarton.by ориентирован на корпоративных клиентов, зарегистрированных в системе. Однако пользоваться его интерфейсом должно быть удобно всем, в том числе неавторизованному пользователю. Ведь тот, кто поначалу просто зашел полистать каталог и познакомиться с ассортиментом, может впоследствии стать постоянным партнером.
Чтобы на сайте не запутался ни случайный посетитель, ни специалист по снабжению, сделали прозрачную навигацию за счет хлебных крошек. Это элементы, которые показывают пользователю, где он находится в данный момент и как можно вернуться на предыдущие уровни.
Поля в зеленой рамке — это и есть хлебные крошки.
Не потеряться в разнообразии ассортимента помогает система фильтров. Своего рода центр быстрой сортировки товаров — по популярности, цене, новизне, производителю и характеристикам.
Для поиска предложили использовать поисковый движок Sphinx. Он умеет учитывать морфологию и транслитерацию, так что система поймет запрос независимо от того, написали вы «ручка шариковая» или «hexrf ifhbrjdfz».
Дополнительно учли вывод подсказок. Например, можно показывать как популярные запросы, так и то, что недавно искал конкретный клиент.
При вводе наименования появляются динамические подсказки с совпадающими категориями и товарами.
Карточку товара проектировали как хранилище полезной информации. Тут тебе и технические характеристики, и варианты параметров (к примеру, можно выбрать нужный цвет), и описание, и фотографии.
Есть возможность скачать документы и сертификаты на товар, прочесть отзывы других покупателей и посмотреть похожие позиции. Пользователь получает все и даже немного больше, чтобы определиться с выбором.
Правда, есть нюанс: неавторизованные посетители не видят цен на товар и не могут добавить его в корзину. Это привилегия зарегистрированных пользователей. Авторизация в целом дает ряд весомых преимуществ: можно отправлять товар в «Избранное», управлять корзиной и пользоваться всеми возможностями личного кабинета.
Функционал на максимум: корзина и личный кабинет
Авторизованные пользователи могут собирать не одну, а сразу несколько разных корзин: просматривать в них список товаров, добавлять новые по артикулу, загружать из таблицы или переносить из предыдущих заказов. Если в данный момент каких-то товаров нет в наличии, они автоматически летят в отдельную корзину — «В ожидании».
После оформления клиент видит информацию о заказе и его статус.
Данные обо всех заказах хранятся в личном кабинете корпоративного клиента. Здесь же в его распоряжение поступает расширенный набор инструментов, связанных с документооборотом и закупками.
Во вкладке «Персональные данные» можно посмотреть, а в случае необходимости внести изменения, в контактную информацию, банковские и юридические реквизиты, адреса доставки, увидеть историю заключенных договоров и активных сеансов.
Еще пользователь может изучить список просмотренных товаров, провести сравнение заинтересовавших его позиций, уточнить персональную скидку и проанализировать свои покупки.
Среди других полезных вкладок — график платежей, архив актов сверки и обращений, выгрузка прайсов, обмены по API для интеграции с «1С» и другими сервисами.
Для простоты взаимодействия с клиентами продумана страница уведомлений, а для обратной связи — форма создания обращения или контакта с персональным менеджером.
Результат: путеводитель обновлений
В процессе редизайна сайта мы прошли весь путь клиента — от первого касания до получения информации о доставке товара. Постарались проработать все тонкие места, где у заказчиков могут возникнуть вопросы или сложности. При разработке интерфейсов оценивали, насколько легко и интуитивно понятно взаимодействовать с сайтом на каждом этапе.
Мы согласовали с заказчиком все макеты и прототипы, описали сценарии и функциональные блоки. В рамках работы подготовили дизайн-концепцию, собрали интерфейсы основных экранов. Особое внимание уделили личному кабинету клиента, а также оформили функциональные требования для реализации сайта на «1С-Битрикс». На выходе получился полноценный путеводитель по обновлению сайта.
