Мобильное приложение для производителя бытовой химии Grass

Главное о кейсе

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

- Более 1000 скачиваний из AppStore
- 45,8% коэффициент конверсии в среднем за день.

Как проект изменил жизнь пользователей

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

Бизнес-задача и ее решение

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

Реализация:

Яркий дизайн, который привлечет внимание

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

Отзывы, которые помогают сделать выбор

Мы, как специалисты в SERM, не понаслышке знаем, как важны отзывы на товары для репутации компании. Сделали форму для отзывов максимально удобной, ориентируясь на опыт крупных маркетплейсов. Теперь пользователь может легко фильтровать отзывы по звёздам или выбрать только положительные. Это позволит быстрее найти полезные мнения и принять решение о покупке.

Корзина без лишних действий

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

Наглядное и удобное сравнение товаров

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

Различия в регистрации для физических и юридических лиц

Процесс регистрации адаптирован для нужд различных пользователей. Физическим лицам достаточно заполнить ФИО и записать свой e-mail. Для юридических лиц мы добавили поля для ИНН и названия компании, что делает регистрацию быстрой и удобной для всех категорий клиентов.

Авторизация на выбор

Если пользователь забыл пароль или логин, не проблема. Благодаря функции авторизации по номеру телефона с получением кода по SMS, в аккаунт можно зайти в любой момент. Это даёт дополнительную гибкость при входе.

Количество товара на виду

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

Крафт (мастерство), реализация, технические детали

API

Одним из ключевых этапов разработки было решение задачи по созданию API для приложения. Рассматривались различные варианты, включая использование Slim4 для работы с эндпойнтами и обновление роутинга Битрикс. Однако этот вариант требовал бы полной пересборки сайта, что было неприемлемо. Мы решили использовать битриксовый модуль REST, доработав его под свои нужды, чтобы можно было расширять эндпоинты. Этот подход обеспечил гибкость разработки, но также потребовал особого внимания к деталям.

Идентификация пользователя

Идентификация пользователей стала одной из главных технических сложностей. Поскольку запросы по API каждый раз генерируют новую сессию, мы не могли привязаться к ней. Решение состояло в привязке пользователя к токену. Однако при интеграции модулей сторонних разработчиков возникли проблемы, так как многие методы не передавали ID пользователя. Мы модифицировали необходимые файлы и внесли их под Git, чтобы следить за изменениями при обновлении модулей.

Работа с купонами и промокодами

Изначально возникла проблема с отображением купонов и промокодов в корзине и заказах, поскольку Битрикс сохраняет данные о них в сессии, а в нашем API для мобильного приложения привычных сессий нет.

Чтобы это исправить, мы привязали промокоды и купоны к токену пользователя. Теперь, когда пользователь применяет промокод, API сразу применяет скидку к корзине и "забирает" этот промокод — если не сделать этого немедленно, мы не сможем использовать его позже. После этого информация о примененном промокоде удаляется, чтобы избежать блокировки со стороны Битрикс.

Поиск и фильтрация

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

Валидация данных

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

Frontend

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

Чтобы управление состояниями было простым и эффективным, мы внедрили архитектуру BloC. Она помогла нам достичь высокого уровня организации кода и легкости в его сопровождении. В приложении используются push-уведомления, А/Б-тесты и удаленный контроль состояний, для добавления всех этих функций мы использовали плагины семейства инструментов Firebase.

Для анализа пользовательского поведения и интеграции карт были использованы плагины Appmetrica и yandex_mapkit. Эти инструменты позволяют детально отслеживать действия пользователей и предлагать им оптимальные маршруты. Для выполнения клиент/серверных запросов был выбран эффективный HTTP-клиент dio, обеспечивающий быструю и надежную передачу данных.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Проблема с Git

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

Скриншоты