Единая диджитал платформа Сбербанк страхования

Получаем задачу на «лифтинг» существующего сайта sberins.ru – по результатам UX-тестирования нужно изменить некоторые элементы интерфейса – уменьшить размер баннера, поменять стиль кнопочек и так далее.

Не все так просто

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

Клиент пока настроен немного скептически. Предлагаем начать работу с переработки страницы продукта. Cейчас продуктовые страницы встречают пользователя яркой картинкой и крупным заголовком:

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

Что не так с ВЗР?

В качестве первого интерфейса выбираем продуктовую страницу полиса для выезжающих за рубеж (ВЗР). Особенность этого полиса в том, что как правило люди вспоминают о нем «потому что надо срочно для шенгена и подешевле бы», но чтобы показать стоимость полиса нужно ввести в калькулятор довольно много информации. Наша задача – показать стоимость на первом экране. Начинаем рисовать:

Собираем презентацию для клиента:

Получается слишком мрачно, переделываем все в светлых тонах:

Как найти этот полис?

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

Продумываем лаконичные категории и уходим от линейности навигации – один продукт может присутствовать в нескольких категориях (например ТТТ в ИИИ и ВВВ). Показываем концепт меню:

Затариваемся продуктами

Следующим этапом прорабатываем описание продукта – собираем всю информацию обо всех продуктах 2 компаний и пытаемся привести структуру страниц к единому знаменателю:

Работаем над единой структурой отображения информации. Пробуем разные варианты оформления шапки страницы – с подложкой и без, ищем шрифтовое решение:

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

Единый скринфлоу

На начальном этапе у нас есть продукты двух страховых компаний на едином сайте с калькуляторами и еще два сайта, на которые пользователь перенаправляется (в зависимости от того, какой компании принадлежит продукт) для оформления продукта. С этим мы сделать ничего не можем – это требования служб безопасности, юридических отделов и законодательства РФ.

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

Главная и многое другое

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

Отрисовываем иконки и другие элементы:

Адаптив

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

Прорабатываем правила адаптации для разных разрешений экрана / разных соотношений сторон:

Отрисовываем адаптивные версии всех экранов с уникальными элементами:

Нет предела совершенству

На этапе верстки страниц выверяем все реакции интерфейса на действия пользователя и дорабатываем моменты взаимодействия, которые можно увидеть уже только в интерактивном виде