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

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

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

Готовые макеты ежедневно отгружали заказчику. Он оперативно отсматривал их и давал обратную связь.

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

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

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

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

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

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

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

В карточке пользователь может получить подробную информацию о товаре. Для его удобства помимо просмотра основного контента мы реализовали ещё три состояния экрана:

Такое разделение могло нагружать экран. Чтобы обеспечить плавную работу приложения, внедрили StateFlow. С его помощью мы явно контролируем текущее состояние экрана, предотвращая несколько состояний одновременно.

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

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

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

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

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

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

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

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