«Бланк» запустил веб-кабинет, которого не должно было быть
История про появление веб-версии у банка, который утверждал, что бизнес целиком можно вести из мобильного приложения.
(Почти) мобильный Бланк
Мы начинали как мобайл-онли банк и считали это своей фишкой. Даже снимали утрированную рекламу, где герои используют ноутбук в качестве разделочной доски. А потом провели исследование и выяснили: клиентам действительно нравится приложение Бланка, но некоторым всё же не хватает веб-версии.
Выполнять банковские операции с телефона не всегда комфортно, если твоя компания состоит не только из тебя. Когда к процессу подключается бухгалтер или бизнес-партнёр, может потребоваться веб-кабинет и возможность работы с разными доступами. Кроме того, решать задачи на большом экране бывает намного удобнее: в одной вкладке сверстал отчёт в гугл-доке, в другой — пообщался с кофаундером, а в личном кабинете провёл банковские операции.
Но сам по себе личный кабинет Бланка ещё не решает запросы предпринимателей. Он должен быть простым и не требовать усилий, чтобы вникнуть в интерфейс. Например, как наше мобильное приложение.
Чем вдохновлялись
Мы решили, что веб-версия должна выглядеть так же чисто и функционально, как приложение Бланка, и не напоминать по виду и функционалу CRM для складских помещений.
При её проектировании мы оптимизировали все дизайн-системы в одну — сохранили не только функционал приложения, но и дизайн. Это дало не только преимущество при разработке, но самое главное — клиентам не пришлось разбираться с новинкой: и продукт знакомый, и картинки уже видели, и с системой не нужно мучиться.
Сравним, как это выглядит в мобильном приложении:
И как — в веб-кабинете:
Перенести визуальный язык бренда на продукт — всегда интересная и непростая задача. Для личного кабинета главное — функциональность и удобство, а нам нужно было сделать так, чтобы при одном взгляде клиент видел ДНК Бланка
В создании брендинга нам помогало агентство ONY. Бланку важно, чтобы бренд выделялся среди конкурентов, привлекал аудиторию новаторов, был более смелым и минималистичным, чем существующие банки. Поэтому мы выбрали дизайн на основе швейцарского стиля:
Отказ от центрированной вёрстки
- Особое внимание к типографике, использование сверхкрупных кеглей
- Модули, разделительные линейки, ячейки и таблицы для вёрстки разных форматов
- Минималистичные иллюстрации (используем четверть окружности как основной элемент модульной графики)
- Работа с визуальным ритмом в композиции
- Минимализм в форме, цвете и шрифте
Josef Müller-Brockmann, 1957.
Швейцарский стиль, а именно необрутализм, помог нам создать и юзер-френдли продукт — системность и чёткие рамки сохраняют узнаваемость бренда вне зависимости от формата и носителя. Плюс благодаря этому стилю мы выглядим нетипично для банковского контекста.
Швейцарская школа предлагает решения для оптимизации дизайн-процесса. Благодаря им мы за несколько шагов можем «раскатывать» мобильные макеты на широкие экраны. Освободившееся время команда может тратить на проведение глубинных интервью, UX-тесты или классную анимацию — то есть делать веб-кабинет ещё удобнее
Теперь удобно делегировать
Перенести мобильное приложение в компьютер и сложить руки — не то чтобы достижение, поэтому внутри мы создали разные фичи, например ограниченный уровень доступа. Он облегчает предпринимателям работу с операционными задачами, дает возможность подключить для совместной работы своего коллегу. Как это работает?
Если все финансовые вопросы решаются в мобильном приложении, то и отвечает за них только один человек. Этого может быть достаточно для ИП, но ограничится рост и масштабирование компании. Веб-версию личного кабинета с ограниченным доступом можно смело делегировать бухгалтеру, где он будет выставлять счета, оплачивать налоги и выгружать выписки для отчётов. Частичный доступ помогает предпринимателю и одновременно не заставляет его делиться личными суммами и расходами с сотрудниками.
В первую очередь мы разрабатывали веб-кабинет как раз как рабочий инструмент для бухгалтеров. Предприниматель, скорее всего, будет продолжать решать вопросы с телефона, делегировав работу по выпискам, счетам и налогам. Поэтому в десктопе мы убирали все функции, которые бухгалтерам не так важны.
А удобно ли клиентам?
Прислушаться к пользователям и запустить веб-кабинет оказалось правильным решением: отзывы о новом личном кабинете — хорошее тому подтверждение.
Трудностей в использовании личного кабинета в компьютере не возникло. Разобрался быстро. Иногда бывают в других банках неудобные веб-версии, где много ненужной информации и можно запутаться. У вас всё легко и просто
Выписки раньше приходилось мне лично через приложение скачивать и отправлять, а с появлением веб-кабинета и доступа бухгалтеру меня больше не будут дёргать
У нас с клиентами доверительные отношения, и они готовы честно делиться своим опытом, чтобы дальнейшие разработки соответствовали их желаниям.
Иконки потоков увеличиваются пропорционально увеличению экрана без ограничения по ширине окна браузера. На компьютере значки получаются суперогромными — кажется, это перебор
С появлением веб-кабинета всё стало гораздо удобнее. Теперь я могу самостоятельно снимать выписки, имею доступ к счёту, как следствие беспрепятственно делаю платежи. Мне всё очень нравится
Итог
Нам удалось создать веб-кабинет в рекордные сроки — всего за 4 месяца. Параллельно делали и MVP, и компоненты новой дизайн-системы, а также учитывали, чтобы дизайн продукта и маркетинговых коммуникаций был единым и узнаваемым.
Но даже после запуска десктопа мы остались мобайл-фёрст. Большинство банков изначально создавали веб-кабинеты для компа, а потом пытались запихнуть весь функционал в маленький телефон. Мы же создали сервис сразу под телефон без лишних деталей, а потом раскатали это на десктоп: поэтому у нас нет архаичных решений.