Мобильное приложение интернет-магазина товаров для дома

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

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

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

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

Ключевые требования:

приложения для iOS и Android;

каталог товаров;

категории и подкатегории;

поиск;

фильтрация и сортировка;

карточка товара;

фотографии и характеристики;

избранное;

корзина;

оформление заказа;

выбор способа доставки;

онлайн-оплата;

личный кабинет;

история заказов;

push-уведомления;

интеграция с backend интернет-магазина;

продуктовая аналитика.

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

Этап 1. Анализ существующей системы

Начали работу с изучения действующего интернет-магазина, структуры каталога и доступного API.

Определили основные пользовательские сценарии:

• просмотр категорий;

• поиск товара;

• использование фильтров;

• просмотр карточки товара;

• добавление в корзину;

• оформление заказа;

• повторный заказ.

Отдельно разобрали возможные состояния товара: наличие, отсутствие, скидки и изменение цены.

Этап 2. Проектирование пользовательского пути

Структуру приложения выстроили вокруг быстрого доступа к каталогу.

Основную навигацию разделили на:

• главную;

• каталог;

• избранное;

• корзину;

• профиль.

Для каталога предусмотрели категории, фильтры, сортировку и строку поиска.

Количество действий от карточки товара до подтверждения заказа постарались свести к минимуму.

Этап 3. UI/UX-дизайн

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

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

Отдельно проработали:

• состояния загрузки;

• пустые списки;

• товары без наличия;

• скидки;

• ошибки оплаты;

• подтверждение заказа.

Подготовили UI Kit для единообразного использования компонентов во всем приложении.

Этап 4. Разработка мобильного клиента

Приложение реализовали на Flutter с общей кодовой базой для iOS и Android.

Для управления состояниями использовали Riverpod, а взаимодействие с API организовали через Dio.

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

Этап 5. Каталог и поиск

Реализовали загрузку категорий и товаров с backend.

Добавили:

• постраничную загрузку;

• поиск;

• фильтры;

• сортировку;

• избранное;

• кеширование изображений.

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

Этап 6. Корзина и оформление заказа

Создали корзину с возможностью изменения количества товаров и удаления позиций.

При оформлении заказа пользователь мог:

• выбрать адрес;

• указать способ доставки;

• применить доступные параметры заказа;

• выбрать способ оплаты;

• подтвердить покупку.

Дополнительно предусмотрели обработку случаев, когда цена или наличие товара изменились после добавления его в корзину.

Этап 7. Личный кабинет и уведомления

В личном кабинете реализовали:

• данные пользователя;

• адреса;

• историю заказов;

• детали заказа;

• повторное оформление заказа.

Push-уведомления использовали для информирования пользователя об изменении статуса заказа и других важных событиях.

Этап 8. Аналитика и тестирование

Подключили продуктовую аналитику ключевых пользовательских действий:

• просмотр товара;

• добавление в корзину;

• начало оформления;

• успешный заказ.

Это позволило отслеживать воронку покупок и находить места, где пользователи чаще всего прекращали оформление.

Перед релизом провели функциональное и регрессионное тестирование основных сценариев на iOS и Android.

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

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

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

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

Подключенная аналитика позволяет отслеживать основные этапы покупательской воронки и использовать реальные данные пользователей для дальнейшего улучшения продукта.

Проект реализован на единой Flutter-кодовой базе, что упростило поддержку версий для iOS и Android и создало основу для дальнейшего развития мобильного канала продаж.