eCom
Интернет-магазин строительного инструмента, силового оборудования, климатической техники и хозяйственных товаров. Магазин работает по всей России с 2009 года.

ИнструмТорг

eCom
Интернет-магазин строительного инструмента, силового оборудования, климатической техники и хозяйственных товаров. Магазин работает по всей России с 2009 года.
ИнструмТорг
Наша задача — переработать дизайн нового интернет-магазина, сделать его более современным и нативно понятным, а также упростить логику оформления заказа и коммуникации между продавцом и покупателем.
Постоянно растущий рынок строительных материалов создает высокий уровень конкуренции среди интернет-магазинов и маркетплейсов. Чтобы сохранить и расширить клиентскую базу, важно уделять большое внимание пользовательскому опыту: если клиенту сложно разобраться в интерфейсе — это потерянный клиент.
Уникальность продукта
Аналитика
За счет отказа от оффлайн-торговли, ИнструмТорг выделяется на фоне конкурентов своими ценами, а также системой скидок и бонусной программой.
Эти вводные определили следующие пути развития:
Упростить интерфейс и создать привычные для пользователя паттерны взаимодействия с сайтом
Ввести бонусную программу
Уменьшить количество шагов при оформлении заказа
Сделать дизайн, соответствующий современным требованиям и трендам
Екатерина Седова / Project-manager
Процесс разработки технического задания был трудоемким и длительным. Необходимо было учесть все пользовательские пути, продумать все состояния и изменения функционала на разных разрешениях. Была проведена плодотворная совместная работа с заказчиком, что способствовало получению качественного результата.
Переработка визуальной коммуникации
Концепция
На этапе прототипирования и разработки дизайн-концепции мы пришли к выводу, что текущий логотип “Инструмторг”, а также визуальная коммуникация компании в целом нуждаются в существенной переработке.
Мы подготовили несколько вариантов визуализации на примере баннеров, из которых был выбрана наиболее подходящая, отвечающая всем требованиям стилистика.
Михаил Болдырев / Art director
Обычно на этапе концепции мы не придаем большого значения функциональным требованиям, концентрируясь на визуальной составляющей и UI. Но “Инструмторг” поставил нам непростую задачу: совместить широкий спектр функций и маркетинговых элементов в рамках полностью адаптивного веб-интерфейса. Чтобы итоговый вариант концепции был максимально приближен к реальному интерфейсу, нам потребовалось заранее определить систему брейкпоинтов, а также составить перечень большей части функционала.
Роман Сычев
Мы выбирали из нескольких подрядчиков, но после первой презентации, у нас не осталось сомнений в профессионализме коллег из Decart. На каждом из последующих этапов эта уверенность только росла, и полученный в итоге результат превзошел все наши ожидания. Надеемся на дальнейшее плодотворное сотрудничество.
Система адаптивного поведения
Адаптивность
Чтобы ускорить запуск MVP, мы отказались от мобильного приложения и отдельной мобильной версии. Перед нами стояла задача проработать систему сеток и брейкпоинтов для полностью адаптивной верстки.
Система баннеров
Адаптивность
Для корректного отображения контента мы разработали 9 видов баннеров для различных типов страниц. Мы учли широкий диапазон разрешений, а также сформулировали правила загрузки изображений, для оптимизации поддержания высокой скорости работы сайта.
Сетка категорий
Адаптивность
Структура карточек категорий, расположенных на главной странице, представляет собой несимметричную сетку, для которой мы сформулировали правила корректной адаптивности. Каждая плитка может занимать одну или две ячейки, в зависимости от текущего брейкпоинта.
Адаптивность компонентов
Адаптивность
Нам удалось достичь полной адаптивности за счет детальной настройки поведения отдельных компонентов. Например, для карточек-превью товара мы выделили три диапазона разрешений экранов, на каждом из которых для превью заданы индивидуальные правила изменения размера. В зависимости от разрешения экрана, мы отображаем специфические для него стиль и особенности поведения компонентов.
Гибкая страница товара
Адаптивность
Страница товара — одна из сложнейших страниц сайта. Она наполнена разнородной информацией: от фотографий товара до комплектаций и сертификатов соответствия. Поэтому первостепенной задачей было не запутать пользователя. Вся основная информация о стоимости, доставке, а также основные характеристики отображаются на первом экране. Ниже — вся подробная информация о товаре.

Отдельного внимания потребовала необходимость сделать страницу товара адаптивной, и при этом сохраняющей логику. Мы создали правила поведения и перестроения всех блоков страницы так, чтобы сохранить нужный нам приоритет в подаче информации.
Наталия Потапова / Designer
На данном этапе развития маркетплейсов отпала необходимость изобретать велосипед — нестандартные решения скорее оттолкнут пользователя, а не стимулируют к покупке. Важно тщательно и скрупулезно изучить сильные и слабые стороны площадок-конкурентов и на основе этих данных и пользовательского опыта ЦА создать интерфейс, который помогает пользователю, а не мешает.
Система комплектов
Комплекты
Специфика торговой площадки подразумевает, что пользователи редко покупают один товар. Обычно в заказе присутствует несколько позиций сопутствующих товаров. Так появилась идея заранее предлагать товары, покупаемые вместе, в качестве комплектов с хорошей скидкой.
Одно из преимуществ ИнструмТорга — выгодная для покупателей ценовая политика и интересные акционные предложения.
Система подбора похожих товаров
Похожие товары
В любой традиционной карте товара присутствует блок с похожими товарами. Мы расширили функционал подбора похожих товаров, добавив сравнительные характеристики — так покупатель будет видеть больше детальной информации, что поможет выбрать товар, наиболее соответствующий его нуждам.
Эргономичная навигация
Навигация
Основные разделы сайта всегда перед глазами у пользователя и ему не нужно использовать вторую руку, чтобы добраться до нужного раздела.
Мы расположили навигацию в нижней части экрана, вместо того, чтобы прятать ее в “бургер”.
Гибкая система фильтрации
Фильтрация товаров
На мобильных устройствах мы отдали предпочтение “мягкой фильтрации” — сортировке, а весь список фильтров спрятали под иконку.
Чтобы функционал был нативно понятный и при этом позволял максимально гибко настраивать выдачу товаров, мы добавили несколько уровней навигации. Также экономия пространства спасает покупателей от бесконечного скролла.
Интуитивный личный кабинет пользователя
Личный кабинет
Удобная навигация по личному кабинету позволяет быстро отредактировать профиль, посмотреть количество бонусов, отзывы и ответы на вопросы.

История заказов представляет из себя список, содержащий исчерпывающую, для идентификации конкретного заказа, информацию. При этом мы можем посмотреть детали конкретного заказа и взаимодействовать с товарами из которых состоял этот заказ.
В личном кабинете можно подключать дополнительные профили юр. лиц с возможностью быстрого редактирования и переключения между ними.
Проработанная система обновления базы данных
Корзина
Чтобы не допускать ситуаций, когда добавленного товара не оказывается на складе. Мы предусмотрели изменение логики обновления базы данных, и добавили функционал проверки наличия.
Гибкая система фильтрации
Фильтрация товаров
Заполнение кучи полей — очень раздражающее явление (мы с этим полностью согласны). Всю необходимую информацию мы храним в аккаунте пользователя. Таким образом постоянному покупателю не придётся в очередной раз гуглить свой почтовый индекс :)
Зарегистрированный пользователь избавлен от необходимости вводить какие-либо данные на этапе оформления заказа.
После завершения этапа MVP мы продолжаем работу над развитием проекта: нас ждёт модернизация и внедрение нового функционала, а также корректировка пользовательских историй в связи с грядущими изменениями в бизнес-логике ИнструмТорг.