Цифровая экосистема
страховой компании
Редизайн сайта страховой компании: от устаревшего интерфейса к понятному выбору и оформлению полисов.
Единый опыт для клиентов и сотрудников
Union — страховая компания с портфелем продуктов для автомобилей, имущества и здоровья. На момент проекта компания обслуживала около 2 млн клиентов и имела более 300 офисов почти в 70 регионах.
Обновить цифровую экосистему
Сайт не обновлялся с первой итерации, а конверсия на нём была практически нулевой. Пользователи оформляли страховые продукты через сторонний сервис: долгий и непонятный путь на сайте компании отталкивал клиентов. Нужно было обновить интерфейс, показать важные продукты и помочь пользователям оформлять полисы непосредственно на сайте.
Сайт и PWA
Обновить устаревший интерфейс и адаптировать сайт для мобильных устройств с PWA-интеграцией.
Сервисы клиентов
Сделать заметными и привлекательными предложения ОСАГО, КАСКО и страхования от укуса клеща.
Внутренние инструменты
Административные интерфейсы для агентов и менеджеров.
Цели бизнеса
Перевести оформление страховых продуктов на сайт компании и повысить конверсию.
Компоненты для всей экосистемы
Создал собственный UI Kit и масштабируемую дизайн-систему. Разработал обновлённый визуальный стиль: яркий синий цвет, выразительные иллюстрации с элементами матового стекла и единую систему компонентов для сервисов.
Основы и компоненты
Настроил типографику, сетку, кнопки, поля, формы и карточки. Определил состояния hover, focus, disabled и error.
Правила и адаптивность
Подготовил гайды по отступам, выравниванию и адаптивности, а также проработал поведение компонентов в PWA.
Единый UI Kit в Figma
Объединил элементы в библиотеку с интерактивной документацией, чтобы применять их на сайте, в кабинете и внутренних инструментах.
Три ключевых сценария на первом плане
Переработал главную страницу и архитектуру сайта: вынес страховые продукты и важные действия на первый план, чтобы пользователь мог сразу выбрать подходящий полис и перейти к оформлению.
Главный экран
Убрал лишние элементы, добавил призывы к действию и визуальные акценты.
Каталог продуктов
Создал заметные карточки и страницы продуктов для ОСАГО, КАСКО и страхования от укуса клеща с понятным переходом к оформлению.
PWA и устройства
Адаптировал интерфейс для смартфонов и PWA. Отдельного мобильного приложения в проекте не было.
Полис и ключевые условия на одной странице
Для ОСАГО собрал основные сведения о полисе, преимущества, документы и ответы на частые вопросы в последовательную страницу. Первый экран помогает сразу перейти к оформлению, а отдельный блок объясняет, что делать при страховом случае.
Выбор программы и оформление
На странице КАСКО разместил форму обращения рядом с первым экраном, а ниже — варианты страхования и сравнение программ. Пользователь может изучить условия и оставить заявку, не возвращаясь к началу страницы.
Покрытие и помощь при укусе клеща
Для продукта «Антиклещ» показал, какая медицинская помощь входит в программу, кому она подходит и как действовать при наступлении страхового случая. Условия и ответы на вопросы собраны в отдельных блоках.
Доступ к полисам и важным действиям
Упрощённый вход
Предусмотрел вход, в том числе по номеру телефона или государственному номеру автомобиля.
Полисы и напоминания
Добавил быстрый доступ к действующим полисам, визуальные статусы и напоминания о продлении.
Мобильные сценарии и обратная связь
Оптимизировал кабинет для использования одной рукой и добавил обратную связь, чтобы собирать проблемы пользователей.
Короткий путь к оформлению полиса
Пересмотрел длинный и непонятный сценарий оформления и сократил путь пользователя вдвое. Уменьшил количество полей, добавил автозаполнение по VIN или ИНН и представил оформление как последовательность шагов с индикатором прогресса.
Подсказки и проверка
Добавил валидацию во время заполнения и подсказки по ходу сценария.
Понятные тарифы
Добавил информационные блоки и структурировал условия тарифов.
Аналитика воронки
Настроил отслеживание отказов по этапам через Google Tag Manager и Analytics.
Понятное обращение за выплатой
Проработал подачу заявления о страховом случае в личном кабинете. Пользователь проходит последовательные шаги: начинает обращение, заполняет сведения, прикладывает документы и проверяет заявление перед подтверждением. Индикатор показывает текущий шаг.
Начало обращения
Пользователь открывает раздел страхового случая и выбирает онлайн-подачу заявления.
Подтверждающие документы
На шаге загрузки показано, какие документы необходимы. Пользователь прикладывает медицинское заключение с диагнозом, сроками лечения и обстоятельствами события, а также другие запрошенные документы.
Данные и проверка
Пользователь заполняет персональные данные и проверяет черновик заявления перед подтверждением.
Оформление стало проще, конверсия выросла
После редизайна путь оформления сократился вдвое, а конверсия выросла в несколько раз. Пользователям стало проще находить страховые продукты и оформлять их непосредственно на сайте компании.
Единая дизайн-система
Создан UI Kit для клиентских и внутренних интерфейсов, позволяющий повторно использовать компоненты и внедрять единый подход.
Сайт и кабинет
Обновлены UX и UI корпоративного сайта и личного кабинета клиента.
Мобильные устройства и PWA
Разработан адаптивный интерфейс для мобильных сценариев и PWA.
Страховые продукты
Путь оформления сокращён вдвое; конверсия выросла в несколько раз.
По оценке, приведённой в исходном кейсе, единый подход повысил визуальную согласованность и помог представить бренд как более современный и технологичный. Дизайн-система стала основой для дальнейшей цифровой трансформации.
Если вам нужен дизайн для бизнеса, напишите мне.