Переосмысление мобильного опыта «АльфаСтрахование»: PWA, BDUI и первое мини-приложение страховой компании в MAX

1. Вводная задача от заказчика, проблематика, цели

С 2022 г. мобильные веб-приложения перестали быть альтернативным решением и превратились в стратегический инструмент цифровой дистрибуции. На фоне сокращения числа российских приложений в App Store и Google Play, роста локальных магазинов приложений и увеличения мобильного трафика компании сталкиваются с выбором: инвестировать в нативную разработку или запускать универсальное веб-приложение. Современные PWA обеспечивают полноценный пользовательский опыт, сохраняют функциональность личного кабинета, повышают конверсию мобильных продаж и становятся особенно актуальными для iOS как альтернативный канал доступа. С учетом прогнозируемого роста мирового рынка PWA до $21.44 млрд к 2033 г. (по данным CFOtech) технология становится не временной мерой, а долгосрочной инвестицией в устойчивость и развитие бизнеса.

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

Задача D'Terra – запустить полноценное приложение в PWA-формате для iOS и Android с основным функционалом и привычным интерфейсом. Переложить дизайн и код существующего приложения на новую платформу, провести интеграции, протестировать и запустить.

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

1. Внедрить кастомный шрифт

2. Применить BDUI-подход

3. Интегрировать веб-приложение в мессенджер MAX

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

Решение

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

– Провели интеграцию с сервисами «АльфаСтрахование». Разработали интерфейс с учетом совместимости с различными устройствами и браузерами.

– Переработали дизайн устаревших разделов и отрисовали недостающие макеты в соответствии с новой дизайн-системой.

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

– Запустили приложение, обеспечили поддержку и регулярность обновлений.

1. Продуманная структура

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

2. Архитектура проекта

Пользовательские запросы и обновления обрабатываются через защищенные протоколы API и взаимодействуют с внутренними системами «АльфаСтрахование» для обработки данных.

3. Push-уведомления

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

4. Кроссплатформенность

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

5. Авторизация

Реализовали авторизацию в приложении:

• По биометрии (FaceID / TouchID)

• По email и через «Госуслуги»

6. Легкая установка

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

7. Дизайн

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

8. Внедрение кастомного шрифта

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

Процесс подбора шрифта начался с анализа:

1. Определение идентичности бренда и изучение ЦА

2. Оценка существующей айдентики

3. Проверка текущего шрифта на соответствие позиционирования

4. Определение целевых критериев

5. Оценка визуального контекста и анализ трендов

6. Подбор вариантов с учетом критериев

7. Примерка: оценка совместимости с визуалом и логотипом

8. Финализация предложения, визуализация шрифтовых пар

Критерии выбора для «АльфаСтрахование»

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

2. Адаптивность: читаемость на любых разрешениях, оптимальная контрастность.

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

Рассматривались готовые кастомные гарнитуры множества студий. Нужный шрифт по запросам клиента был найден у TypeType. В результате был выбран TT Norms Pro – функциональный геометрический гротеск.

Развитие сотрудничества

После разработки мобильного веб-приложения команда D’Terra продолжила поддержку и комплексное развитие проекта.

1. Внедрение BDUI

Следующим этапом развития стало повышение гибкости приложения – бизнесу требовалась возможность быстро вносить изменения без ожидания мобильных релизов. Для этого было принято решение внедрить Back-end Driven UI (BDUI) – подход, при котором сервер задает, что и как должно отображаться в пользовательском интерфейсе.

Ключевые решения:

• Быстрая загрузка главного экрана – изменена логика загрузки: при открытии экрана пользователь сразу видит скелетон (каркас экрана) и ключевую информацию, а данные по полисам и дополнительным блокам подгружаются поэтапно в фоновом режиме. В результате главный экран открывается за 1-2 секунды, время загрузки сократилось на 60%.

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

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

Какой функционал был переведен на BDUI

1. Главная страница – оптимизирована загрузка полисов, реализована возможность вносить изменения в отображении продуктов.

2. Детальная страница полиса ДМС – ключевой продукт. Оперативное обновление условий и сценариев.

3. Вызов врача на дом и просмотр обращений по ДМС – функционал адаптируется к растущим объемам пользовательских данных, сокращая время внесения изменений в справочники.

4. Программы лояльности: баллы «X5 Клуба», «АльфаБАЛЛЫ», «Приведи друга». Условия бонусных программ оперативно меняются без участия фронтенд-разработчиков.

5. Персонализированные баннеры – реализована возможность настраивать акции и предложения под конкретного пользователя.

6. Сценарии заявления убытков по ОСАГО – добавлена возможность быстро вносить правки при изменении требований регулятора.

Результат

• Время открытия главного экрана сокращено до 1-2 секунд.

• Общее время загрузки экрана снижено на 60%.

• Обеспечена возможность обновлять интерфейсы и пользовательские сценарии без перевыпуска приложения.

• Ускорен time-to-market при запуске новых продуктов и изменений.

2. За 3 недели интегрировали полноценное приложение компании «АльфаСтрахование» в мессенджер MAX

Задачи

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

• Оформление и продление полисов

• Урегулирование страховых случаев онлайн с быстрой выплатой

• Медицинские сервисы: от записи к врачу до вызова скорой и оплаты счетов из клиник

2. Адаптироваться под iframe-подобную среду и API MAX

Этапы интеграции

1. Аналитика

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

2. Адаптация биометрии

MAX не поддерживает стандартные WebAuthN API. Настроили кастомный модуль аутентификации через MaxBridge API, интегрированный с биометрией мессенджера – сократили время авторизации до 3 секунд, сохранив безопасность.

3. Кнопка «Запрос телефона»

Добавили контекстную авторизацию через номер телефона в чате. Реализовано через API MAX с fallback на OTP.

4. Реализация темной темы

Синхронизировали UI PWA с темной темой MAX через CSS variables и media queries.

5. Отдельная аналитика

Настроили кастомные события для MAX. Кастомные метрики выявляют узкие места, повышая конверсию.

6. Единая кодовая база

Использовали React и флаги MAX, обеспечив синхронные обновления с основным PWA-приложением. MAX получает обновления автоматически. Единая архитектура снижает затраты на обновления на 50%.

Результат

• «АльфаСтрахование» первой среди страховых обеспечили поддержку клиентов через мессенджер MAX даже без авторизации

• Бесшовный доступ к страховым сервисам прямо в чате – новый уровень доступности

• Ускорение проведения клиентских операций и новый стандарт UX в страховании

Виктория Грылева

PO, «АльфаСтрахование»

D'Terra помогли нам запустить полноценное приложение в главном российском мессенджере. Так мы оказались первыми среди страховых, кто внедрили чат со службой поддержки без авторизации! Спасибо большое всей команде за проделанную работу. Прекрасный пример, когда скорость и качество могут существовать вместе.

3. Результаты сотрудничества

PWA-приложение разработано в короткие сроки – за 4 месяца. Функционал соответствует существующему мобильному приложению «АльфаСтрахование». Интерфейс адаптирован под телефон и планшет. Обеспечена стабильная работа и регулярное обновление.

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

• Более 20 тысяч посетителей за первый месяц запуска

• Восстановлен дистанционный сервис для клиентов

• Проведена настройка аналитики для отслеживания эффективности приложения

Рост аудитории за 6 месяцев 2025 более чем в 2 раза

Февраль 2025: 112 815 посещений и 48 000 уникальных пользователей

Июнь 2025: 262 790 посещений и 125 700 уникальных пользователей

Июль 2025: 289 400 посещений и 140.4 тыс. уникальных пользователей

7 000+ посетителей ежедневно

2 500+ пользователей чата ежедневно

260 000+ посещений в среднем в месяц

Наиболее популярные страницы:

• Главная

• Чат

• Детальная страница полисов

• Запись к врачу по ДМС

Рост активности в приложении:

• «Покупка и поиск полисов» – рост числа переходов

• «Оформление страховых случаев» – рост числа переходов

• Разделы «Путешествия» и «Пассажиры» – рост трафика

• Чат – рост числа обращений за консультациями

• Онлайн-запись – рост числа записей к врачу

Новый функционал

1. Авторизация по номеру с подтверждением через SMS

2. Отправка файла из медицинской карты напрямую в чат

3. Добавление и хранение документов в профиле пользователя

4. Интеграция ГосКлюча для подписания документов при оформлении ОСАГО

5. Поддержка темной темы

В разработке:

1. Голосовые сообщения в чате

2. Открытие внешних ссылок в витрине

3. Глобальный поиск по приложению

Виктория Грылева

PO, «АльфаСтрахование»

В рамках стратегии цифровой трансформации «АльфаСтрахование» активно внедряет инновационные решения. В условиях нестабильности и меняющегося рынка мы в кратчайшие сроки вернули нашим клиентам возможность использования функций мобильного приложения после удаления из магазинов – одни из первых в сфере страхования создали удобное PWA-приложение. Проект успешно реализовал digital-интегратор D’Terra.

Веб-приложение для пользователей iPhone и Android в формате PWA имеет привычный дизайн и функционал – возможность установки на телефон и планшет, авторизацию по email и через «Госуслуги», получение уведомлений, запись к врачам, оформление страховых случаев и прочие возможности нативного приложения. Обновления становятся доступными без ручной модерации через магазины приложений. Клиентам «АльфаСтрахование» всегда доступны онлайн-сервисы.

4. Заключение

Разработка мобильного веб-приложения для «АльфаСтрахование» стала примером системной цифровой трансформации страховой компании и вывела взаимодействие клиентов с брендом на новый уровень.

Команда D’Terra разработала полноценное веб-приложение за рекордные 4 месяца и обеспечила его масштабное развитие.

Главные достижения:

• Быстрый запуск веб-приложения и восстановление дистанционного сервиса для клиентов

• Внедрение BDUI для быстрого релиза нового функционала и персонализации интерфейсов под пользователя

• Интеграция PWA-приложения в мессенджер MAX и обеспечение поддержки клиентов даже без авторизации

• Обеспечение независимости от App Store и Google Play и благодаря новым стабильным каналам дистрибуции

• Рост аудитории за полгода в 2.3 раза, более 260 000 посещений в месяц и 7 000+ пользователей в день

• Рост активности по ключевым сценариям: покупка полисов, оформление страховых случаев, онлайн-запись к врачу и обращения в чат

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

Павел Мянник

Исполнительный директор, D'Terra

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