Как мы решились на большой редизайн веб-версии «Сбербанк Онлайн» и что у нас получилось

В апреле мы впервые за семь лет полностью обновили веб-версию «Сбербанк Онлайн». Старый вариант еще работает, поэтому оценить масштаб изменений легко. В общей сложности мы потратили на редизайн год: разобрались с legacy-кодом, разработали концепт дизайна и гайдлайны, перевели веб-версию на новые технологии и сделали так, чтобы сервисы от любой из команд можно было легко вывести на клиентов.

Мы обязательно продолжим менять веб-версию (и занимаемся этим прямо сейчас, пока вы читаете этот текст), а пока расскажем, из-за чего решились на такие большие изменения и почему новая версия выглядит именно так.

Кому нужен сайт, если есть приложение

Скорее всего вы хоть раз слышали о том, что веб умирает. Но цифры говорят, что это не так. Мобильным приложением Сбербанк Онлайн сейчас ежемесячно пользуются 60 млн человек, а веб-версией — 10 млн человек, и это очень много. После релиза мобильного приложения мы видели отток части пользователей туда, но при этом аудитория уже несколько лет подряд остается стабильной. У приложения появилась своя новая аудитория, часть перешла туда из веб-версии, а примерно 5 млн человек пользуются и тем, и другим — веб никуда не исчез. Сейчас там среднем совершается 40–45 млн операций ежемесячно.

Этому есть два объяснения. Во-первых, как мы уже сказали, многие клиенты используют и сайт, и приложение — но делают это в разных ситуациях. Мобильное приложение — для простых операций (например, чтобы перевести кому-то деньги или пополнить баланс телефона). А для крупных и сложных операций предпочитают заходить в интернет-банк. Там оплачивают счета, где нужно вводить реквизиты, берут кредиты и открывают крупные вклады. Людям хочется «спокойно сесть за ноутбук и разобраться в вопросе». С инвестиционными продуктами, кстати, тоже чаще работают в веб-версии. Данные говорят о том, что веб — это иной тип поведения и другая зона доверия. Средний чек по платежу там в 2,5 раза выше, чем в приложении. Во-вторых, довольно большая доля пользователей веб-версии — люди в возрасте старше 45 лет, и многие из них предпочитают пользоваться интернет-банком, а не мобильным приложением.

Интернет-банк у Сбербанка появился еще в 2008 году (тогда он назывался «Электронная Сберкасса»!), а последний серьезный редизайн мы провели в 2013 году. Несмотря на постоянные апдейты, интерфейс сильно устарел, а добавлять новые продукты и функции стало сложнее — нужны были технологии посовременнее.

Если сильно упростить концепцию, от которой мы отталкивались, обновленная веб-версия должна была стать удобной, дружелюбной и доступной. Вот как мы решали эти задачи.

Сделать удобным

Предыдущая веб-версия не была адаптивной — она выглядела хорошо только на десктопе. И это было проблемой, потому что 20% пользователей заходят в интернет-банк Сбербанк Онлайн с телефона. Сначала у нас была адаптивная линейка типографики, и мы предполагали, что будем делать компоненты разного размера в зависимости от устройства. Потом мы смогли всё правильно посчитать и сделать хорошую сетку для всех разрешений. Мы проверили ее на всех брейкпоинтах: от самых маленьких до самых больших — от четвертого айфона до гигантских десктопов.

Сейчас у нас есть дизайн-система с единым набором компонентов, которые одинаково себя ведут на всех устройствах. Это важно, в числе прочего, и потому, что сотрудники в отделениях пользуются планшетами. И с единым интерфейсом им проще показывать клиентам, как всё работает. Придя домой, клиент откроет веб-версию и увидит точно такой же интерфейс — ему будет понятно, как повторить это действие самому.

Еще в старой версии отсутствовал поиск, и это мы тоже исправили. Там была довольно хитрая навигация: наверху было меню с пятью пунктами. И как только появлялся новый продукт, он автоматом отправлялся в меню «прочее». И «прочее» в какой-то момент так разрослось, что найти там что-то стало довольно сложно.

Красивый дизайн — субъективная штука. Объективный показатель — цифры. После редизайна мы посмотрели на один из самых сложных наших продуктов — оформление потребительского кредита — и сравнили показатели из метрик. По потребительскому кредиту в новом дизайне конверсия на каждом шаге выросла на 5%, притом что сам процесс остался таким же.

Сделать дружелюбным

Мы понимали, что клиентам понадобится время, чтобы привыкнуть к изменениям, поэтому не стали резко переключать всех на новый интерфейс. Постепенно все мигрируют, но пока мы показываем и объясняем, как всё работает. Когда пользователь переходит со старой версии на новую, он видит мини-лендинг об основных изменениях.

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

Сделать доступным

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

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

Но дело не только в скринридере. В Сбербанке есть специальные гайдлайны, помогающие адаптировать продукт для клиентов с особенными потребностями, и они учитывают множество мелочей: от размера шрифта и возможности его увеличивать до контрастности. Коэффициент контрастности, например, должен составлять не менее 4,5:1, а для увеличенного текста — 3:1. Если какая-то команда выпускает продукт, который не соответствует принципам доступности, этот продукт не выходит в пром. Его просто отправляют на доработку — это красный сигнал на пути к любому релизу. Поэтому новая веб-версия просто не могла получиться недоступной.

На самом деле редизайн еще не закончен, и вот почему

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

Большой редизайн — сложная для пользователей история, многим из них придется долго привыкать к изменениям. Подробно об этом и о рабочем процессе мы рассказали в выпуске подкаста S++. Новую версию мы выкатили в том числе для того, чтобы бесконечно ее менять — все-таки никакие тестирования не заменят обратную связь от пользователей.

Редизайн был задуман прежде всего для того, чтобы веб-версию было легче менять. Новая версия построена на современных технологиях, которые позволят нам оперативно добавлять туда нужные функции и продукты. В новой версии мы реализовали независимую разработку, в которой участвует больше 100 команд. В среднем у нас около 35 релизов в месяц — команды постоянно выводят свои новые фичи и дорабатывают существующие. Например, если нам понадобится сделать проще и удобнее процесс оформления карты, мы просто обратимся к разработчикам и сделаем это. А вот менять что-то глобально нам пока не нужно.