Разработка мобильного приложения Mesomatrix: зачем косметологу приложение

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

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

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

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

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

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

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

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

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

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

• Двухнедельный спринт с публикацией раз в две недели

• Первая неделя: разработка и предварительное тестирование 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что внутри приложения

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

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

Каталог

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

Диплинки

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

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

Избранное

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

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

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

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

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

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

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

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