Мобильное приложение для интернет-магазина «Кубань Инструмент»
Клиент: Кубань Инструмент
Мобильное приложение для интернет-магазина «Кубань Инструмент»
Разработали мобильное приложение для интернет-магазина «Кубань Инструмент», специализирующегося на продаже строительного, садового и промышленного оборудования
Задача
Разработать мобильное приложение для интернет-магазина, которое:
1
позволит быстро и легко искать и приобретать товары в смартфоне. Ведь большинство клиентов — прорабы, строители и мастера, которым проще использовать для покупок приложение, а не сайт. Плюс не у всех из них есть доступ к компьютеру
2
повысит лояльность клиентов за счёт удобного интерфейса и персонализации
Результат
Создали современное мобильное приложение, в котором пользователи могут:
Функциональность
Клиент решил сам спроектировать бэкенд. А на нас были — аналитика, проектирование, дизайн, iOS-разработка, Android-разработка
Вход в приложение
При открытии появляется анимированный логотип. Также при первом входе пользователь проходит онбординг — просматривает ключевые возможности приложения
Главный экран
При оформлении главного экрана и приложения в целом использовали фирменные цвета клиента — голубой, жёлтый и акцентный красный
В верхней части экрана расположили популярные категории — для стимулирования продаж. В нижней — различные подборки товаров. И категории, и подборки формируют маркетологи «Кубань Инструмента» и добавляют через административную панель
Здесь же, на главном экране, пользователь выбирает город, в котором он собирается получить заказ
Каталог
Первая особенность каталога строймагазинов в том, что многие категории делятся на подкатегории, те — ещё на подкатегории, и так далее. Вторая — товары с длинными названиями
А чем больше таких элементов — тем сложнее расположить их на экране так, чтобы пользователям было легко ориентироваться в каталоге
Поэтому удобная и понятная фильтрация — уже половина успеха интернет-магазина. Ведь чем сложнее найти товар, тем выше вероятность, что пользователь выйдет из приложения
Категории и подкатегории
В категории пользователь видит и список подкатегорий, и карточки товаров из этой категории с быстрыми фильтрами. Если подкатегорий много — на экран выводится пять из них, а остальные разворачиваются по желанию. Это удобно: не нужно тратить время на то, чтобы попасть в нужную — товары видно сразу
Также добавили навигацию в виде всплывающего списка, а от идеи классических «хлебных крошек», когда в строке прописывается весь путь из категории в подкатегорию, отказались. Иначе бы информация не поместилась на экране смартфона
В категории пользователь видит и список подкатегорий, и карточки товаров из этой категории с быстрыми фильтрами. Если подкатегорий много — на экран выводится пять из них, а остальные разворачиваются по желанию. Это удобно: не нужно тратить время на то, чтобы попасть в нужную — товары видно сразу
Сортировка, фильтры, теги
Продукцию можно сортировать по названию, цене, популярности и другим параметрам
Для более детального поиска есть фильтры, они подстраиваются под каждую подкатегорию. Например, в «Шлифмашинах» можно выбрать размер цанги и диаметр диска, а в «Перфораторах» — напряжение аккумулятора и максимальный диаметр бура
В подразделах есть быстрые теги — опять же, для удобства при поиске
Карточки товаров
Их можно выводить по две или одной на строку. На каждой карточке размещена основная информация, которая помогает покупателям быстрее замечать нужные товары: фотография, названия, цена и т. д.
Если товар новый, на него действует акция или скидка по дисконтной карте — пользователь видит соответствующий значок или надпись. Также есть возможность добавить любой товар в «Избранное»
Детальная карточка товара
В детальной карточке товара содержится много информации: изображение, название, цена, характеристики, описание, комплектация, документация, отзывы и т. д. И это ещё одна особенность строймагазинов
Причём только список характеристик может не умещаться на экране смартфона. Поэтому основная задача при проектировании карточки — продумать всё так, чтобы пользователям было максимально просто по ней перемещаться
Ключевая информация
В основной информации представлены название, цена, наличие в магазинах, способы доставки и другие данные, на которые покупатели обращают внимание в первую очередь
Можно купить товар сразу (в один клик) или добавить его в корзину
Цена всегда видна
Продумали интерфейс таким образом, чтобы пользователь всегда видел цену: как только он начинает скролить и блок с ценой пропадает из поля зрения — она появляется на кнопке «В корзину»
Быстрая навигация
Есть четыре основных параметра: характеристики, описание, комплектация, документация. В любой из них легко перейти, нажав на соответствующее название
Легко поделиться
Ссылку на детальную карточку товару можно сохранить на устройство или переслать
Особенно полезно для рабочих, которые часто отправляют инструменты и оборудование на согласование заказчику
Компактное отображение
Чтобы не перегружать экран с характеристиками, оставили только основные из них. А когда пользователю нужно ознакомиться со всеми — он нажимает на «Развернуть»
Поиск из карточки
Если нужно найти другую продукцию, необязательно покидать детальную карточку товара — можно здесь же воспользоваться поиском по всему каталогу. Ещё можно перейти в нужную категорию с помощью навигационной панели
Отзывы
В детальной карточке товары пользователи могут просматривать отзывы, есть фильтрация по отзывам с фото. При желании отзыв можно лайкнуть, дизлайкнуть или пожаловаться на него
Корзина
Главное — спроектировали экран таким образом, чтобы пользователь всегда видел общую сумму. Даже если блок с ценой поднимается или опускается при скролле
Пользователь может легко изменить количество товара, удалить товар или полностью очистить корзину
Внизу экрана размещается подборка с сопутствующими товарами — для увеличения продаж и среднего чека
Экран оформления заказа
Экран оформления заказа состоит только из самой важной информации, чтобы упростить процесс покупки и снизить вероятность бросания корзины
В него входят данные плательщика (физлица или юрлица), способ оплаты и получения, адрес, состав заказа, комментарий, сумма
Профиль пользователя
Клиенты могут авторизовываться сразу при входе в приложение или позже — нажав на кнопку «Войти» в профиле или при оформлении заказа, вход по коду из SMS
Добавили в профиль прошлые заказы и оставленные отзывы. Если пользователю понадобится быстро найти купленный товар или отзыв на него — они всегда под рукой
В нижней части экрана расположили рекомендованную продукцию — для увеличения вероятности покупки
Для юрлиц предусмотрена возможность добавить реквизиты компании и скачать документы, необходимые для бухгалтерии
Клиенты «Кубань Инструмента» могут добавить дисконтную карту
Интеграции и инсайды проекта
Интегрировали в приложение внутреннюю систему «Кубань Инструмента», «Яндекс Карты» и СДЕК.
Вся информация о товаре поступает в приложение из внутренней системы учёта «Кубань Инструмента». Поступает моментально — чтобы исключить ситуации, когда покупатель видит старую цену или добавляет в корзину товар, которого нет на складе
1
Единственным небольшим препятствием на старте проекта стала настройка API. API — набор правил и спецификаций, которые позволяют различным программам взаимодействовать друг с другом и обмениваться данными. В нашем случае нужно было настроить передачу информации о ценах и других данных из ПО клиента в мобильное приложение
2
В начале API передавал часть данных некорректно. Например, при добавлении товара в «Избранное», он появлялся не в единственном экземпляре, а удваивался или утраивался. Такие ситуации могут происходить, когда бэкенд и фронтенд разрабатывается разными командами. Но эта проблема решается в пару созвонов: достаточно обоим разработчиками договориться, какие изменения нужно внести каждому на своей стороне
3
В остальном работа прошла гладко: у нас большой опыт в создании приложений для интернет-магазинов, и мы знаем, как реализовать интерфейс с функциональностью
4
Из нового для нас: команда iOS впервые использовала технологию Swift Concurrency при работе с API, а Android-разработчики — архитектуру Composable
Стек iOS-разработка
- Среда разработки
-
Xcode
- Языки
-
Swift 5
- Архитектурные шаблоны
-
MVVM
- Технологии
-
Dependency Injection•UIKit
- Фреймворки
-
SnapKit•DITranquillity•RouteComposer•RxSwift•Pulse•Alamofire•Nuke
- Система контроля версий
-
GitLab
- Система сборки
-
Tuist
Стек Android-разработка
- Среда разработки
-
Android Studio
- Языки
-
Kotlin•Java
- Технологии
-
Jetpack Compose•MVVM•Paging•Coroutines•Flow
- Фреймворки
-
Compose•Coil•Dagger2•Lottie•Retrofit•FirebaseYandexMapKit
- Система контроля версий
-
GitLab
- Система сборки
-
Gradle
Статистика разработки
- Менджер
-
370 часов
- Аналитик
-
125 часов
- UX/UI-дизайнер
-
220 часов
- iOS-разработчик
-
574 часа
- Android-разработчик
-
574 часа
- QA-инженер
-
368 часов
предыдущая
следующаяSpider Group специализируется на разработке мобильных приложений, сайтов, CRM-систем и серверной логики, внедрении AI, а также создании дополненной реальности и интернета вещей разработке мобильных приложений, веба, серверных проектов, дополненной реальности, искусственного интеллекта и Интернета вещей.