(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 комментария
Написать комментарий...
Аккаунт удален

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответить
Развернуть ветку
S.Z

Прям вижу, как ты хотел ему ответить, начал просматривать профиль, разглядывать фото. О, майка! Тебе хана!

Ответить
Развернуть ветку
Enzo Enzo

Надеть!

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