Кейс: мобильное приложение для «Кубань Инструмента» или как не дать покупателям «заблудиться» в каталоге

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

В кейсе рассказываем, как мы решили эту и другие задачи при разработке мобильного приложения для «Кубань Инструмента», основная аудитория которого — прорабы, строители и мастера.

Задача

«Кубань Инструмент» пришли с задачей — разработать мобильное приложение, в котором удобно и просто искать и приобретать товары. Также оно должно было положительно влиять на повышение лояльности клиентов за счёт дружелюбного интерфейса и инструментов персонализации.

Что было важно учесть:

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

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

• Каталог состоит из множества категорий и подкатегорий. Этот пункт напрямую перекликается с предыдущим. Глубокая вложенность, когда подкатегория делится ещё на несколько, — одна из особенностей любого строительного магазина. Плюс названия товаров часто бывают длинными, и их не сократить, иначе покупателю будет сложно быстро находить продукцию.

• Клиент решил сам спроектировать бэкенд. На нас были — аналитика, проектирование, дизайн, iOS-разработка, Android-разработка. Когда бэкенд и фронтенд разрабатываются разными командами, нередко возникают проблемы при передаче и обработке данных в приложении. Эти ошибки — решаемые, но работа над ними может занимать время.

Клиент

«Кубань Инструмент» — интернет-магазин по продаже строительного, садового и промышленного оборудования. Свой первый магазин «Кубань Инструмент» открыли в Краснодаре в 1979 году,

В 2009 компания запустила интернет-магазин, и сегодня «Кубань Инструмент» доставляет продукцию по всей России. В ассортименте — свыше 50 000 позиций.

Сроки

На разработку и согласования ушёл 1 год.

Результат: как выглядит приложение

Мобильное приложение «Кубань Инструмента» состоит из пяти основных разделов: главного экрана, каталога, корзины, «Избранное», профиля пользователя.

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

Главный экран

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

Каталог

Переходим к основной задаче на проекте — разработке каталога и фильтров поиска.

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

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

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

Предусмотрели, чтобы пользователь всегда может вернуться в предыдущую подкатегорию, а не «перескакивал» в общую категорию. Например, если покупатель зашёл в «Электроинструмент», перешёл в «Пилы», а затем в «Пилы дисковые», то при переходе назад он будет возвращаться через «Пилы», а не сразу в «перескакивать» в «Электроинструмент».

Ещё мы не стали использовать «хлебные крошки», когда в строке прописывается весь путь из категории в подкатегорию, — такое количество информации просто бы не поместилось на маленьком экране смартфона. Вместо этого добавили навигацию в виде всплывающего списка.

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

Также настроили фильтры таким образом, чтобы они подстраивались под каждую подкатегорию. Например, в «Дисковых пилах» можно выбрать напряжение аккумулятора и максимальную глубину пропила под разными углами, а в «Строительных аккумуляторных пылесосах» — расход воздуха и объём бака.

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

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

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

Детальная карточка товара

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

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

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

Корзина

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

Сейчас есть бесплатная доставка по городу и СДЕК. При этом «Кубань Инструмент» всегда может интегрировать и другие службы доставки.

Профиль пользователя

Для авторизации нужно ввести код из SMS — это один из самых удобных для клиентов способов.

Внизу экрана расположили рекомендованную продукцию — для увеличения вероятности покупки.

Юрлица могут добавлять реквизиты компании и загружать документы, необходимые для бухгалтерии.

Интеграции

Интегрировали три сторонних программы в мобильное приложение: внутреннюю систему «Кубань Инструмента», «Яндекс Карты» и СДЕК.

Инсайды проекта

На старте проекта не все данные из внутренней системы «Кубань Инструмента» передавались в мобильное приложение корректно. Из-за этого, например, сохранённый товар в «Избранном» отображался не в единственном экземпляре, а удваивался или утраивался — так в разделе могло появиться три одинаковых электропилы или лобзика.

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

В остальном работа на проектом шла гладко. Из нового для нас: команда iOS впервые использовала технологию Swift Concurrency при работе с API, а Android-разработчики — архитектуру Composable.

Через год планируем сравнить статистику продаж в приложении и на сайте — результатами обязательно поделимся.