Shape 2 Created with Sketch. Shape 2 Created with Sketch. Shape 2 Created with Sketch. 539A0822-23D1-4EB0-A2B6-ADC1427D73FD Created with sketchtool. BE83D970-80BD-429F-8FEF-15320EFC25BD Created with sketchtool. fb Created with Sketch. Imported Layers Copy 4 Created with Sketch. Page 1 Created with Sketch. 8E691C04-FCB2-4D28-A161-E18CE8F4274A Created with sketchtool. icon-increase2 icon-mail icon-phone Oval 20 Created with Sketch. icon-research icon-research2 Group 36 Created with Sketch. Imported Layers Copy 6 Created with Sketch. Imported Layers Copy 5 Created with Sketch. LOGO 50B11FD7-22F2-4934-A094-70A3E7FBFD64 Created with sketchtool.
Ко всем проектам

Ингосстрах

Дизайн и frontend-разработка корпоративного сайта с интернет-магазином страховых продуктов

> 20

страховых продуктов

< 30 секунд

до получения
предварительной котировки

> 400

макетов экрана

Коротко о компании
Одна из крупнейших российских страховых компаний, стабильно входит в ТОП-10 страховщиков РФ. В 2017 году отмечает 70 лет со дня основания.
Адрес сайта
Виктор Антонов, UX директор eCommerce-агентства Aero (ВА)
Какую задачу ставил Ингосстрах перед разработчиком нового сайта?
ВА: Ингосстрах пришел к нам с амбициозной задачей – разработать лучший сайт по продаже страховых продуктов в России. Самый передовой с точки зрения технологий, самый удобный, простой и эффективный. Все сервисы, которые предоставляет компания, должны быть доступны клиенту онлайн. При этом стояла задача сделать сайт максимально персонализированным и нативным, чтобы клиент чувствовал заботу. К 70-летию компания обновила бренд-стратегию, и в дизайне нужно было отразить концепцию «Страхование в cедьмом поколении».

В итоге мы спроектировали интерфейсы, сделали дизайн и frontend нового сайта, а специалисты Ингосстраха отвечали за backend, интеграцию и обмен данными. Покупка страховых продуктов должна быть такой же простой, как покупка йогурта в Ашане. Поэтому мы постарались максимально упростить интерфейс и внедрить сквозные инструменты быстрого сервиса: быстрый доступ к калькулятору, быстрый расчет, быстрое получение предварительных котировок. Когда ты покупаешь КАСКО, у тебя открыто в браузере 4 сайта, и ты сравниваешь, где дешевле. Важно, чтобы на сайте все было быстро и понятно. Иначе ты просто закроешь этот сайт. С первого действия на сайте пользователь должен понимать, что у нас весь процесс будет такой быстрый.
Предпроектные исследования
Ключевая особенность продукта в том, что его продают, а не покупают: заплатить за страховку нужно до того, как она может потребоваться. Поэтому задача сайта не повышать стоимость продукта (upsale), а понижать, чтобы увеличить конверсию. Цена страховки — самый понятный и определяющий для покупателя параметр. Для получения цены используются конфигураторы, разобраться в которых неподготовленному человеку сложно. Ключевая задача интерфейса — увести покупателя от продуктовых понятий и внутренних ограничений, максимально упростить получение предварительной стоимости. Далее — предложить покупателю отталкиваться от цены (Name Your Price), чтобы определиться c оставшимися параметрами страховки.
Цель и польза проекта
Разработать лучший сайт по продаже страховых продуктов в России
Сделать новый сайт отражением обновленного бренда в год 70-летия компании
Сделать персонализированный сайт, который подстраивается под покупателя
Разработать передовые инструменты для онлайн-подбора и оформления полисов
Увеличить долю онлайн-продаж в выручке компании
Главная страница
В чем особенность продажи страховых продуктов?
ВА: Страховой продукт продают, а не покупают: ведь заплатить за страховку нужно до того, как она может потребоваться. На наш взгляд, в этом и есть ключевая особенность. В страховых продуктах мало кто хорошо разбирается. Чаще всего люди страхуют авто и покупают travel-страховки. При этом в большинстве случаев они даже не представляют, что покрывает страховая сумма. Цена страховки — самый понятный и определяющий для покупателя параметр. Покупатель приходит на сайт, и больше всего его интересует калькулятор. Поэтому мы предложили выделить под калькулятор центральное место на сайте.

На какие поведенческие паттерны вы опирались?
ВА: У сайта Ингосстраха несколько целевых аудиторий. Мы попытались создать объемный портрет каждой из этих аудиторий, выяснить, зачем они приходят на сайт, что для них важно (бренд, цена, полнота полиса, гарантия выплат). А еще — с какими проблемами они сталкиваются на пути от возникновения потребности в страховании до получения полиса: в онлайне, офлайне, на пересечении каналов, по телефону, в поддержке, на этапе выезда специалиста.

На основе этих данных мы составили Сustomer Journey Map. Эта карта помогла понять общие приоритеты и «узкие места» для разных аудиторий. Так, все хотят купить страховку быстро, никто не хочет «заморачиваться» и переплачивать за непонятные сервисы. То есть, чтобы увеличить конверсию, при проектировании интерфейсов мы должны повысить скорость оформления заявки. Для некоторых, например, нужно сделать подсказку, что такое франшиза, потому что они не знают, что это такое, но хотят разобраться. Те группы клиентов, которым такие подсказки не важны, просто не обратят на них внимание. А для части аудитории это будет «спасательный круг»!
Чтобы пользоваться калькулятором не надо разбираться в тарифах?
ВА: Можно просто выбрать цену, которую ты готов заплатить за страховку. Мы внедрили решение Name your price, оно используется в передовых страховых компаниях на западе.
С одной стороны, это решение позволяет реализовать вечное стремление потребителя купить дешевле, и это увеличивает конверсию. А с другой стороны, калькулятор очень понятно объясняет из каких опций складывается цена страховки и помогает выбрать оптимальный тариф. Покупатель вовлекается в процесс и по ходу выбора опций разбирается в тарифах. Нажал одну кнопочку — добавил экстренную стоматологическую помощь, нажал другую — добавил страхование багажа. И видит, как при этом меняется цена полиса. Вполне возможно, что зайдя на сайт за дешевой страховкой, он «поиграет» с калькулятором и поймет, что ему нужны дополнительные опции. И готов за это заплатить, просто раньше об этом не задумывался.
Задачи
Перейти от выбора страховых продуктов к конфигурированию страховки «под себя»
Разработать интерфейсы подбора страховки, отталкиваясь от цены (Name Your Price)
Разработать новую дизайн-концепцию (как сервисной, так и корпоративной части) под новую бренд-стратегию
Разработать frontend-фреймворк (UI-kit) для создания новых страниц после запуска
Сократить время на получение предварительной котировки и оформление полиса
Разработать интерфейсы онлайн-покупки ОСАГО с учетом коэффициентов, введенных в 2017 году
Вы сказали, что перед вами стояла задача сделать передовой сайт. А в чем преимущества продукта, который в итоге получился, на ваш взгляд?
ВА: Во-первых, главная страница нового сайта заточена под ключевой сценарий — конверсию. Доступ к калькулятору — прямо на главной странице. Мы постарались дать пользователю больше пользы и меньше маркетинговой шелухи. Мы понимаем, зачем человек пришел, и сразу даем ему это. Наш основной референс – travel-сегмент. Когда ты заходишь на сайт авиакомпании или агрегатора билетов, ты вводишь, что тебе нужно, и хочешь узнать, сколько это стоит, и желательно побыстрее. Какая авиакомпания тебя повезет — не так важно.

Во-вторых, мы оптимизировали сами калькуляторы. Оптимизировали поля ввода данных, внедрили Name your price, реализовали систему контекстных подсказок. А еще предложили рекомендации по персонализации на будущее, чтобы «умная» система угадывала профиль клиента и поля автозаполнялись.

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

Мы предложили два варианта главной страницы для A/B тестирования при запуске. Один вариант более «классический», имиджевый со слайдером. Там калькулятор вызывается по нажатию. А второй вариант конверсионный, с большим калькулятором вместо слайдера, как на travel-сайтах. Покупатель может ввести данные и получить стоимость полиса, как только зашел на сайт. Будет возможность оценить, какой из вариантов главной окажется более эффективным.

Почему Name your price в России практически не используют? В чем сложность решения?
ВА: На первый взгляд может показаться, что все очень просто. Name your price – это ползунок, который включает и выключает опции. Но на самом деле реализовать это решение очень сложно, потому что у страховых компаний есть базовые тарифы и конфигурации опций к ним. Некоторые опции продаются только в комплекте. И в этом случае нельзя только одну «галочку» скинуть — скинутся сразу 5 галочек. Но решение, которое мы внедрили, будет развиваться. В идеале калькулятор нужно настроить так, чтобы покупатель мог гибко назначать цену страховки: сделал шаг условно в 5 рублей и понял, как пакет опций изменился.

А как все эти калькуляторы работают на мобильных устройствах?
ВА: Точно так же, как и на десктопах. Пользователь не должен чувствовать разницы, переходя с одного устройства на другое. Наша задача — обеспечить покупателю бесшовный опыт. Но над адаптивной версией нового сайта пришлось потрудиться. Чтобы реализовать те контролы, которые были задуманы в интерфейсах, пришлось делать собственные frontend-решения, потому что аналогичных готовых не было.
Решения и процессы
«Быстросервисы» — сквозные инструменты получения предварительных котировок и продления полисов
Два варианта главной страницы для A/B тестирования при запуске
Объединение страховых продуктов в меню под потребности клиентов
Система измерения «сопротивления» полей калькуляторов и их влияния на котировку для оптимизации форм и шагов
Использование форм из travel-сегмента, новые механики ввода, кастомные мультиселекты для увеличения скорости заполнения форм
«Умное» автозаполнение и система контекстных подсказок в калькуляторах
Онлайн-консультант, объединяющий мастер заполнения формы, различные типы сообщений для чата и заказ звонка
Микроанимации интерфейсов: смена табов, диаграммы, слайдеры, экспандеры, прелоадеры, меню, пересчет цифр, подсказки, плавающие блоки
Платформа и интеграции
AngularJS
Genesys
Zingaya
Общий результат
Разработана новая концепция с акцентом на персонализацию и онлайн-продажи
Разработан дизайн, поддерживающий новое позиционирование «Ингосстрах 7.0»
Сокращено время получения предварительной котировки
Интерфейсы выбора страховых продуктов заменены персонализированными конфигураторами
Внедрен принцип подбора полиса Name Your Price
Разработаны уникальные механики ввода полей калькуляторов
Разработан подробнейший UI-framework для сборки новых страниц
Другие проекты
Расскажите о проекте
Подпишитесь на рассылку о eCommerce

Благодарим вас за подписку! В ближайшее время пришлем вам интересные статьи

Этот адрес уже подписан на нашу рассылку

eCommerce стикеры №1

Мы нарисовали первый eCommerce стикерпак, чтобы вам было еще проще обмениваться своими эмоциями!

Telegram iMessage

eCommerce стикеры №1

Первый стикерпак для интернет магазинщиков