ИнструмТорг

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

Аналитика

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

Екатерина Седова / Project-manager

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

Концепция

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

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

Михаил Болдырев / Art director

Обычно на этапе концепции мы не придаем большого значения функциональным требованиям, концентрируясь на визуальной составляющей и UI. Но “Инструмторг” поставил нам непростую задачу: совместить широкий спектр функций и маркетинговых элементов в рамках полностью адаптивного веб-интерфейса. Чтобы итоговый вариант концепции был максимально приближен к реальному интерфейсу, нам потребовалось заранее определить систему брейкпоинтов, а также составить перечень большей части функционала.

Роман Сычев

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

Адаптивность

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

Адаптивность

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

Адаптивность

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

Адаптивность

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

Адаптивность

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

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

Наталия Потапова / Designer

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

Комплекты

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

Одно из преимуществ ИнструмТорга — выгодная для покупателей ценовая политика и интересные акционные предложения.

Похожие товары

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

Навигация

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

Мы расположили навигацию в нижней части экрана, вместо того, чтобы прятать ее в “бургер”.

Фильтрация товаров

На мобильных устройствах мы отдали предпочтение “мягкой фильтрации” — сортировке, а весь список фильтров спрятали под иконку.

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

Личный кабинет

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

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

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

Корзина

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

Фильтрация товаров

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

Зарегистрированный пользователь избавлен от необходимости вводить какие-либо данные на этапе оформления заказа.

После завершения этапа MVP мы продолжаем работу над развитием проекта: нас ждёт модернизация и внедрение нового функционала, а также корректировка пользовательских историй в связи с грядущими изменениями в бизнес-логике ИнструмТорг.