Всё гениальное
— изи!

Меню
Кейс

ИнструмТорг - маркетплейс

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

IMAGE

Задача

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

 

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

Аналитика

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

 

Эти вводные определили следующие пути развития:

  • Упростить интерфейс, и создать привычные для пользователя паттерны взаимодействия с сайтом;
  • Ввести бонусную программу;
  • Уменьшить количество шагов при оформлении заказа; 
  • Сделать дизайн, соответствующий современным требованиям и трендам.

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

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

Концепция

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

 

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

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

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

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

Роман Сычёв
ИнструмТорг
IMAGE

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

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

Система баннеров

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

Сетка категорий

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

Адаптивность компонентов

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

Гибкая страница товара

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

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

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

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

Комплекты

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

 

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

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

В любой традиционной карте товара присутствует блок с похожими товарами.

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

Навигация

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

 

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

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

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

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

Также экономия пространства спасает покупателей от бесконечного скролла.
 

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

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

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

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

Корзина

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

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

Оформление заказа

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

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

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

Перспективы

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

Кейсы
Вернуться к
проектам

Другие проекты