Как сделать мобильное приложение для интернет-магазина за три месяца: кейс Brav-o

Hola, Amigos! Мы компания Amiga, занимаемся заказной разработкой и особенно любим Flutter.

Недавно мы разработали мобильное приложение для одной из крупнейших в России и в мире компаний карнавальной продукции, воздушных шаров и товаров для праздника Brav-o.

У нас было всего 3 месяца на разработку. Срок был связан с тем, что в этом сегменте рынка очень важный сезон – новогодние праздники, и надо было успеть к ним. Основная задача нового приложения – расширение каналов продаж. В этой статье мы хотим рассказать, как мы это сделали, и почему в e-com лучше иметь мобильное приложение, чем не иметь.

Почему в e-com нельзя обойтись без мобильного приложения

Как показали результаты опроса «РБК Исследования рынков», 74% людей совершают онлайн-покупки с помощью смартфона. К тому же, мобильное приложение может помочь оставаться конкурентоспособными на современном рынке.

Какому e-com бизнесу точно нужно мобильное приложение?

FMCJ. Приложение упростит и ускорит для пользователей покупку товаров регулярного спроса.

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

Мобильное приложение может помочь вам сделать покупки более удобными и персонализированными для ваших клиентов. Внедряя такие функции, как мобильные платежи, сканирование штрих-кодов, push-уведомления и виртуальные примерки, вы можете повысить вовлеченность клиентов, увеличить продажи и укрепить лояльность к бренду.

Как мы разрабатывали приложение Brav-o?

Brav-o — одна из крупнейших в России и в мире компаний по продаже воздушных шаров, карнавальной продукции, товаров для праздника, подарочной и цветочной упаковки. На рынке представлены более 15 лет. Поставки производятся в Россию, Казахстан, Беларусь, Армения и Киргизию. У заказчика уже был готовый сайт на Bitrix и дизайн приложения, который нужно было провалидировать и взять в работу.

Мы выбрали фреймворк Flutter из-за его способности создавать высокопроизводительные приложения с выразительным и гибким пользовательским интерфейсом. Это обеспечивает быстрый цикл разработки, который был нужен для соблюдения сжатых сроков. Функция горячей перезагрузки Flutter позволяет разработчикам быстро повторять и тестировать изменения в приложении. Кроме того, единая кодовая база Flutter для Android и iOS означает, что приложение можно разрабатывать и тестировать одновременно на обеих платформах.

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

Дизайн

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

Также у заказчиков не было макетов для некоторых функций, например, удаление профиля, мы отрисовывали их с нуля.

Разработка

С помощью Flutter получилось разработать и развернуть приложение в короткие сроки — 3 месяца. Мы активно взаимодействовали с разработчиками на стороне заказчика, чтобы подключить API сайта к приложению. Раз в неделю мы показывали сборки. Всего было 5 этапов разработки.

Этап 1: Начало разработки, регистрация/авторизация, сквозные элементы.

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

Этап 2: Каталог.

Каталог – сердце приложения Brav-o, в нем пользователи могут просматривать широкий ассортимент декоративной продукции. Этот этап разработки включал создание надежной системы каталога, который включает в себя большое количество продуктов и категорий. Каталог разработан таким образом, чтобы в нем было легко ориентироваться, а интуитивно понятный поиск и фильтры помогали покупателям быстро находить нужные товары.

Этап 3: Карточка товара, корзина.

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

Этап 4: Личный кабинет физических лиц.

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

Этап 5: Личный кабинет лица юридического лица, неавторизованный пользователь, запуск приложения, новости, тематические подборки, удаление аккаунта.

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

Перед релизом мы добавили функционал, позволяющий пользователям удалять свои учетные записи – ни один e-com не хочет, чтобы пользователи удаляли учетки, но такое требование есть со стороны App Store. Без этого функционала приложение не могло бы пройти модерацию.

Для ecom-проектов, которые хотят мобильное приложение, мы рекомендуем выбрать Flutter. Как в нашем примере: за 3 месяца выпустить приложение в релиз и начать получать прибыль. Почему так быстро? В этом особенность Flutter — быстрая скорость разработки, безопасность и гибкость. И силу структуры Flutter очень трудно сломать. Даже если не разрабатывать приложение на Flutter с нуля, а начать работать с уже существующей Android-версией, все равно можно сэкономить время и ресурсы. Интегрируя Flutter в Android, со временем вы получите приложение, которое полностью заменит iOS-версию.

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

Процесс тестирования мобильного приложения Brav-o проводился с использованием ручного функционального метода черного ящика. Этот метод представляет собой тестирование функциональности приложения без какого-либо знания его внутренней структуры с использованием тестовых примеров, разработанных для охвата всех возможных сценариев и пограничных случаев.

На каждом этапе проводилось также бизнес-тестирование: заказчик смотрел приложение и давал комментарии со своей стороны. Это важно для процесса разработки, потому что только заказчик полноценно знаком с реальными данными: ценами, карточками товаров, особенностями категорий товаров. В основном эти данные передавались с бэка, а на стороне приложения только отображались, и именно в процессе бизнес-тестирования иногда мы выявляли мелочи, которые были не очевидны на старте, и дорабатывали их на стороне приложения или обращались к команде back-end.

Результаты

За 3 месяца мы разработали мобильное приложение Brav-o на Flutter. Его можно скачать в App Store и в Google Play. На 2 месяце после запуска приложения доля заказов с приложения составила более 5% от общего количества интернет-заказов.