Мобильное приложение
для производителя
бытовой химии Grass
Год
2024
Задача
Разработать мобильное приложение, которое будет полностью повторять сайт-агрегатор. Компании Grass было важно диверсифицировать риски работы с маркетплейсами, так как они в том числе забирают изрядную комиссию, и дать своим потребителям возможность удобно заказывать товары с мобильных устройств.
О Клиенте
Grass — ведущий российский производитель профессиональной автохимии и оборудования, моющих средств для клининга, бытовой химии и косметики из Волгограда. Многие их средства вы можете найти как на маркетплейсах, так и увидеть на полках гипермаркетов. Ребята не просто производят моющие средства и оборудование, но и 80% тары к ней.
01
Яркий дизайн, который привлечет внимание
Мы учли пожелания клиента и создали по-настоящему красочное и функциональное приложение, которое не только радует глаз, но и создает положительные эмоции у пользователей. При разработке вдохновлялись известными маркетплейсами, так как люди больше всего привыкли к их UX. Яркие цвета и иллюстрации помогут приложению выделиться на фоне конкурентов, что увеличит привлекательность и улучшит пользовательский опыт.
02
Отзывы, которые помогают сделать выбор
Мы, как специалисты в SERM, не понаслышке знаем, как важны отзывы на товары для репутации компании. Сделали форму для отзывов максимально удобной, ориентируясь на опыт крупных маркетплейсов. Теперь пользователь может легко фильтровать отзывы по звёздам или выбрать только положительные. Это позволит быстрее найти полезные мнения и принять решение о покупке.
03
Корзина без лишних действий
Теперь удалить товар из корзины можно простым свайпом влево. Это значительно быстрее, чем искать кнопку удаления, и упрощает процесс покупок. Точно также быстро по свайпу можно внести товар в “Избранное”, чтобы любимый продукт всегда был на виду. Покупатель может сосредоточиться на выборе продукции без лишних кликов.
04
Наглядное и удобное сравнение товаров
Чтобы было проще ориентироваться в характеристиках, мы выделили строки с параметрами цветом. Пользователь может сравнивать свойства товаров, а также сортировать по схожим или различающимся параметрам. Это облегчит процесс принятия решения, так как можно мгновенно увидеть плюсы и минусы каждой будущей покупки.
С визуальным разделением строк цветом
Регистрация физ. лица
Регистрация юр. лица
05
Различия в регистрации для физических и юридических лиц
Процесс регистрации адаптирован для нужд различных пользователей. Физическим лицам достаточно заполнить ФИО и записать свой e-mail. Для юридических лиц мы добавили поля для ИНН и названия компании, что делает регистрацию быстрой и удобной для всех категорий клиентов.
06
Авторизация на выбор
Если пользователь забыл пароль или логин, не проблема. Благодаря функции авторизации по номеру телефона с получением кода по SMS, в аккаунт можно зайти в любой момент. Это даёт дополнительную гибкость при входе.
Авторизация/вход по телефону
Вход по логину или E-mail
Увеличено кол-во до максимума
07
Количество товара на виду
Чтобы избежать неприятных сюрпризов с наличием товаров, мы вывели информацию об оставшемся количестве прямо на кнопку добавления в корзину. Теперь всегда видно, сколько товара доступно для заказа.
API
Одним из ключевых этапов разработки было решение задачи по созданию API для приложения. Рассматривались различные варианты, включая использование Slim4 для работы с эндпойнтами и обновление роутинга Битрикс. Однако этот вариант требовал бы полной пересборки сайта, что было неприемлемо. Мы решили использовать битриксовый модуль REST, доработав его под свои нужды, чтобы можно было расширять эндпоинты. Этот подход обеспечил гибкость разработки, но также потребовал особого внимания к деталям.
Идентификация пользователя
Идентификация пользователей стала одной из главных технических сложностей. Поскольку запросы по API каждый раз генерируют новую сессию, мы не могли привязаться к ней. Решение состояло в привязке пользователя к токену. Однако при интеграции модулей сторонних разработчиков возникли проблемы, так как многие методы не передавали ID пользователя. Мы модифицировали необходимые файлы и внесли их под Git, чтобы следить за изменениями при обновлении модулей.
Работа с купонами и промокодами
Изначально возникла проблема с отображением купонов и промокодов в корзине и заказах, поскольку Битрикс сохраняет данные о них в сессии, а в нашем API для мобильного приложения привычных сессий нет.
Чтобы это исправить, мы привязали промокоды и купоны к токену пользователя. Теперь, когда пользователь применяет промокод, API сразу применяет скидку к корзине и "забирает" этот промокод — если не сделать этого немедленно, мы не сможем использовать его позже. После этого информация о примененном промокоде удаляется, чтобы избежать блокировки со стороны Битрикс.
Поиск и фильтрация
Стандартный поиск Битрикса не предполагает фильтрации. Мы настроили поиск с фильтрацией без серьезных переработок стандартного функционала. Будущие покупатели могут легко найти нужный товар в каталоге по заданным критериям.
Валидация данных
Чтобы избежать ошибок при заполнении полей, мы создали собственный функционал валидации, который легко расширяется. Все запросы от мобильного приложения проверяются на корректность, после чего либо выдается ошибка о некорректности заполнений, либо, если всё корректно, запрос отрабатывает по заложенному сценарию.
Frontend
В процессе разработки мобильного приложения Grass мы применили современные технологии и инструменты, чтобы сделать его действительно уникальным.
предоставляет пользователям одинаково качественный опыт на IOS и Android, обеспечивая плавную работу приложения на любой платформе. Этот фреймворк упрощает создание продукта для разных устройств, сокращая время на разработку и поддерживая высокое качество кода.
позволяет покупателям легко ориентироваться в приложении, обеспечивая плавные переходы между экранами и интуитивную навигацию. Для программистов это означает больше гибкости при создании сложных сценариев и упрощение поддержки проекта.
улучшает стабильность и предсказуемость работы приложения, минимизируя сбои и делая взаимодействие более комфортным. Разработчикам эта архитектура помогает организовать код, что значительно облегчает его поддержку и расширение функционала.
помогает пользователям получать актуальные push-уведомления и обновления на основе А/Б-тестов, делая взаимодействие с приложением более персонализированным. Для разработчиков это мощный инструмент, позволяющий оперативно внедрять новые функции и адаптировать продукт под нужды аудитории.
анализирует поведение покупателей, предлагая персонализированные решения, которые делают приложение удобнее и полезнее. Плагин предоставляет глубокую аналитику, помогающую лучше понимать потребности пользователей и оптимизировать функционал.
обеспечивает пользователям удобную навигацию с точными маршрутами и геолокационными функциями.
ускоряет загрузку данных, делая приложение более отзывчивым и снижая время ожидания для пользователей. Разработчики получают простой и надёжный HTTP-клиент для взаимодействия с сервером, что облегчает интеграцию и повышает стабильность передачи данных.
Эти решения помогли нам создать продуманное и функциональное приложение Grass, которое не только удовлетворяет потребности пользователей, но и предоставляет им богатый набор возможностей.
Сложности, с которыми столкнулись
Так как над сайтом интернет-магазина работает другая студия, то нам приходится вникать во все процессы обновления сайта, которые ведет не наша команда. Дело в том, что ребята совсем не использовали Git, поэтому мы не могли вовремя вносить изменения в приложение. Мы договорились, что все-таки будем работать через Git. Но студия поддержки все также продолжала забывать заносить туда обновления. Было много трудностей с актуализацией контента на сайте, следовательно и в приложении.
Результат
Разработали удобное приложение, которое теперь позволяет заказать продукцию в привычном для пользователя UX на мобильном устройстве.
скачиваний из AppStore
45,8%
коэффициент конверсии в среднем за день
Команда, которая работала над проектом
Менеджер проекта
Крыгин Иван
Аналитик
Эдуард Серков
Дизайнер
Мира Халилуллина
Руководитель Frontend-разработки
Кирилл Калюжный
Frontend-разработчик
Мельников Владислав
Frontend-разработчик
Аюр Мархакшинов
Frontend-разработчик
Георгий Зубелевич
Backend-разработчик
Дмитрий Иваненко
Тестировщик
Зоя Таш
Используемые технологии
Flutter
Navigator 2.0
BloC
Appmetrica
yandex_mapkit
Firebase
dio
REST API