Как мы решились на большой редизайн веб-версии «Сбербанк Онлайн» и что у нас получилось
В апреле мы впервые за семь лет полностью обновили веб-версию «Сбербанк Онлайн». Старый вариант еще работает, поэтому оценить масштаб изменений легко. В общей сложности мы потратили на редизайн год: разобрались с legacy-кодом, разработали концепт дизайна и гайдлайны, перевели веб-версию на новые технологии и сделали так, чтобы сервисы от любой из команд можно было легко вывести на клиентов.
Мы обязательно продолжим менять веб-версию (и занимаемся этим прямо сейчас, пока вы читаете этот текст), а пока расскажем, из-за чего решились на такие большие изменения и почему новая версия выглядит именно так.
Кому нужен сайт, если есть приложение
Скорее всего вы хоть раз слышали о том, что веб умирает. Но цифры говорят, что это не так. Мобильным приложением Сбербанк Онлайн сейчас ежемесячно пользуются 60 млн человек, а веб-версией — 10 млн человек, и это очень много. После релиза мобильного приложения мы видели отток части пользователей туда, но при этом аудитория уже несколько лет подряд остается стабильной. У приложения появилась своя новая аудитория, часть перешла туда из веб-версии, а примерно 5 млн человек пользуются и тем, и другим — веб никуда не исчез. Сейчас там среднем совершается 40–45 млн операций ежемесячно.
Этому есть два объяснения. Во-первых, как мы уже сказали, многие клиенты используют и сайт, и приложение — но делают это в разных ситуациях. Мобильное приложение — для простых операций (например, чтобы перевести кому-то деньги или пополнить баланс телефона). А для крупных и сложных операций предпочитают заходить в интернет-банк. Там оплачивают счета, где нужно вводить реквизиты, берут кредиты и открывают крупные вклады. Людям хочется «спокойно сесть за ноутбук и разобраться в вопросе». С инвестиционными продуктами, кстати, тоже чаще работают в веб-версии. Данные говорят о том, что веб — это иной тип поведения и другая зона доверия. Средний чек по платежу там в 2,5 раза выше, чем в приложении. Во-вторых, довольно большая доля пользователей веб-версии — люди в возрасте старше 45 лет, и многие из них предпочитают пользоваться интернет-банком, а не мобильным приложением.
Интернет-банк у Сбербанка появился еще в 2008 году (тогда он назывался «Электронная Сберкасса»!), а последний серьезный редизайн мы провели в 2013 году. Несмотря на постоянные апдейты, интерфейс сильно устарел, а добавлять новые продукты и функции стало сложнее — нужны были технологии посовременнее.
Если сильно упростить концепцию, от которой мы отталкивались, обновленная веб-версия должна была стать удобной, дружелюбной и доступной. Вот как мы решали эти задачи.
Сделать удобным
Предыдущая веб-версия не была адаптивной — она выглядела хорошо только на десктопе. И это было проблемой, потому что 20% пользователей заходят в интернет-банк Сбербанк Онлайн с телефона. Сначала у нас была адаптивная линейка типографики, и мы предполагали, что будем делать компоненты разного размера в зависимости от устройства. Потом мы смогли всё правильно посчитать и сделать хорошую сетку для всех разрешений. Мы проверили ее на всех брейкпоинтах: от самых маленьких до самых больших — от четвертого айфона до гигантских десктопов.
Сейчас у нас есть дизайн-система с единым набором компонентов, которые одинаково себя ведут на всех устройствах. Это важно, в числе прочего, и потому, что сотрудники в отделениях пользуются планшетами. И с единым интерфейсом им проще показывать клиентам, как всё работает. Придя домой, клиент откроет веб-версию и увидит точно такой же интерфейс — ему будет понятно, как повторить это действие самому.
Еще в старой версии отсутствовал поиск, и это мы тоже исправили. Там была довольно хитрая навигация: наверху было меню с пятью пунктами. И как только появлялся новый продукт, он автоматом отправлялся в меню «прочее». И «прочее» в какой-то момент так разрослось, что найти там что-то стало довольно сложно.
Красивый дизайн — субъективная штука. Объективный показатель — цифры. После редизайна мы посмотрели на один из самых сложных наших продуктов — оформление потребительского кредита — и сравнили показатели из метрик. По потребительскому кредиту в новом дизайне конверсия на каждом шаге выросла на 5%, притом что сам процесс остался таким же.
Сделать дружелюбным
Мы понимали, что клиентам понадобится время, чтобы привыкнуть к изменениям, поэтому не стали резко переключать всех на новый интерфейс. Постепенно все мигрируют, но пока мы показываем и объясняем, как всё работает. Когда пользователь переходит со старой версии на новую, он видит мини-лендинг об основных изменениях.
Новая веб-версия стала намного более дружелюбной и человечной, в том числе благодаря эмоциональным мелочам. Например, мы смягчили цветовую гамму и начали подсвечивать сообщения определенными цветами: если сообщение подсвечено зеленым, значит, всё в порядке, если фиолетовым — сайт хочет сообщить что-то важное и на это стоит обратить внимание. Еще мы добавили персонажей, которые помогают понять, что происходит.
Сделать доступным
У Сбербанка довольно много пользователей с потребностями в специальном обслуживании. Слабовидящим и незрячим людям нужен удобный и понятный интерфейс, и при доработке мобильного приложения Сбербанк Онлайн мы это учли. Но с веб-версией было сложнее: быстро внедрить некоторые инструменты в старую версию было невозможно технически. Один из наших слабовидящих пользователей несколько лет назад создал петицию, в которой рассказал, что пользоваться сайтом Сбербанк Онлайн таким, как он, очень сложно. Как только началась работа по редизайну, мы пригласили его в команду тестировщиков. Он впервые за несколько лет обновил петицию: написал, что сайт наконец-то стал удобным для незрячих пользователей. Во время тестирования он сказал нам, что теперь узнаёт интерфейс, к которому привык в мобильном приложении.
Пользоваться сайтом помогает скринридер — технология, которая «озвучивает» происходящее на экране. Старая веб-версия была плохо размечена, и вместо важной для пользователя информации скринридер зачитывал лишние теги. Мы сделали грамотную разметку, которая игнорирует теги разработчиков, и теперь скринридер, по сути, озвучивает интерфейс. Благодаря этому пользователь в любой момент времени понимает, что происходит и куда нужно нажать. Наши незрячие тестировщики проверили абсолютно всё, потратили на тестирование новой версии много времени и очень нам помогли.
Но дело не только в скринридере. В Сбербанке есть специальные гайдлайны, помогающие адаптировать продукт для клиентов с особенными потребностями, и они учитывают множество мелочей: от размера шрифта и возможности его увеличивать до контрастности. Коэффициент контрастности, например, должен составлять не менее 4,5:1, а для увеличенного текста — 3:1. Если какая-то команда выпускает продукт, который не соответствует принципам доступности, этот продукт не выходит в пром. Его просто отправляют на доработку — это красный сигнал на пути к любому релизу. Поэтому новая веб-версия просто не могла получиться недоступной.
На самом деле редизайн еще не закончен, и вот почему
Концепт, над которым прямо сейчас работает команда, отличается от того, что можно увидеть в новой версии сайта. Да, глобальный редизайн мы провели, но работа на этом не заканчивается. Мир продуктовой разработки сместился с крупных релизов в сторону итерационной работы над проектами, и теперь мы продолжим улучшать веб-версию.
Большой редизайн — сложная для пользователей история, многим из них придется долго привыкать к изменениям. Подробно об этом и о рабочем процессе мы рассказали в выпуске подкаста S++. Новую версию мы выкатили в том числе для того, чтобы бесконечно ее менять — все-таки никакие тестирования не заменят обратную связь от пользователей.
Редизайн был задуман прежде всего для того, чтобы веб-версию было легче менять. Новая версия построена на современных технологиях, которые позволят нам оперативно добавлять туда нужные функции и продукты. В новой версии мы реализовали независимую разработку, в которой участвует больше 100 команд. В среднем у нас около 35 релизов в месяц — команды постоянно выводят свои новые фичи и дорабатывают существующие. Например, если нам понадобится сделать проще и удобнее процесс оформления карты, мы просто обратимся к разработчикам и сделаем это. А вот менять что-то глобально нам пока не нужно.
Почитал комменты, немного подумал, лайкнул статью просто из принципа.
На такие компании как сбер, почта россии, ржд, пиздеть всегда просто и приятно, потому что много кто тебя поддержит. И люди так привыкли к этому, что попросту не готовы положительно на что-то реагировать.
А ещё люди напрочь не готовы воспринимать что-либо дифференцировано — если %компания% когда-то слелала / делает что-то плохо, то у человека почему-то не укладывается в голове, как что-то другое могли сделать хорошо.
Это не инерция мышления, это Сбер и сейчас всё делаает не для людей, как и 10 и 20 лет назад.
например?
Например мобильное приложение в 2020 хуже ТКС-2013, например Сберонлайн 2020 хуже ПСБ-Онлайн- 2006, Банк-клинт вообще привет из СБС-Агро 90-х. Это не моя субьективная оценка внешнего вида, это результат пользовательского опыта работы в этих продуктах, на любой чих в дистанционном канале обслуживания надо бежать в отделение, это бред.
Чёт ничего конкретного так и не дал
Я могу конкретно, но это надолго и с матом, посмотрите на картинку моего профайла здесь. Я даже не представляюсь техподдержке Сбера, они меня узнают в любом канале обслуживания.
Чёт ничего конкретного так и не дал
Ну хотя бы выпустить карту.
Карта перевыпускается сама, этого нельзя предотвратить. И сама едет в отделение, где ее получал. Хоть ты в другом районе давно живешь (или даже городе).
Заказать привезти карту в отделение поближе нельзя (что уж говорить о курьерах). Надо заказывать перевыпуск, там говорится прямо в интерфейсе.
Ок, время есть, старая карта еще действует, заказываешь перевыпуск. Старая в этом момент блокируется (ЧТО?!), а перевыпущенная карта ОПЯТЬ едет в старое отделение, потому что новый адрес нельзя указать.
Звоню по номеру 900, говорю, разблокируйте карту, но нет, разблокировать уже нельзя. Говорю, давайте хотя бы адрес новый укажем. Нет, когда появится перевыпущенная в мобильном банке, тогда звоните. Примерно через 2 дня.
Бред, место выпуска и перезапуска карты всегда можно было выбирать, даже в самом приложение можно выбрать пункт выдачи карты.Про блокировки выпуска карты вообще бред) назовите мне хоть 1 банк который не блокирует карту при ее перевыпуска. Хейт ради хейта
Вы не допускаете, что это ваше "хуже-лучше" может быть ошибочным мнением? как по мне - мобильное приложения сбера весьма удобно и функционально, хотя бизнес-онлайн сберовский - это ужас-ужас...
Я профессиональный банковский технолог и пользователь продуктов розничных и корпоративных рынков.
Я не технолог, но пользователь продуктов розничных и корпоративных рынков и мое лично мнение - мобильный банк у сбера хороший.
А я вам свой недавний опыт расскажу. Заехал к судебным приставам, чтобы узнать, где деньги. Они с отрят в свой чудо-xml и говорят: да вот, положили. Ну я такой на измену сел, может не тот счет дал приставам и теперь деньги ищи-свищи?
Выхожу на улицу, открываю приложение - нет пополнений от ФССП, открываю онлайн-банк, играю с фильтрами - нет начислений. Звоню в поддержку, говорю так мол и так девушка, пока я в метро не вошел, посмотори, платило ли мне кто из государства? Нет говорит, ниче не вижу, я такая же слепая, как и вы. Идите в отделение, там мож найдут.
Приезжаю к компьютеру, смотрю смотрю тщательно на каждую транзакцию - есть родимые денежные средства, только без поля Плательщик.
И таких историий у меня много, хотите расскажу, как мне звонили из Сбера, представившись начинающим стартапом, чтоб нахаляву права на код купить?
Вы путаете мягкое с теплым.
Я вам говорю, что приложение сбера удобное, а не «сбер отличный банк».
Сбер как банк паршивейший даже на премиум тарифах, тут нет предмета спора.
Рабочие расчетные средства держу в альфе (приложение у них так себе) и в тиньке. Сбер - только для экстренных случаев.
Приложение Сбера это дно: попробуйте приложить скриншот или фотку в чате поддержки (пока они и её не заменили на дурачка-бота).