Для крупной компании, чьи офисы расположены в Европе, Северной и Южной Америке, Азии, разработка интернет-проектов должна быть универсальной и масштабируемой — на десятки представительств в разных странах.

Возможно, поэтому многие крупные бренды годами живут с устаревшими сайтами и приложениями (а то и вовсе без них). Но иногда инициатива одного из подразделений становится началом больших изменений для всей компании. Так случилось и с Sesderma: всё началось с одного локального офиса.

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

На старте проекта перед нами стояли довольно амбициозные задачи:

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

Обычный каталог с фильтрами эту задачу вообще не решает. Ведь чаще пользователь приходит не за конкретным продуктом, а со своим запросом: 

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

Поэтому мы сразу выстраивали приложение бренда Sesderma как продукт 3 в 1: интернет-магазин, онлайн-консультант и медиаплощадка.

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

• тест на тип кожи;
• подборщик средств;
• проверка товара через «Честный знак»;
• персональные акции и промокоды;
• выбор подарков и пробников;
• экспертный контент;
• полноценный заказ с оплатой и доставкой.

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

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

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

Пока пользователь видит анимацию с бабочкой, приложение проделывает большую работу:

• проверяет интернет-соединение;
• пытается определить геопозицию;
• загружает конфигурацию и стартовые данные;
• подготавливает корзину и оформление заказа.

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

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

Дизайн промоблока предполагал видеоконтент. На макетах это смотрелось эффектно, а при разработке выяснилось, что актуальная версия видеоплеера не хочет «дружить» с новой версией фреймворка React Native, на котором собрано приложение: ролики масштабировались некорректно.

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

Товары можно искать по назначению. Есть свои подкатегории для лица, для тела, для волос, а также новинки, акции и даже идеи для подарков. В каталоге они всегда на виду в виде плашек с категориями, между которыми легко переключаться.

Товары можно искать по отдельным параметрам. За это отвечают продуманные фильтры со встроенным счетчиком: пользователь всегда видит, сколько средств подходит под каждый параметр. С помощью фильтров продукцию можно отсортировать по:

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

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

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

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

Внутри подборщика — два связанных сценария:

1. тест на тип кожи;
2. подбор продуктов.

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

Особенность подборщика в том, что он очень гибкий — команда Sesderma через админ-панель может:  

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

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

Личные кабинеты бывают разными, но в е-коме всегда есть базовый минимум: избранное, покупки и статусы заказов. 

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

В редком е-коме акции ограничиваются формулой «скидка N%». Так, у Sesderma есть скидки на линии и товары, промокоды, подарок к каждому заказу, подарки по условиям конкретной акции, пробники в зависимости от суммы корзины, персональные предложения и механики, которые могут суммироваться или не суммироваться друг с другом. Для разработчика это уже звучит как небольшой блокбастер. 

Чтобы всеми этими промоактивностями можно было легко управлять, мы предусмотрели конструктор акций, который содержит две составляющих: 

1. Условие
При настройке условий акции администратор указывает параметры, например:

• диапазон дат;
• диапазон суммы заказа;
• на что именно действует акция — конкретный товар, товары из определенного раздела, товары из определенной линейки или товарной подборки. 

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

2. Эффекты
Их два:

1. Скидка: здесь мы настраиваем тип скидки (процент или фиксированная сумма), значение и минимальный порог, до которого может опуститься цена.
2. Подарок: здесь мы накидываем разные товары и для каждого товара-подарка можем указывать минимальный порог стоимости заказа, при котором подарок станет доступен — он помогает пользователю в корзине, выводя сообщение в духе: «купите товаров на еще 2 125 руб, чтобы получить подарок».

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

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

Косметику Sesderma часто продают на маркетплейсах и сторонних площадках, поэтому как для бренда, так и для конечного покупателя крайне важна подлинность товара. 

Чтобы легко ее проверить, мы добавили в приложение сканер Data Matrix-кода. Пользователь наводит камеру на маркировку, приложение распознает код и отправляет его на проверку. Ее результат показывает: 

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

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

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

Для проекта Sesderma мы реализовали множество функций для улучшения пользовательского опыта при оформлении заказа, например:

Представим: вы собрали корзину с товарами мечты, перешли к оформлению заказа, столкнулись с тем, что надо авторизоваться, и — ПОТЕРЯЛИ всю свою выборку после авторизации. Было? Было!

Чтобы неавторизованные пользователи приложения Sesderma никогда не попали в подобную ситуацию, после входа приложение предлагает два варианта:

• объединить гостевую и пользовательскую корзины;
• заменить сохраненную корзину новой.

И зарегистрироваться впервые, и авторизоваться в приложении можно по номеру телефона или email. Пользователь получает одноразовый четырехзначный код: на Android код может автоматически «подхватиться» из SMS, а системные механизмы iOS выводят его в поле как подсказку.

Для пользователя такой простой процесс — удобен, для бизнеса он же несет риски: опыт других проектов показывает, что открытая форма отправки кодов довольно быстро привлекает не только покупателей :) Поэтому еще на этапе планирования мы заложили защиту от SMS-фрода (когда мошенники через точки API пачками отправляют смс-сообщения, чтобы разорить владельца сайта или приложения). Для этого в запрос SMS-кода мы встроили Google reCAPTCHA Enterprise, а повторную отправку кода ограничили серверной задержкой.

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

Простой с виду процесс выглядит примерно так:

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

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

Поэтому мы настроили подбор серии для каждого заказа с учетом принципа FEFO (First Expire, First Out: буквально «первый истекает — первый уходит»): раньше отгружается партия, у которой раньше закончится срок годности. Это гарантирует, что просрочка никогда не попадет в руки клиента.

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

Изначально мы предполагали, что платежный интерфейс будет открываться внутри WebView — встроенного в мобильное приложение браузера, который не требует запуска сторонних приложений вроде Chrome или Safari. Но оказалось, что «Яндекс Сплит» не поддерживает работу внутри WebView, поэтому нам пришлось перенаправлять процесс оплаты в браузер на устройстве пользователя.

Процесс выглядит так:

1. Приложение создаёт заказ и получает платежную ссылку.
2. Страница банка открывается во внешнем браузере.
3. После успешной (или неуспешной) оплаты браузер возвращает пользователя в приложение по deeplink.
4. Приложение определяет результат, обновляет заказ и открывает нужный экран.

Мы подключили три варианта доставки: 

• СДЭК;
• 5Post;
• «Интеграл» (курьерская доставка).

У каждой — свои тарифы, пункты выдачи, курьерские сценарии, статусы и ограничения.

Например, для пунктов выдачи СДЭК и 5Post мы сделали два режима: вывод списком и на карте. На карте точки группируются в кластеры, чтобы экран не превращался в лес из сотен пинов. По нажатию кластер увеличивается, открывая отдельные точки, а поиск по адресу автоматически подстраивает область карты.

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

Для отправки чеков в приложении Sesderma мы интегрировали Orange Data — популярный сервис аренды облачных онлайн-касс для автоматической фискализации платежей и соблюдения требований Федерального закона № 54-ФЗ. 
Для заказа могут формироваться:

• чек аванса при оплате;
• чек полного расчета при доставке;
• чек возврата.

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

Отдельным контуром стала маркировка. По законодательству товары, которые подлежат отметке «Честный знак», должны маркироваться даже в чеках. Для этого мы предусмотрели проверку: если при создании заказа по какой-то причине на товар не пришла маркировка, то отправка чека блокируется и на email администратора приходит уведомление об ошибке.

Тот, кто хоть раз создавал мобильное приложение, знает: разработка — мелочь по сравнению с публикацией в сторах, где что угодно может пойти не так. Нам — повезло. С одним «но»: изначально у заказчика не было своего аккаунта Apple Developer.

Непосредственно перед релизом мы выложили тестовую сборку в TestFlight — платформу от Apple для бета-тестирования приложений перед их официальным релизом в App Store — чтобы заказчик мог протестировать сборку на iPhone. И лишь после всех финальных доработок приложение отправилось в сторы: мы подготовили изображения и SEO-тексты, чтобы мобильный проект Sesderma стремился в топ выдачи. 

Глава российского представительства Sesderma отреагировал на публикацию приложения моментально, записав видео для социальных сетей (и заодно раскрывая карты про создание нового сайта):

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

Главный плюс этого решения — экономия: меньше ресурса и денег уходит на дизайн (база ведь уже есть!), дешевле разработка (потому что многие бизнес-процессы вроде оформления заказа уже написаны). А еще на выходе заказчик получает единую систему, которой проще управлять и которую проще масштабировать. В общем — сплошные плюсы.

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