«Бланк» запустил веб-кабинет, которого не должно было быть

История про появление веб-версии у банка, который утверждал, что бизнес целиком можно вести из мобильного приложения.

Интерфейс личного кабинета Бланка
Интерфейс личного кабинета Бланка

(Почти) мобильный Бланк

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

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

Но сам по себе личный кабинет Бланка ещё не решает запросы предпринимателей. Он должен быть простым и не требовать усилий, чтобы вникнуть в интерфейс. Например, как наше мобильное приложение.

Чем вдохновлялись

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

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

Сравним, как это выглядит в мобильном приложении:

Интерфейс мобильного приложения Бланка
Интерфейс мобильного приложения Бланка

И как — в веб-кабинете:

Интерфейс личного кабинета в веб-версии Бланка
Интерфейс личного кабинета в веб-версии Бланка

Перенести визуальный язык бренда на продукт — всегда интересная и непростая задача. Для личного кабинета главное — функциональность и удобство, а нам нужно было сделать так, чтобы при одном взгляде клиент видел ДНК Бланка

Ольга Струзберг, продуктовый дизайнер в Бланке

В создании брендинга нам помогало агентство ONY. Бланку важно, чтобы бренд выделялся среди конкурентов, привлекал аудиторию новаторов, был более смелым и минималистичным, чем существующие банки. Поэтому мы выбрали дизайн на основе швейцарского стиля:

  • Отказ от центрированной вёрстки

  • Особое внимание к типографике, использование сверхкрупных кеглей
  • Модули, разделительные линейки, ячейки и таблицы для вёрстки разных форматов
  • Минималистичные иллюстрации (используем четверть окружности как основной элемент модульной графики)
  • Работа с визуальным ритмом в композиции
  • Минимализм в форме, цвете и шрифте
<p>Josef Müller-Brockmann, 1957.</p>

Josef Müller-Brockmann, 1957.

Josef Müller-Brockmann, 1959.
Josef Müller-Brockmann, 1959.
Markus Löw, 1967.
Markus Löw, 1967.

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

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

Алексей Волков, лид продуктового дизайна в Бланке

Теперь удобно делегировать

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

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

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

Интерфейсы личных кабинетов Бланка в мобильном приложении, планшете и веб-версии
Интерфейсы личных кабинетов Бланка в мобильном приложении, планшете и веб-версии

А удобно ли клиентам?

Прислушаться к пользователям и запустить веб-кабинет оказалось правильным решением: отзывы о новом личном кабинете — хорошее тому подтверждение.

Трудностей в использовании личного кабинета в компьютере не возникло. Разобрался быстро. Иногда бывают в других банках неудобные веб-версии, где много ненужной информации и можно запутаться. У вас всё легко и просто

Андрей, клиент Бланка

Выписки раньше приходилось мне лично через приложение скачивать и отправлять, а с появлением веб-кабинета и доступа бухгалтеру меня больше не будут дёргать

Тимур, клиент Бланка

У нас с клиентами доверительные отношения, и они готовы честно делиться своим опытом, чтобы дальнейшие разработки соответствовали их желаниям.

Иконки потоков увеличиваются пропорционально увеличению экрана без ограничения по ширине окна браузера. На компьютере значки получаются суперогромными — кажется, это перебор

Дмитрий, клиент Бланка

С появлением веб-кабинета всё стало гораздо удобнее. Теперь я могу самостоятельно снимать выписки, имею доступ к счёту, как следствие беспрепятственно делаю платежи. Мне всё очень нравится

Виктория, бухгалтер одного из клиентов Бланка

Итог

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

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

7575
98 комментариев

Аутентификацию/авторизацию делает внутренняя команда?
Негативные сценарии явно не все отработаны.

Я не ваш клиент.
- Ввела в форме входа в личный кабинет номер телефона — никакого информинга, что я не ваш клиент, никакого предложения стать вашим.
- Мне пришел код подтверждения по sms! А не должен был. Вы денег, кстати, на sms-ку потратили.
- Кнопка «войти» была активна. По нажатии на нее — девственно белый экран. Без ничего, как говорится. Это объяснимо, ведь я не ваш клиент, куда меня логинить. Но засечь и отработать это нужно было три шага назад.

(Мы специализируемся на аутентификации/авторизации для банков в том числе, рефлекторно пошла смотреть, как у вас сделано :) )

23

Конечно не все сценарии отработали, иначе бы запустили веб-лк через год :) Корнер-кейсы будем постепенно допиливать. Все что вы обозначили не мешает работе наших клиентов, а новые пользователи через личный кабинет точно счета не открывают :)

6

Не переживайте, они за ~3 рубля получили ваш номер. Позже будет рассылка😁

4

Видимо это такой прикольчик от брута. чтобы не чекали номера на регу в банке.

2

Дизайн не плох.
Выглядит неплохо.

16

Неплохой комментарий

11

Чо за бланк?

10