Сайт ВСК – единая страховая платформа

Главное о кейсе

Сайт должен быть удобен пользователю и эффективно продавать услуги компании. Примерно так была сформулирована задача по объединению двух сайтов ВСК, переосмыслению User Experience, редизайну и рефакторингу решения. И всё это за 7 месяцев.
За новым, более узнаваемым стилем ВСК скрывается множество архитектурных изменений: мы объединили вместе продающий и основной сайты, размещенные на разных доменах, а также внедрили систему управления контентом – headless CMS в связке с технологиями SSR и микрофронтенд, что на рынке считается прорывом. Обновленный сайт не только помог увеличить конверсии входящего трафика с главной страницы на страницу покупки страховых полисов, но и стал удобнее для его администрирования. Контент-менеджеры легко могут менять наполнение сайта без привлечения разработчиков.

Как проект изменил жизнь пользователей

• Клиент может закрыть все основные потребности в услугах страховой компании лишь при половине скролла страницы. Мы расположили главный функционал так, чтобы он был заметен сразу при входе – пользователь может легко попасть в сценарии покупки, оплаты и продления полиса, заявления убытка, войти в личный кабинет, просмотреть статус убытка, а также увидеть список ближайших офисов. Все блоки стали просты и интуитивно понятны каждому пользователю, кнопки и множественные разделы перестали запутывать.
• Администраторы сайта теперь создают продуктовые самостоятельно, без помощи разработчика. В CMS уже есть модель страницы с заданными блоками, в которые остается только добавить контент. Новая «админка» позволяет вносить изменения вплоть до малейших элементов: от названия кнопок и ссылок до контента основных блоков и баннеров.

Бизнес-задача и ее решение

Перед нами стояло несколько основных задач:
• Объединить сайты www.vsk.ru и shop.vsk.ru на одной архитектуре в обновленном дизайне и на одном домене с единой структурой
• Перенести существующий функционал обоих сайтов на единый стек разработки внутри ВСК
• Разработать инструмент администрирования контента сайта. Система должна позволять настройку ролевой модели по управлению разным типом контента, управление SEO-атрибутами страниц, текстовым и графическим контентом
• Проанализировать текущий контент на предмет его легкости и полноты и доработать при необходимости
• Реализовать поддержку мультиязычного контента, а также версию сайта для людей с ограниченными возможностями
• Адаптировать страницы сайта под экраны мобильных устройств

Новый сайт ВСК интегрирует в себе 2 прежних сайта – это основной сайт vsk.ru и shop.vsk.ru, отвечающий за процессы продажи – от онлайн-калькуляторов до сервисов мобильного приложения.
Сперва мы провели полную инвентаризацию сайтов: посмотрели на метрики и конверсии и оценили общую полезность тех или иных разделов. Неактуальные разделы мы убрали, добавили недостающие и определили целевую структуру сайта. Актуализировали продуктовые линейки и запросили у ответственных бизнес-заказчиков исходный контент. Затем профессиональный журналист доработал эти тексты в едином tone-of-voice компании ВСК. Чтобы контент можно было обновлять и совершенствовать, мы настроили CMS-систему, с которой можно работать без привлечения разработчиков.
С точки зрения визуала прошли большие изменения. Мы подготовили новую дизайн-концепцию, которая стала более яркой – стиль ВСК стал особенным. Кроме того, появились иллюстрации в стиле «Азбуки страхования», где каждый вид страхования имеет свою букву со своей индивидуальной иллюстрацией.

Чтобы трафик пользователей при переключении не потерялся и плавно перешел со старых доменов в новый, мы настроили карту редиректов. А непосредственно запуск сайта производили в 2 этапа. Сперва новая версия сайта была реализована на субдомене new.vsk.ru с возможностью перехода на старый сайт, что позволило минимизировать инфраструктурные и регуляторные риски, а также не потерять трафик. На втором этапе сайт переехал на основной домен, и был дан старт маркетинговым кампаниям.
По сей день с помощью инструментов мы отслеживаем различные метрики, чтобы процесс развития сайта не останавливался – выдвигаем гипотезы, что можно улучшить в будущем.

Крафт (мастерство), реализация, технические детали

• Headless CMS – современная система управления контентом
• SSR – отрисовка страниц на стороне сервера для лучшей индексации поисковиками
• Angular \ React - фреймворк для разработки Front
• Микрофронтенд – независимые релизы при работе нескольких команд
• QRATOR - противодействия DDoS-атакам всех классов
• Kubernetes (K8s) —развёртывание, масштабирование и управления контейнеризированными приложениями
• S3\ MinIO – хранение медиафайлов


Хотим акцентировать внимание на связке трех технологий, которую мы использовали при разработке бэкенда: на рынке подобное решение можно встретить нечасто – это CMS (Content management system), SSR (Server Side Rendering) и Module federation (архитектура микрофронтедов). Расскажем о них чуть подробнее:
• CMS – система управления контентом. Принцип работы таков: CMS становится главным источником данных, т.к. привязывается к базе данных (БД) и реализует API для получения из нее этих данных. Мы описываем модели в БД – то, как элементы будут организованы внутри структуры, чтобы по запросу получить всю информацию к любой коллекции. Создать сами модели для сложных страниц – это не самая тривиальная задача.  
• SSR - рендеринг на стороне сервера. При первом посещении страницы пользователем он полностью выполняет весь код (эмулируя поведение браузера) до стабильного состояния и только после этого отправляет html на фронт. Эта технология крайне важна для SEO, т.к., кроме Google, никакие поисковики не умеют дожидаться выполнения JS (по факту он просто отключен). Ежемесячно сайт ВСК посещает около миллиона пользователей, поэтому для страхового дома очень важен органический поиск, чтобы роботы корректно обрабатывали их страницу.
• Module federation - архитектура микрофронтендов. У ВСК несколько команд, которые занимаются разными задачами. Чтобы релизы одних не повредили общему сайту или релизам других, ВСК попросили сделать архитектуру в формате микрофронтендов.  Мы размещаем одно из приложений (называется remote) на своем домене, указываем, какую часть кода этого приложения мы хотим раздавать, и за счет этого появляется js-файл, который по запросу можно скачать из другого приложения (называемого shell'ом) и использовать код remote'а.  
 
Итого, общая схема работы: у нас есть shell, который для переиспользования кода скачивает запросом к другому приложению js-файл, внутри кода которого большое количество запросов к CMS, т.к. CMS определяет практически весь внутренний контент сайта. И эту всю операцию нужно проводить на сервере с помощью SSR, эмулируя поведение браузера.  

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

В подготовительной работе перед стартом разработки скрывается много интересной аналитики и коммуникаций с заказчиком.
Изначально четкого техзадания от заказчика перед нами не было, поэтому аналитику мы проводили практически самостоятельно. Прежде чем понять, что должно быть на новом сайте, а что оттуда убрать, мы провели большой анализ конкурентов – смотрели на референсы не только на российском (анализировали топ 10), но даже и на китайском (как активно развивающемся) рынке. Мы посмотрели, как эти компании взаимодействуют с пользователем: как выглядит личный кабинет, как проходит урегулирование убытка. В качестве элементов анализа мы взяли визуальный стиль, количество кликов до целевого действия и контент.
Проектирование пользовательского пути шло по следующим этапам:
• Зафиксировали текущие метрики: какие разделы популярны сейчас, какие хотим подсветить чуть больше. Итого мы проанализировали 95 страниц и 6 основных метрик (количество отказов, устройства, аудитория, конверсия, целевые действия, среднесуточное количество действий).
• Проанализировали текущие пользовательские сценарии. Мы поняли, что разветвление сценариев путает пользователей и в конечном итоге приводит к очень маленькому проценту конверсий.
• Проранживали пользовательские сценарии в зависимости от того, что важнее увидеть пользователю в начале и как сделать его путь до конечной цели максимально коротким и при этом эффективным для компании. Мы предложили не только сократить количество контента на сайте, но и объединить некоторые продукты. Если посмотреть на дерево старой структуры и новой, то даже визуально можно увидеть, как количество сценариев ужалось до простых и целевых.
• Выяснили требования к API – какие данные откуда можно получать, учитывали все системные требования при постановке технического задания для дизайн-макетов.
• Создали дизайн-макеты экранов – на этом этапе происходит совместная работа аналитика и дизайнера.

Комментарий заказчика

"На новом сайте мы хотели объединить продающий и информационный блоки, чтобы клиент не совершал лишние переходы, и мы тем самым не теряли конверсию (а это порядка 30%). По итогу мы добились не только этой цели, но и получили сайт на современных технологиях.

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