(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(93857963, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(93857963, 'hit', window.location.href);

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

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

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

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

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

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

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

Так выглядит старая веб-версия Сбербанк Онлайн

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

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

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

А это — веб-версия Сбербанк Онлайн после редизайна

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

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

Поиск помогает найти что угодно: от нужного продукта до платежного поставщика

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

«Судя по аналитике и метрике, клиенты активно пользуются поиском, причем многие — как альтернативной навигацией. Они ищут сервисы, маленькие продуктовые подсервисы, например «как сменить пин-код карты».

Татьяна Крылова, владелец продукта веб Сбербанк Онлайн

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

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

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

Пока в Сбербанк Онлайн два персонажа. Это — один из них

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

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

Веб-версия Сбербанк Онлайн и мобильное приложение Сбербанк Онлайн — это по сути один и тот же продукт, но каналы коммуникации разные. И для нас важно было сохранить те паттерны, которые уже сложились у пользователей, чтобы они, переходя из одного канала в другой, не путались и знали, что меню с их счетами выглядит определенным образом, навигация схожая и все разделы имеют одинаковые точки входа. Также мы стремимся к бесшовным процессам, чтобы пользователь мог в мобильном приложении подать заявку на кредит, а в веб-версии его получить — или наоборот.

Евгений Семёнов, Design Lead веб-версии Сбербанк Онлайн

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

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

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

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

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

Дизайн — субъективная штука, но ориентируемся мы прежде всего на удобство. И в нашем дизайне на самом деле много логики и математики, много цифр. Дизайнер продукта — как режиссер. В фильме есть музыка, освещение, цветовая гамма — за счет этого получается цельная картина. Так и дизайнер: он создает общее впечатление. Важно всё: цвет, форма, пространство, отступы, навигация».

Евгений Семёнов, Design Lead веб-версии Сбербанк Онлайн

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

0
93 комментария
Написать комментарий...
Никита Назаров

Ну, я выскажусь первым.
Уже много лет «в народе» идёт дискурс на тему неповоротливости Сбербанка — в том числе шаблонности ваших решений.

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

Я не дизайнер, но таково моё субъективное мнение 🤷‍♂️

Ответить
Развернуть ветку
Сергей Икрин

Я ничего не понимаю в дизайне, но осуждаю!

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
90 комментариев
Раскрывать всегда