В рекордные сроки разработали мобильное приложение для «ИЛЬ ДЕ БОТЭ»

1. Вводная задача от заказчика, проблематика, цели

«ИЛЬ ДЕ БОТЭ» — одна из крупнейших парфюмерно-косметических сетей России. У заказчика было мобильное приложение, но в связи с ребрендингом и изменением позиционирования оно перестало отражать ценности бренда. Требовалось создать новый продукт, который бы отвечал текущей стратегии и был более привлекателен для клиентов.

Команда «ИЛЬ ДЕ БОТЭ» обратилась к нам в декабре 2023 года. Требовалось оперативно подхватить проект и зарелизить его до «высокого сезона» — периода, когда люди покупают подарки близким к 14 и 23 февраля, 8 марта.

Разработка в столь сжатые сроки была огромным вызовом, который требовал молниеносной реакции и больших ресурсов. А ещё не давал права на ошибку. Но мы были абсолютно уверены, что справимся. И спойлер: справились.

Денис Сушков

iOS TeamLead, MobileUp

В периоды пиковой активности iOS-команда достигала 14 человек. Из них мы выделили четырёх разработчиков, которые отвечали за отдельные разделы приложения. Каждый из них формировал свою подкоманду, внутри которой более углублённо распределял задачи.

В работе мы отталкивались от готовности дизайна и бэкенда. Как только появлялся пакет требований для раздела ответственная за него подкоманда тут же приступала к реализации.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Подготовительные работы

Над проектом мы работали в тесном партнёрстве с командами «ИЛЬ ДЕ БОТЭ» и «Гринсайт». В условиях сжатых сроков времени готовить полноценное техническое задание не было, возможности последовательно переходить от одного этапа создания продукта к другому тоже. Мы приняли стратегическое верное решение — стартовать работу без ТЗ. А чтобы избежать путаницы и наладить взаимодействие, внедрили подход Contract First.

Contract First позволил запустить все этапы разработки в рамках одной недели, обеспечил разработчиков и тестировщиков документацией, на которую они могли опираться при выполнении задач. А ещё зафиксировал договорённости между нами, командой «ИЛЬ ДЕ БОТЭ» и командой «Гринсайт».

Дизайн

Для «ИЛЬ ДЕ БОТЭ» мы не делали проектирование с нуля, а переняли существующую логику веб-версии интернет-магазина. В концепции тоже не было необходимости — дизайн в вебе уже был. Мы сразу приступили к подготовке компонентов, на основе которых затем создавали макеты.

Это первый проект, на котором в определённый момент были задействованы все дизайнеры MobileUp. У каждого был отдельный блок, например, главная страница или каталог, и он фокусно готовил макеты для него.

Избежать путаницы при таком количестве человек, одновременно работающих в одном файле, помогала библиотека компонентов. Она делала процесс подготовки макетов более управляемым. Конечно, в процессе появлялась потребность в новых компонентах. В этом случае пополнение библиотеки происходило путём согласования внутри команды, чтобы избежать дублей.

Готовые макеты мы ежедневно отгружали заказчику. Он оперативно отсматривал их и давал обратную связь. При подготовке дизайна мы осознанно отказались от созвонов, потому что они только отнимали время. Все вопросы решали прямо в Figma. Если нужно было что-то поправить, заказчик оставлял комментарий, и мы тут же брали его в работу. Затем показывали результат и ждали обратную связь. Таким импровизированным «пинг-понгом» за две недели полностью согласовали дизайн мобильного приложения и передали его в разработку.

Разработка

Продумали архитектурное устройство

На проекте реализовали многомодульную структуру, позволяющую делить код на отдельные смысловые зоны. Это помогло чётко определить границы ответственности. А ещё ускорило процесс — разработчики параллельно работали над разделами и компонентами приложения, не мешая друг другу.

Главный экран превратили в настоящую витрину магазина

Чтобы главный экран привлекал внимание пользователей и вызывал желание купить, сделали его похожим на настоящую витрину магазина. Добавили яркие баннеры с акциями и анимировали их. Реализовали всё, что нужно для удобной навигации — подборки по брендам, раздел с выгодными предложениями и возможность поиска товаров. Добились того, чтобы элементы не конфликтовали между собой, быстро загружались и корректно отображались.

Реализовали каталог с фильтрами и «умным» поиском

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

В какой-то момент над каталогом трудилась почти вся команда iOS-разработчиков. Объём был настолько велик, что для каждого находился компонент, который он мог реализовать, не блокируя работу коллег. Итогом совместных усилий стал каталог с возможностью просматривать товары, сортировать их по цене, бренду и категории, а также находить нужное с помощью умного поиска.

Подготовили индивидуальное оформление для брендов-партнёров

У «ИЛЬ ДЕ БОТЭ» есть бренды-партнёры, с которыми он работает на особых условиях. Для них предусмотрены специальные требования к визуалу и функциональности. Это помогает создать ощущение премиального корнера как в настоящем магазине и работает на привлечение внимания пользователей.

Вместе с командой бэкенда научились отличать бренды-партнёры от обычных, бесшовно менять визуальный стиль экранов и контент.

Упростили сценарий оформления заказа

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

Прежде чем реализовывать пользовательский путь в коде, мы визуализировали его «на бумаге». Описали все возможные сценарии и то, как они меняются в зависимости от выбора юзера. На каждом этапе учитывали взаимодействие с бэкендом для корректного отображения данных. Это позволило сделать процесс оформления заказа прозрачным и предусмотреть детали. Например, подарки, которые добавляются или не добавляются к заказу в зависимости от способа доставки.

Проработали механизм применения скидок и промокодов

Размер скидки зависит от количества товаров, добавленных в корзину. При этом расчёты производятся на стороне бэкенда. Нужно было сделать так, чтобы пользователь не видел дозагрузок при вводе промокода или добавлении новых товаров в корзину. Для этого мы внедрили кастомное кэширование данных. Оно позволило предугадывать ответы от бэкенда и обеспечило плавную работу приложения без торможений.

Предусмотрели возможность работы в условиях плохого интернета

Архитектурное новшество проекта — система кэширования. Она позволила использовать приложение в условиях замедленного интернета или его отсутствия. Конечно, для добавления товара в корзину или оформления заказа без соединения всё ещё не обойтись. Но полистать каталог или посмотреть «Избранное» пользователь сможет даже без сети.

Сократили количество запросов к бэкенду

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

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

Тестирование

«ИЛЬ ДЕ БОТЭ» — проект с высокой скоростью разработки. Многие требования менялись на ходу, поэтому мы не могли следовать стандартному алгоритму тестирования. Чтобы оперативно отлавливать потенциальные проблемы, внедряли гибкие методологии. Например, применяли исследовательское тестирование, которое позволяло проверять блоки на основе экспертизы команды.

Помимо этого использовали:

• функциональное тестирование, чтобы проверить взаимодействие бэкенда и фронтенда.
• нагрузочное, чтобы убедиться, что приложение не выйдет из строя, когда количество пользователей увеличится. Например, в период праздников или распродаж;
• юзабилити-тестирование, чтобы понять, насколько продукт понятен и удобен в использовании.

Исследование

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

Параллельно мы захотели посмотреть на рынок beauty-приложений в целом. Проанализировали популярные продукты для заказа косметики и парфюмерии с рейтингом в сторах 4-5 звёзд и провели исследование. Цель — узнать, что мешает пользователям на пути к оформлению заказа, и найти точки роста. Результаты нашей аналитической работы опубликованы на rb.ru.

Что мешает пользователям покупать: исследование приложений для заказа косметики и парфюмерии

3. Результаты сотрудничества

В рекордные сроки разработали приложение — за две недели подготовили дизайн, а на четвертый месяц зарелизили продукт в App Store и Google Play

У «ИЛЬ ДЕ БОТЭ» появилось новое мобильное приложение, соответствующее текущей стратегии компании и актуальным трендам рынка. В нём реализован удобный каталог, товары разделены по основным категориям и брендам. А на главном экране пользователь сразу видит новинки, специальные предложения и акции. При оформлении заказа ему доступно несколько вариантов доставки — самовывоз из магазина, доставка курьером или в постамат. А также несколько способов оплаты, в том числе через СБП.

Глеб Гусько

Аналитик, MobileUp

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

4. Заключение

Сейчас мы продолжаем работу над приложением по двум направлениям — стабилизация и развитие.

Стабилизируем

За относительно небольшой промежуток времени у «ИЛЬ ДЕ БОТЭ» полностью обновилось мобильное приложение интернет-магазина. Важно обкатать его на большом объёме пользователей и оперативно устранить узкие места. Мы активно занимаемся оптимизацией и улучшением сценариев. Опираемся на фидбэк пользователей и решения, которые наши аналитики прорабатывают совместно с командой «ИЛЬ ДЕ БОТЭ».

Развиваем

Постепенно расширяем функциональные возможности — внедряем дополнительные способы оплаты и новые фичи. В приложении появилась оплата через СБП и сервис «Долями». Если в первой версии собственный корнер был только у одного бренда-партнёра, то в ближайшее время такими же обзаведутся остальные. Конечно, не забываем про работу с вовлечённостью — для пользователей готовим персонализированные рекомендации товаров на основе их интересов.