- Заказчик
- «ИЛЬ ДЕ БОТЭ» — одна из крупнейших парфюмерно-косметических сетей России
- Задача
- Требовалось создать новый мобильный продукт, который бы отвечал текущей стратегии бренда и был более привлекателен для клиентов.
В рекордно короткие сроки было разработано мобильное приложение для крупной парфюмерно-косметической сети. За две недели готовили дизайн, а на четвертый месяц зарелизили продукт в App Store и Google Play.
«ИЛЬ ДЕ БОТЭ» — одна из крупнейших парфюмерно-косметических сетей России. У заказчика было мобильное приложение, но в связи с ребрендингом и изменениями календаря оно перестало отражать ценности бренда. Требовалось создать новый продукт, который бы составлял текущую стратегию и был бы более привлекателен для клиентов.
Задача — создать нативное приложение для iOS и Android к «высокому сезону»
Команда «ИЛЬ ДЕ БОТЭ» обратилась к нам в декабре 2023 года. Предстояло оперативно подхватить проект и зарелизить его до «высокого сезона» — периода, когда люди покупают подарки ближе к 14 и 23 февраля, 8 марта.
Разработка в столь сжатые сроки была вызовом, который требовал молниеносной экономики и больших ресурсов. А ещё не предоставлено право на ошибку. Но мы были абсолютно уверены, что справимся. И спойлер: справились.
Решение
Адаптировали процессы под специфику проекта
Над проектом мы работали в тесном партнерстве с командами «ИЛЬ ДЕ БОТЭ» и «Гринсайт». Вместе принято рискованное, но стратегическое верное решение — начать работу без технического задания. Чтобы избежать путаницы и наладить взаимодействие, внедрили подход Contract First. С его стороны было подключено рекордное количество дизайнеров и разработчиков. И выстроили работу так, чтобы каждое из них было строго блокировано приложением.
Итог — уложились в срок и опубликовали приложение в App Store и Google Play. Всё получилось благодаря высокой вовлечённости и экспертизе MobileUp и «Гринсайт», а также чёткому системному подходу «ИЛЬ ДЕ БОТЭ».
Продумали план реализации проекта
На старте изучили материалы и провели большой брифинг с командой «ИЛЬ ДЕ БОТЭ». В условиях сжатых сроков времени для подготовки качественного технического задания не было возможности последовательно переходить от одного этапа создания продукта к опыту — тоже, поэтому мы внедрили «Контракт первым».
Contract First — подход, при котором заключается контракт между различными компонентами системы до начала их реализации. Контракт определяет, как компоненты взаимодействуют друг с другом и какие данные передаются. Поскольку составление кода происходит на основе контракта, бэкенд- и фронтенд-разработчики могут работать параллельно.
Последний пункт был особенно важен, так как над проектом работала не только наша команда. Пока мы реализовывали функциональность и создавали пользовательский интерфейс, команда «Гринсайт» занималась серверной инфраструктурой. Мы заранее обсудили, как именно мы будем разрабатывать приложение. Работали в параллели, придерживаясь первоначальных договоренностей. А затем встретились в одном помещении, когда продукт был почти готов.
Contract First позволяет запустить все этапы разработки в течение одной недели, разработанные разработчиками и тестировщиками документации, на что они могли опираться при выполнении задач. А ещё зафиксировал договорённость между нами, командой «ИЛЬ ДЕ БОТЭ» и командой «Гринсайт».
За две недели разработали и согласовали дизайн приложения.
Стандартный дизайн-процесс выглядит так: мы проектируем приложение, создаём дизайн-концепцию и только после этого собираем функциональные компоненты. В случае с «ИЛЬ ДЕ БОТЭ» мы не занимались проектированием с нуля, а переняли уже существующую логику веб-версии интернет-магазина. В концепции тоже не было необходимости — дизайн в вебе уже был. Поэтому мы сразу приступили к созданию компонентов, на основе которых дизайнеры создавали макеты.
«ИЛЬ ДЕ БОТЭ» — первый проект, в котором в определённый момент были задействованы все дизайнеры MobileUp. У каждого был отдельный блок, например, главная страница или каталог, и он фокусно подготовил для него макеты.
Избегайте путаницы при таком количестве людей, одновременно работающих в одном файле, как это делается для создания компонентов библиотеки. Она делала процесс подготовки макетов более управляемым. Конечно, при этом появилась потребность в новых компонентах. В этом случае пополнение библиотеки происходит путем внутреннего соглашения, чтобы избежать дублирования. Готовые макеты ежедневно отгружали заказчику. Он оперативно отсмотрел их и дал обратную связь.
При подготовке дизайна мы осознанно отказались от созвонов, потому что они только отнимали время. Все вопросы решались прямо в Figma. Если нужно было что-то поправить, заказчик оставлял комментарий, и мы тут же брали его на работу. Затем показывали результат и ждали обратной связи. Таким импровизированным «пинг-понгом» за две недели полностью согласовали дизайн местного приложения и передали его в разработку.
Разработка
Продумали внешнее устройство
В ходе реализации проекта была разработана многомодульная структура, позволяющая разработать код для смысловых зон. Это помогло чётко определить границы ответственности. А ещё ускорило процесс — разработчики параллельно работали над разделами и компонентами приложения, не мешая другу.
В периоды пиковой активности iOS-команда достигла 14 человек. Из них мы выделили четырех разработчиков, которые тестируют разработки разделов приложений. Каждый из них формировал свою подкоманду, внутри которой более глубоко поставлена ??задача.
В работе мы отталкивались от возможностей дизайна и бэкенда. Как только появился пакет требований для ответственного за него отдела, подкоманда тут же приступила к реализации.
Главный экран превратился в настоящую витрину магазина.
Чтобы главный экран привлек внимание пользователей и вызвал желание купить, сделал его похожим на настоящую витрину магазина. Добавили яркие баннеры с акциями и анимировали их. Реализовали все, что нужно для удобной навигации — подборки по брендам, разделы с выгодными предложениями и возможность поиска товаров. Добились того, чтобы элементы не пересекались между собой, быстро загружались и корректно отображались.
Реализовать каталог с фильтрами и «умным» поиском
Одной из самых сложных технических задач была реализация каталога. Над ее проектированием и разработками работали в рамках тесного партнерства. Дизайнерам предстояло прописать сценарий, чтобы пользователь не заблудился в бесконечном количестве страниц. А разработчикам — сделать так, чтобы он мог быстро находить нужное.
В какой-то момент над каталогом трудилась почти вся команда iOS-разработчиков. Объём был настолько велик, что для каждого компонента, который он мог реализовать, не блокируя работу коллег. Итогом шага игрока стал каталог с оставшимися товарами, отсортировать их по цене, бренду и категории, а также найти необходимое с помощью умного поиска.
Подготовили индивидуальное оформление для брендов-партнёров
У «ИЛЬ ДЕ БОТЭ» есть бренды-партнеры, с которыми он работает на особых условиях. Для них предусмотрены соответствующие требования к визуальному зрению и функциональности. Это помогает создать ощущение премиального корнера, как в данном магазине, и работает на привлечение внимания пользователей.
Вместе с одним бэкендом удалось отличить бренды-партнеры от обычных, полностью изменить визуальный стиль экранов и контента.
Позаботились о том, чтобы ничего не помешало добавить товар в корзину
Карточка цвета — один из самых важных разделов, который содержит огромное количество данных и запросов. Предстояло добиться баланса между информативностью и структурированностью, а также обеспечить метод загрузки контента.
В целях оптимизации работы приложения разделили данные на основные и второстепенные. Основные касаются непосредственно товара — после их загрузки пользователь уже может получить основную информацию на странице. Второстепенные важны для оформления заказа, но не имеют прямого отношения к товару, например, условиям доставки. Такие данные запрашиваем параллельно. Каждый блок имеет небольшой скелет и выглядит по факту загрузки.
В карточке пользователь может получить подробную информацию о товаре. Для его удобства, помимо просмотра основного контента, мы реализовали еще три экрана состояния:
- просмотр изображений с хорошим увеличением;
- выбор цвета товара;
- выбор объема товара.
Такое устройство позволяет загрузить экран. Чтобы обеспечить плавную работу приложения, внедрили StateFlow. С его помощью мы контролируем текущее состояние экрана, предотвращая несколько процессов одновременно.
Упростили оформление заказа
Процесс оформления заказа включает в себя несколько этапов: от выбора пути доставки до указания условий оплаты. Решение пользователя на каждом этапе влияет на дальнейший сценарий. Например, если юзер выбрал самовывоз, нужно вывести на экран карту для отметки подходящего магазина. Если доставка — предлагаю временные слоты для встречи с курьером.
Прежде чем реализовывать пользовательский путь в коде, мы визуализировали его «на бумаге». Описал все возможные сценарии и то, как они меняются в зависимости от выбора юзера. На каждом этапе взаимодействия с бэкендом для корректного отображения данных. Это необходимо для оформления заказа на прозрачность и предусмотреть деталь. Например, подарки, которые включаются или не включаются в заказ в зависимости от способа доставки.
Проработан механизм применения скидок и промокодов
Размер скидки зависит от количества товаров, добавленных в корзину. При этом расчёты производятся на стороне бэкенда. Нужно было сделать так, чтобы пользователь не видел дозагрузок при вводе промокода или добавлении новых товаров в корзину. Для этого мы внедрили кастомное кэширование данных. Оно предугадывает ответы от бэкенда и получается плавная работа приложения без тормозов.
Предусмотрены возможности работы в условиях плохого интернета
Архитектурное новшество проекта — система кэширования. Она появилась чуть позже первого релиза и продолжает использовать приложение в условиях медленного интернета или его состояния. Конечно, добавление товара в корзину или оформление заказа без соединений всё ещё не является необходимостью. Но полистать каталог или «посмотретьИзбранное» пользователь сможет даже без сети.
Сократили количество запросов к бэкенду
Пока мы прорабатывали идею, как работать с приложениями в условиях гибкого соединения, от команды бэкенда возникла задача по уменьшению количества обращений к серверу. Мы спроектировали систему кэширования таким образом, чтобы для каждого запроса к бэкенду устанавливался свой способ кэширования — стандартный, секьюрный или улучшенный. Поделили обращение к серверу на три категории в зависимости от типа кэширования. И для каждого запроса установлены тайм-аут — время, по истечении которого данные необходимо поддерживать. Затем совместное использование с командой обкатали несколько событий и выбрали лучшее.
В результате удалось сократить количество запросов к бэкенду, снизить нагрузку на сервер и уменьшить количество трафика, который потребляет приложение со стороны пользователя.
Тестирование
Вы сохранили качество продукта даже без ТЗ
«ИЛЬ ДЕ БОТЭ» — проект с высокой скоростью разработки. Многие требования изменились прямо сейчас, поэтому мы не смогли достичь стандартного алгоритма тестирования. Чтобы оперативно отлавливать потенциальные проблемы, применяйте гибкие методологии. Еще на этапе изучения дизайн-макетов выявляли наиболее «остры» и детализацию логических элементов и уделяли им пристальное внимание.
В проекте практиковали разные виды тестирования. Функциональное — для проверки взаимодействия бэкенда и фронтенда. Нагрузочное — чтобы убедиться, что приложение не выйдет из строя, когда количество пользователей увеличится. Например, в период праздников или распродажи. Юзабилити-тестирование — чтобы понять, насколько продукт понятен и удобен в использовании. Если в процессе было понятно, что какой-то сценарий стоит доработать, передали предложения команде по дизайну и разработке.
Поскольку на подготовку полной документации не было времени, также было проведено исследовательское исследование. Оно оставило тестировать блоки на основе высоких экспертиз команды.
Результат
В рекордно короткие сроки разработано приложение для iOS и Android
У «ИЛЬ ДЕ БОТЭ» появилось новое мобильное приложение, содержащее текущие стратегии компании и актуальные тенденции рынка. В нем реализован удобный каталог, товары разделены по основным категориям и брендам. На главном экране пользователь сразу видит новости, специальные предложения и акции. При оформлении заказа ему доступно несколько вариантов доставки — самовывоз из магазина, доставка курьером или в постамат. А также несколько способов оплаты, в том числе через СБП.
Сейчас мы продолжаем работу над приложением по направлениям «стабилизация и развитие».
Стабилизируем
За небольшой промежуток времени в «ИЛЬ ДЕ БОТЭ» полностью обновилось мобильное приложение интернет-магазина. Важно обкатать его на большом объеме пользователей и оперативно регулировать узкие места. Мы активно занимаемся оптимизацией и улучшением явлений. Опираемся на фидбэк-приложения и решения, которые наши аналитики прорабатывают совместно с командой «ИЛЬ ДЕ БОТЭ».
Развивать
обеспечить расширение финансовых возможностей — внедрить дополнительные способы оплаты и новые фичи. В приложении появилась оплата через СБП и сервис «Доли». Если в первой версии «уголок» был только у одного бренда-партнёра, то в ближайшее время такое же обзаведётся остальным. Конечно, не забываем про работу с вовлечённостью — для пользователей готовим персонализированные рекомендации товаров на основе их интересов.
На старте у заказчика была важная и срочная задача — создать устойчивое мобильное приложение к высокому сезону бизнеса. Параллельно наша команда внесла предложения в поддержку, что показало не только заинтересованность в проекте, но и продуктовую экспертизу. Это ресурс, который нам нужен для создания процесса совместного развития продукта после выпуска. Когда темп разработки немного снизился, заказчик частично отдал нашу точку зрения аналитическую часть.