Разработка мобильного приложения

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

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

Mesomatrix — производитель и дистрибьютор профессиональной косметики с 2003 года, в каталоге которого более 250 наименований продукции. Помимо интернет-магазина, компания развивает академию для косметологов: проводит курсы, вебинары и сертифицирует специалистов. Назвать Mesomatrix просто e-commerce-проектом было бы неправильно, поскольку это и магазин, и образовательная платформа, и комьюнити для бьюти-профессионалов.

• Разработать мобильное приложение для iOS и Android, сохранив весь бизнес-функционал сайта: каталог, оформление заказов, личный кабинет, образовательный портал, календарь мероприятий. 
• Сделать управление контентом самостоятельным для заказчика — без необходимости частых релизов и правок кода под каждое изменение.

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

Запрос клиента предполагал создание зеркала сайта в формате мобильного приложения — тот же каталог, тот же личный кабинет, та же логика. Однако в действительности, несмотря на схожесть бизнес-процесса, это отдельный проект со своей спецификой и процессами, где правила игры диктуют Apple и Google.

Невидимая серверная работа

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

Процесс релизов

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

Любое обновление кода проходит проверку в App Store и Google Play, которая может занять не один день и не всегда предсказуема. А вот контент управляется на стороне сервера и в админ-панели — эти изменения подтягиваются в приложение так же быстро, как на сайте, без ожидания нового релиза.

Процесс разработки перестроили с учётом особенностей сторов: 

• Двухнедельный спринт с публикацией раз в две недели
• Первая неделя: разработка и предварительное тестирование 
• Вторая неделя: отработка правок по багам после тестирования, повторное тестирование, согласование версии для сторов и выгрузка

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

Dart + Flutter для разработки

Использовали Flutter для кроссплатформенной разработки. Этот фреймворк обеспечивает высокую скорость создания и лёгкость в поддержке кода. Одна кодовая база для iOS и Android экономит бюджет клиента и позволяет развивать приложение одновременно на двух платформах.

Приложение по принципам Clean Architecture

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

Единая административная панель для сайта и приложения

Весь контент сайта и приложения управляется из общей административной панели. Это сокращает время на внесение изменений и уменьшает зависимость от разработчиков. Клиент самостоятельно контролирует большую часть контента — от наполнения меню, баннеров и карточек до вебинаров. 

Нативный интерфейс

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

Push-уведомления и сбор аналитики

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

Сбор аналитики пользовательских действий внутри приложения даёт основу для дальнейшей персонализации — рекомендаций товаров, курсов, акционных предложений, — которую в перспективе можно развивать отдельно от сайта.

Главная страница и меню

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

Каталог

Полный ассортимент профессиональной косметики с категориями и фильтрами — адаптированный под мобильный формат аналог каталога сайта, но с более простым и понятным для смартфона путём выбора товара.

Диплинки

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

Логика такая: если нужная страница есть в приложении — она откроется там же. Если такой страницы в приложении нет, но ссылка для перехода существует — откроется сайт.

Избранное

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

Подбор косметики по типу кожи

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

Портал обучения

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

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

Часть возможностей — push-уведомления и персонализация на основе накопленной аналитики — сейчас раскатывается постепенно. Мы сознательно закрывали основные бизнес-сценарии на стабильной и проверенной логике сайта, прежде чем наращивать специфичные для приложения функции. 

• Переписали серверную часть под мобильный формат, сохранив единую бизнес-логику с сайтом.
• Реализовали кроссплатформенное приложение на Flutter — с единой кодовой базой для iOS и Android.
• Спроектировали приложение по принципу Clean Architecture — с чётким разделением ответственности внутри кода, что облегчает дальнейшую поддержку и развитие.
• Объединили админ-панель для сайта и приложения: контент (товары, статьи, лендинги академии) управляется из одного места и гибко распределяется под каждую платформу.
• Донастроили нативные UX-паттерны там, где браузерные решения не работают: например, раздельные поля ввода телефона и email с корректной маской вместо одного универсального поля.
• Добавили push-уведомления как отдельный канал коммуникации с пользователем, недоступный на сайте.
• Подготовили и опубликовали приложение в App Store и Google Play, включая прохождение всех требований площадок.

Приложение вышло в App Store и Google Play и сейчас находится на этапе плавного набора аудитории. Команда проекта сознательно не форсирует продвижение, пока не отладит все процессы и не раскатит ключевые нативные функции. Основа продукта — стабильный бэкенд и единая с сайтом бизнес-логика. Дальше в приоритете — раскрытие возможностей приложения: push-уведомления и персонализация на основе накопленной аналитики.
Пользователи уже оценили удобство в сторах. 

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