Мобильное приложение с программой лояльности, сканером продуктов, доставкой. Кейс продуктового ритейлера «Дикси»
Перед командой FriFlex поставили задачу: за три месяца обновить приложение и добавить в него новые функции. Рассказываем, как решали её и почему лучшим инструментом для этого считаем кроссплатформенную разработку
Чаще покупатели делали заказ прямо с телефона. Рост спроса на покупки через интернет повлёк повышение активности ритейлеров в развитии своих цифровых продуктов.
В период изоляции сеть «Дикси» запустила масштабное обновление мобильного приложения. В сжатые сроки было необходимо разработать и запустить программу лояльности, онлайн-доставку продуктов и другие функции.
«Магазин в кармане»: задачи и сроки
Мобильное приложение было у «Дикси» и до пандемии. Но, учитывая растущий спрос на цифровые решения, мы хотели создать не просто приложение, а своеобразный «магазин в кармане», который будет помогать клиентам совершать покупки.
Для решения этой задачи было необходимо реализовать в мобильном приложении целый ряд функций:
Возможность поиска ближайших магазинов, чтобы покупатель мог не только пользоваться ближайшим «Дикси» возле дома, но и найти магазин любимой сети, находясь в любом районе города.
- Наличие и стоимость товаров — открыв приложение, покупатель может быстро найти нужный продукт и узнать его цену в конкретном магазине.
- Сканер штрихкодов на товарах — значительно развить фичу, чтобы ни один штрихкод не прошёл мимо камеры смартфона покупателя.
Дополнительные привилегии и скидки, которые покупатели могут самостоятельно выбирать и использовать.
В регионах Приволжья планировался запуск программы лояльности, которая включает в себя скидки по карте, возможность выбора любимых товаров, проведение закрытых распродаж, персонализированные купоны и рекомендации товаров.
Также нужно было наладить коммуникацию с покупателями и интегрировать в приложение инструменты контакт-центра, чтобы пользователь мог обратиться по любой проблеме и быстро получить ответ.
- В условиях пандемии особенно остро встала задача создать сервис, позволяющий в любой момент заказать продукты, не выходя из дома. Поэтому было важно реализовать в приложении функцию онлайн-доставки.
Разработать и запустить первую версию нужно было в сжатые сроки — за 3 месяца. Эту задачу решила команда FriFlex, у которой уже был опыт во взаимодействии с компанией и разработке высоконагруженных проектов.
Предложение FriFlex: кроссплатформенная разработка на Flutter
Задача «Дикси» требовала большого комплексного решения, включающего в себя дизайн, проектирование, бэкенд-разработку, разработку собственной дизайн-системы и проработку коммуникации с пользователями.
FriFlex предложил использовать кроссплатформенную разработку и технологию Flutter. Преимущество кроссплатформенности в том, что она позволяет создавать одновременно приложение на двух платформах — Android и iOS, тем самым ускорять релизный цикл и оптимизировать бюджет.
Мы работаем с Flutter с конца 2018 года – сначала использовали фреймворк на своих внутренних проектах, потом на заказных. Сейчас в нашей Flutter-команде 7 человек. Накопив большой опыт использования фреймворка на проектах из разных сфер, в сентябре 2020 года мы запустили онлайн-курс по программированию на Flutter совместно с образовательной онлайн-платформой Otus.
Из очевидных плюсов Flutter для бизнеса выделим следующие:
- прямая поддержка (maintain) от Google (Alphabet);
OpenSource с лицензией BSD 3-Clause;
- большое сообщество разработчиков, которое активно растёт;
- стабильность технологии — несмотря на то, что Flutter появился только в 2018 году, технология работает стабильно, крупные международные компании из разных сфер уже используют Flutter (Alibaba Group, Tencent, Ebay, Яндекс.Такси и другие);
- высокая скорость разработки — по нашему опыту, фреймворк позволяет оптимизировать срок разработки на значение до 40%;
- эффективная работа в команде;
- взаимозаменяемость разработчиков;
- множество готовых библиотек UI и общего назначения, возможность создать свою библиотеку компонент;
- фреймворк снимает необходимость синхронизации фич на Android и iOS в тех случаях, когда разработка одной платформы идёт быстрей;
- богатый инструментарий — возможность создавать интересный UI, просто и быстро делать анимации и многое другое;
- простой доступ к передовым функциям платформы и другие.
Кроме разработки приложения, нужно было наладить его взаимодействие со всеми внутренними и внешними системами «Дикси». Чтобы интегрировать мобильное приложение в уже существующую систему заказчика, FriFlex предложил использовать отказоустойчивую серверную инфраструктуру. Разработчики и сотрудники ритейлера отслеживали состояние системы по разным метрикам, добавляли новые мониторинги и улучшали текущие, получая данные в различных срезах.
Командная работа и этапы решения задачи
Приложение разрабатывала команда из десяти человек. В работе использовались agile-методологии – Scrum и Kanban. Проект реализовывали поэтапно и работали совместно с разными отделами «Дикси»:
- Сначала вместе с ИТ-архитекторами «Дикси» выбрали архитектуру и технологии, которые будут использоваться. FriFlex предложили верхнеуровневую схему взаимодействия систем, потоки данных, обосновали фреймворк и технологии для мобильных приложений и связующего программного обеспечения.
- В ходе совместной работы с продуктовой командой в Miro и Figma создали майнд-мэп и согласовали дизайн-прототипы.
- Доработали необходимые элементы дизайна.
- Далее итерационно запускали финальный дизайн по экранам. Дизайн и прототипы готовили в Figma.
- Итерационная бэкенд-разработка шла исходя из согласованного бэклога, который контролировали в Notion и Trello.
- Мобильная разработка на Flutter.
- Тестирование: ручное, тест-кейсы и автотесты.
Когда появился минимальный жизнеспособный продукт, выпустили первый релиз. И далее выпускали обновления с новыми функциями.
Высокая нагрузка и сложности интеграций
Главная сложность в разработке проекта была связана с разнообразным ИТ-ландшафтом «Дикси». Нужно было интегрировать большое количество внутренних систем на разных языках, фреймворках и протоколах. Возникали и трудности технического характера.
Например, в октябре несколько дней была аномально высокая нагрузка на приложение в пиковые часы. Это было связано с маркетинговыми акциями и проблемами сети: долгие запросы и, как следствие, долгие ответы внешних сервисов. Чтобы быстро решить проблему, мы увеличили оперативную память на серверах приложений и стали разбираться, что произошло. Выяснив причину, дополнили наши мониторинги и поставили задачу на кеширование долгих запросов, которые не кешировались. А также договорились с партнёром по лояльности реализовать более быстрый ответ на запросы.
Запуск приложения и планы по развитию
Первая версия обновлённого мобильного приложения на двух платформах — Android и iOS — появилась в мобильных магазинах в оговорённый срок — через 3 месяца с момента старта работ.
Далее приложение поэтапно дорабатывалось: добавили программу лояльности, онлайн-доставку. Дополнительно раз в одну-две недели выходили плановые релизы по обновлению функций.
В приложении много высоконагруженных задач, в которых участвует множество систем. Например, покупателю важно видеть актуальные данные о наличии товара в магазине. Для этого нужно синхронизировать и постоянно обновлять информацию. Также есть ряд аналогичных задач, которые можно улучшить на уровне взаимодействия систем — это стоит в приоритетных планах дальнейшего улучшения приложения.
Результаты использования для компании
Чтобы оценить эффективность мобильного приложения, «Дикси» анализировали:
- количество скачиваний и удалений приложения;
- количество зарегистрированных пользователей в программе лояльности;
- скорость онлайн-заказа и количество пользователей онлайн-доставки;
- количество активных пользователей приложения в течение суток (DAU) и в течение одного месяца (MAU);
- показатель LTV (прибыль, которую приносит клиент за всё время работы).
Ранее онлайн-доставка продуктов была доступна только на сайте «Дикси». После появления доставки в мобильном приложении, спрос на онлайн-заказ продуктов увеличился в два раза. Объём онлайн-продаж продолжает расти каждую неделю.
После запуска обновлённого приложения количество пользователей выросло в два раза. Люди стали в три раза чаще возвращаться в приложение.
В первую неделю запуска в программе лояльности зарегистрировалось 30% всех пользователей. А по итогам двух месяцев количество регистраций превысило оптимистичные прогнозные значения в два раза. В регионах, где запустили программу лояльности, средний чек по картам вырос на 50%, в сравнении со средним чеком без карт.
Результаты для конечных потребителей
После запуска приложения «Дикси» получает обратную связь от покупателей через аналитику и механизмы обратной связи в приложении. Судя по отзывам, клиенты больше всего оценили появление в приложении:
- актуальной информации о наличии товаров и ценах в конкретном магазине;
- возможности поиска ближайшего магазина «Дикси» и информации о графике работы;
- возможности получать дополнительные скидки и привилегии;
- онлайн-доставки.
Через форму обратной связи в приложении пользователи оставляют свои пожелания по добавлению новых фич. Например, предложили добавить фильтр по скидкам в каталоге, возможности ввести штрихкод вручную (для случаев, когда он по каким-то причинам не считывается сканером) и составить список офлайн-покупок перед походом в магазин. Часть из этих предложений разработчики уже реализовали, часть взяли в работу — обновления появятся в ближайших релизах.
Нативная или кроссплатформенная разработка: что говорят исследования и мнения экспертов
Компаниям, которые хотят разработать или улучшить своё мобильное приложение, чаще всего приходится задумываться сразу о двух платформах. Android и iOS — две основные платформы, которым отдают предпочтение пользователи по всему миру, Россия не исключение. 71% российских пользователей выбирает Android, iOS — почти 28%. Это значит, что если разработать приложение только для одной системы, то потеряется значительная часть аудитории.
Вариантов два: использовать нативную разработку, которая учитывает особенности конкретной операционной системы, её набор инструментов и возможностей, или выбрать кроссплатформенную разработку, которая подойдёт для обеих платформ. Оба варианта имеют и плюсы, и минусы, выбор нужно делать исходя из целей и ресурсов компании.
Разрабатывать нативные приложения зачастую проще, потому что есть нативный язык со своим набором технологий и фреймворков. Но если компания хочет, чтобы приложение было доступно и на iOS, и на Android, то потребуется в два раза больше ресурсов, финансовых и кадровых.
Кроссплатформенная разработка помогает ускорить цикл выпуска приложения без потери функций. Flutter — один из фреймворков кроссплатформенной разработки от компании Google, он появился на рынке не так давно, но уже завоевал хорошую репутацию.
Плюсы Flutter: hot reload, компиляция в нативный код, производительность. На Flutter гораздо проще, чем нативно, делать UI, особенно сильно нестандартный.
Из минусов могу отметить то, что фреймворк относительно молодой, так что бывают ситуации, когда готовых библиотек не хватает, а best practices пока только формируются. Хороших специалистов пока мало.
На Flutter мы разрабатывали B2B-приложение-компаньон для системы управления отелями со стандартным набором функций для бизнес-приложения: взаимодействие с сервером, формы, валидация, сообщения, управление задачами. Из особенностей приложения: своя дизайн-система, полностью кастомный UI.
Flutter помог оптимизировать процессы: цикл разработки стал гораздо короче, версии под Android и под iOS выходят практически одновременно. В большинстве случаев всё работает одинаково на обеих платформах. Проблемы, когда баг воспроизводится на какой-то одной платформе, бывают, но очень редко.
Нативных разработчиков довольно легко пересадить на Flutter, при этом не надо держать две полноценные команды. Из сложностей: в основном пока что с автоматизацией UI-тестирования беда, встроенных инструментов далеко не всегда хватает, не все CI/CD-платформы получается бесшовно интегрировать.
Flutter позволяет создавать мощные приложения с высокой производительностью и сложной графикой. В основе Flutter лежит язык программирования DART, который базируется на Java. Flutter позволяет разрабатывать приложения под все платформы и использовать общую кодовую базу. Что важно — отклик приложений, написанных на Flutter, такой же, как у нативного приложения, написанного специально для iOS или Android.
Кроме того, если компания собирается улучшить нативное приложение, написанное для Android или iOS, то это можно сделать помощью Flutter. Например, Groupon с успехом использовал Flutter для разработки модулей поверх существующего приложения.
Сложно однозначно определить, что является плюсом, а что минусом Flutter, для каждого случая они по большей части будут своими. Нам нравится скорость разработки, не очень высокий порог входа, общий UI для всех платформ.
Минусом, наверное, можно назвать относительную молодость технологии, для каких-то задач пока нет готовых или простых решений, приходится изобретать «костыли». Возникали трудности на границе интеграции Flutter с нативным кодом, интеграцией нескольких Flutter-модулей в одно нативное приложение и подобными задачами.
На Flutter мы разрабатывали «Яндекс.Про» (бывший таксометр), «Яндекс.Драйв». Сейчас экспериментирует «Яндекс.Лавка».
С помощью Flutter удалось оптимизировать скорость разработки, количество разработчиков, необходимых для того, чтобы делать продуктовые задачи на всех платформах, общий вид приложений.
Flutter используется разработчиками по всему миру. Приложения на Flutter запустили Alibaba Group, Tencent, Ebay, Groupon, The New York Times, «Яндекс.Такси». А благодаря сокращению времени разработки кода, увеличению скорости вывода продукта на рынок, производительности, близкой к нативной, и другим преимуществам, Flutter будет развиваться и доминировать на рынке в ближайшем десятилетии.
Пользуюсь Дикси на iOS с первой версии и наблюдаю за прогрессом. За такой короткий срок сделать полнофункциональное приложение с доставкой не всегда под силу даже крупным фудтех компаниям, у которых на это выделены целые этажи разработки, а тут всего 10 человек. Ребята большие молодцы! Особенно круто, что получилось пройти через весь процесс согласования и правок от разных департаментов и сделать действительно удобное приложение)
всего 10 человек
Какого же тогда мнения о себе люди, которые в одиночку тащат кроссплатформы на каком-нибудь флаттере, да ещё и full-stack? 🤔
Вы очень большие молодцы :)
Екатерина, мы все молодцы! Спасибо тебе за огромный вклад в проект 🚀
Отличная работа! 😉
Ребята, спасибо! И спасибо за помощь в проработке продуктовых кейсов! 🚀
Хэхэй, у нас был отличный старт, ребята)