«Лавандовый банк, пожалуйста!». Зачем в «СберБанк Онлайн» цветные стены и какой оттенок выбирают чаще всего

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

Теперь клиентам доступен целый набор цветов: лунный, лаймовый, графитовый и другие. Меня зовут Ярослав Сизов и я расскажу, почему мы выбрали именно эти цвета и зачем вообще красить стены в банковском приложении.

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

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

Ещё совсем недавно у клиентов было не очень хорошее отношение к банкам в целом. К сожалению, так сложилось исторически. Обязательные походы в офис, подписание договоров, канцеляризмы, юридические тонкости: всё это никак не упрощало взаимодействие. Стало очевидно, что нужны изменения. Причём не только в приложении, но и в процессах внутри банка. В первую очередь нужно было облегчить коммуникацию с клиентом хотя бы на уровне формулировок — начать общаться простым языком. Где-то на этом этапе родились рекомендации по написанию текстов в интерфейсах, начала расти дизайн-система для iOS и Android, добавился иллюстративный язык в онбордингах, появились сами онбординги (как принцип рассказа о новых фичах). И только потом — кастомные заставки на вход в СберБанк Онлайн и смена цвета фона.

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

В случае с летним обновлением добавление новых цветов — это ещё и решение технологической задачи по расширению визуальной гибкости приложения. Грубо говоря, раньше был монолитный кусок UI, а теперь можно и так и этак. Кроме того, эти точечные наработки в перспективе приведут нас к полноценным цветовым схемам и тематическому оформлению. Для примера расскажу о прошлом кирпичике из этой серии: около года назад мы делали тёмную тему в приложениях на iOS и Android. Под эгидой этого нововведения мы перенесли на дизайн-систему тонну UI-компонентов.

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

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

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

Итак, необходимые доработки мы сделали и разобрались с типографикой: теперь она могла быть как светлой, так и тёмной. После этого мы добавили светлые фоны и подгадали так, чтобы это обновление вышло одновременно с другими важными изменениями на главном экране. В итоге клиенты получили другое общее впечатление от приложения. О нововведении мы рассказали в промо на главном экране и в канале «Что нового», который живёт внутри СберБанк Онлайн — он как раз для тех, кто следит за обновлениями. Кстати, эта одна из тех функций, благодаря которым мы в прошлом году взяли премию Red Dot Design Award, но об этом как-нибудь в следующий раз.

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

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

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

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

Любую из цветовых схем мы научили работать и в светлой, и в тёмной теме. Само собой, в тёмной теме цвета не такие акцентные и заметно приглушаются, если сравнивать со светлой.

Обещали цифры — делимся Нам очень интересно смотреть на клиентов и их привычки через призму приложения из топ-3 по аудиторным показателям в России. На конец августа MAU приложения СберБанк Онлайн — 70 млн. С момента релиза цветов мы могли наблюдать за тем, как пользователи применяют новую функцию и какие цвета выбирают. По итогам месяца первую строчку уверенно занял лавандовый (335 тысяч установок), вторую — розовый (265 тысяч). Сразу за ними идут лунный и лаймовый. Если смотреть и на те цвета, которые уже были в приложении, видно, что графит на 2-м месте (270 тысяч установок): дело явно в его нейтральности. Сейчас цвет в приложении меняют около 16 тысяч пользователей каждый день.

Ещё теперь нам известно, что среди пользователей фичи примерно в полтора раза больше женщин, чем мужчин: 678 тысяч против 463 тысяч. Гендерные стереотипы всё ещё сильны, и по самым популярным цветам картина выглядит так: почти каждый четвёртый мужчина ставит графит, а каждая четвёртая женщина — лавандовый. Это самые популярные цвета в своей демографической группе. Но при этом каждый 10-й мужчина выбирает розовый фон, а каждая 12-я женщина — графит. А вот клиентам старше 45 лет эта функция не особо нужна: их почти в 5 раз меньше, чем в других возрастных группах.

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

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

Начав развивать тему эмоционального банкинга с показа разных заставок для Москвы и Санкт-Петербурга, мы уже не могли остановиться. После набора фотографий природы появился Эрмитаж, потом коллаборация с Bang! Bang! Illustration, затем Третьяковская галерея, «Союзмультфильм», «Русские футуристы» и… Кажется, мы насытились на какое-то время темой искусства. Как выпускник художественного вуза (Строгановке привет), считаю свою социальную миссию хотя бы отчасти выполненной.

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

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

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

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

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