Мобильное приложение с программой лояльности, сканером продуктов, доставкой. Кейс продуктового ритейлера «Дикси»
Перед командой FriFlex поставили задачу: за три месяца обновить приложение и добавить в него новые функции. Рассказываем, как решали её и почему лучшим инструментом для этого считаем кроссплатформенную разработку
2020 год изменил ситуацию в онлайн-торговле: во время самоизоляции 67% российских интернет-пользователей совершали покупки онлайн, а каждый четвёртый (26%) заказывал доставку продуктов на дом. 13% россиян начали пользоваться услугами доставки продуктов питания.
Чаще покупатели делали заказ прямо с телефона. Рост спроса на покупки через интернет повлёк повышение активности ритейлеров в развитии своих цифровых продуктов.
В период изоляции сеть «Дикси» запустила масштабное обновление мобильного приложения. В сжатые сроки было необходимо разработать и запустить программу лояльности, онлайн-доставку продуктов и другие функции.
«Магазин в кармане»: задачи и сроки
Для решения этой задачи было необходимо реализовать в мобильном приложении целый ряд функций:
Возможность поиска ближайших магазинов, чтобы покупатель мог не только пользоваться ближайшим «Дикси» возле дома, но и найти магазин любимой сети, находясь в любом районе города.
- Наличие и стоимость товаров — открыв приложение, покупатель может быстро найти нужный продукт и узнать его цену в конкретном магазине.
- Сканер штрихкодов на товарах — значительно развить фичу, чтобы ни один штрихкод не прошёл мимо камеры смартфона покупателя.
Дополнительные привилегии и скидки, которые покупатели могут самостоятельно выбирать и использовать.
В регионах Приволжья планировался запуск программы лояльности, которая включает в себя скидки по карте, возможность выбора любимых товаров, проведение закрытых распродаж, персонализированные купоны и рекомендации товаров.
Также нужно было наладить коммуникацию с покупателями и интегрировать в приложение инструменты контакт-центра, чтобы пользователь мог обратиться по любой проблеме и быстро получить ответ.
- В условиях пандемии особенно остро встала задача создать сервис, позволяющий в любой момент заказать продукты, не выходя из дома. Поэтому было важно реализовать в приложении функцию онлайн-доставки.
Разработать и запустить первую версию нужно было в сжатые сроки — за 3 месяца. Эту задачу решила команда FriFlex, у которой уже был опыт во взаимодействии с компанией и разработке высоконагруженных проектов.
Предложение FriFlex: кроссплатформенная разработка на Flutter
Задача «Дикси» требовала большого комплексного решения, включающего в себя дизайн, проектирование, бэкенд-разработку, разработку собственной дизайн-системы и проработку коммуникации с пользователями.
FriFlex предложил использовать кроссплатформенную разработку и технологию Flutter. Преимущество кроссплатформенности в том, что она позволяет создавать одновременно приложение на двух платформах — Android и iOS, тем самым ускорять релизный цикл и оптимизировать бюджет.
Из очевидных плюсов 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 (прибыль, которую приносит клиент за всё время работы).
Ранее онлайн-доставка продуктов была доступна только на сайте «Дикси». После появления доставки в мобильном приложении, спрос на онлайн-заказ продуктов увеличился в два раза. Объём онлайн-продаж продолжает расти каждую неделю.
После запуска обновлённого приложения количество пользователей выросло в два раза. Люди стали в три раза чаще возвращаться в приложение.
Результаты для конечных потребителей
После запуска приложения «Дикси» получает обратную связь от покупателей через аналитику и механизмы обратной связи в приложении. Судя по отзывам, клиенты больше всего оценили появление в приложении:
- актуальной информации о наличии товаров и ценах в конкретном магазине;
- возможности поиска ближайшего магазина «Дикси» и информации о графике работы;
- возможности получать дополнительные скидки и привилегии;
- онлайн-доставки.
Через форму обратной связи в приложении пользователи оставляют свои пожелания по добавлению новых фич. Например, предложили добавить фильтр по скидкам в каталоге, возможности ввести штрихкод вручную (для случаев, когда он по каким-то причинам не считывается сканером) и составить список офлайн-покупок перед походом в магазин. Часть из этих предложений разработчики уже реализовали, часть взяли в работу — обновления появятся в ближайших релизах.
Нативная или кроссплатформенная разработка: что говорят исследования и мнения экспертов
Компаниям, которые хотят разработать или улучшить своё мобильное приложение, чаще всего приходится задумываться сразу о двух платформах. Android и iOS — две основные платформы, которым отдают предпочтение пользователи по всему миру, Россия не исключение. 71% российских пользователей выбирает Android, iOS — почти 28%. Это значит, что если разработать приложение только для одной системы, то потеряется значительная часть аудитории.
Вариантов два: использовать нативную разработку, которая учитывает особенности конкретной операционной системы, её набор инструментов и возможностей, или выбрать кроссплатформенную разработку, которая подойдёт для обеих платформ. Оба варианта имеют и плюсы, и минусы, выбор нужно делать исходя из целей и ресурсов компании.
Разрабатывать нативные приложения зачастую проще, потому что есть нативный язык со своим набором технологий и фреймворков. Но если компания хочет, чтобы приложение было доступно и на iOS, и на Android, то потребуется в два раза больше ресурсов, финансовых и кадровых.
Кроссплатформенная разработка помогает ускорить цикл выпуска приложения без потери функций. Flutter — один из фреймворков кроссплатформенной разработки от компании Google, он появился на рынке не так давно, но уже завоевал хорошую репутацию.
Flutter позволяет создавать мощные приложения с высокой производительностью и сложной графикой. В основе Flutter лежит язык программирования DART, который базируется на Java. Flutter позволяет разрабатывать приложения под все платформы и использовать общую кодовую базу. Что важно — отклик приложений, написанных на Flutter, такой же, как у нативного приложения, написанного специально для iOS или Android.
Кроме того, если компания собирается улучшить нативное приложение, написанное для Android или iOS, то это можно сделать помощью Flutter. Например, Groupon с успехом использовал Flutter для разработки модулей поверх существующего приложения.
Flutter используется разработчиками по всему миру. Приложения на Flutter запустили Alibaba Group, Tencent, Ebay, Groupon, The New York Times, «Яндекс.Такси». А благодаря сокращению времени разработки кода, увеличению скорости вывода продукта на рынок, производительности, близкой к нативной, и другим преимуществам, Flutter будет развиваться и доминировать на рынке в ближайшем десятилетии.
Пользуюсь Дикси на iOS с первой версии и наблюдаю за прогрессом. За такой короткий срок сделать полнофункциональное приложение с доставкой не всегда под силу даже крупным фудтех компаниям, у которых на это выделены целые этажи разработки, а тут всего 10 человек. Ребята большие молодцы! Особенно круто, что получилось пройти через весь процесс согласования и правок от разных департаментов и сделать действительно удобное приложение)
Какого же тогда мнения о себе люди, которые в одиночку тащат кроссплатформы на каком-нибудь флаттере, да ещё и full-stack? 🤔
Imposter Syndrome развивается от такого.
Вы очень большие молодцы :)
Екатерина, мы все молодцы! Спасибо тебе за огромный вклад в проект 🚀
Отличная работа! 😉
Ребята, спасибо! И спасибо за помощь в проработке продуктовых кейсов! 🚀
Хэхэй, у нас был отличный старт, ребята)
Отличная работа и отличная статья! Вы крутые!
Айтишники молодцы. Дикси - помойка с антисанитарией в магазинах и быдловатым персоналом.
Специально скачал посмотреть на приложение.
Каким образом найти кетчуп хайнз если не знаешь, как он в точности пишется по английский?
Нажимаю на рекламу доставки в приложении, ожидаю попасть на условия, а меня перекидывает на интернет магазин в браузере.
Дмитрий, спасибо! По делу, согласны 🐼
Сейчас полнотекстовый поиск (elastic), стоит развить его, сделать с поддержкой транслита и синонимов👍
Классно! Отличная работа!
От души поздравляю Петра и команду. Знаю что проект был не самым сложным в практике ребят, но оборотная сторона этой простоты, конечно же, - огромный опыт и профессионализм!
До юзер-френдли приложению еще далеко.
Знаете,что самое возмутительное? Что когда заходишь во вкладку Цены в магазинах и попадаешь в каталог с категориями товаров,то там даже нет строки поиска. Надо обязательно самому заходить в подкатегорию. Это жесть,конечно.
А как же фирменный аромат тухлятины при доставке?
Как я понял Яндекс.Такси написано на Flutter. У моего знакомого есть смартфон из низкого ценового диапазона < 15к рублей. Так вот, там можно увидеть как рисуется интерфейс приложения Яндекс такси. По сути то что должно происходить моментально, там происходит с очень медленной скоростью отрисовки.
Можно конечно сказать, типа вот, у него бомже-телефон и чего еще ожидать.
Но мне кажется надо не забывать в какой стране мы живем и какие телефоны бывают у рядовых пользователей.
Все это я к тому, что на мой взгляд, Flutter не такой быстрый каким его считают. Либо у программистов Яндекс.Такси руки не от туда растут :)
Судя по выступлению Геннадия Евстратова,
https://www.youtube.com/watch?v=PD6OwajKc8c&t=2435s
Яндекс Такси написан на нативе, и лишь малая экспериментальная часть на Flutter
На Flutter, как я понял, написано приложение для таксистов, и то не полностью. Для клиентов они пока не экспериментируют, технология сыровата. Но видимо скоро разовьётся
На флаттере приложение Yandex PRO:)
Тогда ситуация c отрисовкой выглядит немного странной.
Молодцы, хорошие сроки для реализации с такой большой компанией. Однако, справедливости ради нужно сказать, что есть и другие технологии быстрой разработки - например, веб приложение - одинаково будет работать и на десктопе и на всех смартфонах или планшетах. Кстати, фирма 1с тут тоже недавно сделала возможность делать мобильные приложения и для iOS и для Android, российский аналог flutter )
Интересно, какой бюджет был Вашего проекта, лимонов 15?
Да, это возможное решение, но применительно к данному кейсу имеет ряд недостатков:
- не все устройства и не все операционные системы поддерживают полный функционал PWA;
- невозможно наладить активное участие пользователей iOS (например приложение может хранить локальные данные и файлы размером только до 50 Мбайт, нет доступа к In-App Payments (встроенные платежи) и многим другим сервисам Apple, нет интеграции с Siri), поддержка iOS начинается с версии 11.3;
- работа офлайн ограничена;
нет достаточной гибкости в отношении «специального» контента для пользователей (например программы лояльности);
- при использовании PWA увеличивается расход заряда батареи мобильного устройства.
По бюджету – меньше 😉
Подскажите, какие операционные системы PWA не поддерживают? Это же браузер поддерживает и вроде пока проблем не встречал.
IndexedDB - не сильно же ограничивается размером или я не прав?
Я согласен с тем, что есть в этом что-то "неполноценное" ) однако, в Вашем кейсе, что было такого, что требовало именно мобильного приложения, а не PWA?
Каталог товаров, цены и т.п ведь наверное у Вас все тянется в онлайне с некой БД на сервере. Что-же такого Вам важно хранить именно локально у юзера?
Абсолютно нет. Конечно, некоторые задачи закрывает, но пользоваться этим нереально, если что-то чуть нестандартное. Для заполнения всяких документов подойдёт, но скорость и стабильность решения так себе.
Что не получилось реализовать? Интересно для понимания, где ее границы.
Нормальную валидацию форм, удобный интерфейс, ещё были проблемы с синхронизацией. Плюс стандартно нет нормальной механики проверки версии, полностью стягивается весь конфиг, а это 30+ МБ xml
Возможно, как-то можно местами лучше сделать, но в основном это страдания
Даааа, приложуха у них по размерам большая, и качается все всегда )
Про валидацию форм - странно, вроде как там стандарты должны все обеспечивать, что-то у Вас особенное было?
Ну можно отключить автоматическое скачивание, но тогда нужно руками обновлять, либо реально билдить APK и публиковать в стор, но всё равно много неудобств.
Динамическую валидацию формы в зависимости от разных условий(а не нескольких полей), насколько я понял, реализовать не получится.
На коде 1С думаю можно написать любую проверку формы на корректность заполнения перед отправкой.
Именно перед отправкой., А нужно различные события отлавливать, чтоб удобно было
Комментарий удален модератором
Спасибо. "Дикси" — огромная сеть, комментарии разные. Действительно, есть, что развивать и улучшать на уровне разных процессов, как и в любой сети. Напишите, пожалуйста, в директ, что за ошибка, будем признательны. Т.к. креши отслеживаем онлайн и не приходило ничего подобного, хотим разобраться в причинах
А чем вы монитрите ошибки кст?
Sentry, ELK, Prometheus, Zabbix, FireBase
Комментарий удален модератором
А есть ссылки на AppSore и GooglePlay, чтобы вживую посмотреть и почитать отзывы клиентов?
Предполагаю, что по слову "Дикси" в магазинах приложений можно найти)
А вот с отзывами пользователей на Play Маркет действительно все не так радужно, как в первых комментариях на vc.
Там вообще мрак, никто даже не отвечает на них. Будто всем класть))
Ситуация меняется)
Негативных отзывов просто куча. На добрую половину из них вообще не отвечают...
Жаль руководство Дикси живёт в вымышленном мире и видимо не бывало в своих же магазинах. Чем дальше тем они больше походят на лавки из 90-х. Регулярная ругань, грязная униформа у продавцов. 1 касса и большая очередь...
Зато теперь есть крутое приложение для Айоэс.
p. s: это не отменяет достижений авторов
Покажите, пожалуйста, как выглядит бэклог.