Всем привет! На связи Маша Сафронова — дизайнер дебетовых счетов и карт. В этой статье я расскажу, как мы в Т-Банке сделали редизайн интернет-банка практически с нуля, с какими проблемами столкнулись в процессе адаптации мобильного приложения на веб и как их решали. А бонусом — что сделали бы по-другому, чтобы вы не набили наши шишки.
Часть первая, в которой мы понимаем, что будет непросто
Ноябрь 2022 года. В ответ на удаление приложений российских банков из сторов мы решили усилить развитие альтернативных каналов доступа к нашим услугам. Один из них — интернет-банк, или, другими словами, личный кабинет на сайте tbank.ru. Он и раньше был доступен для клиентов, но им мало кто пользовался, потому что отлично работало приложение.
Хотелось бы сказать, что сейчас будет чистенькая история успеха, но в процессе работы появилось очень много «но», поэтому у нас получилась история успеха, которой предшествовали ошибки и неудачи.
В начале работы мы столкнулись со сложностями:
Интернет-банком никто всерьез не занимался несколько лет. К нему и приложению был глобально разный подход — в дизайн-системе, коде и так далее, поэтому даже с точки зрения дизайна он не выглядел консистентно с приложением.
Часть функций, доступных в приложении, отсутствовала в веб-версии или работала хуже. Например, нельзя было посмотреть реквизиты карты, а авторизация напоминала полосу препятствий с вводом СМС-кода и пароля.
Исторически сложилось, что веб и приложение жили как две абсолютно разные системы, у которых были разные команды дизайнеров. И если приложением на тот момент занимались 60+ дизайнеров, то интернет-банком — только один. Единственный дизайнер личного кабинета не мог так же глубоко понять каждый продукт банка, как это делают дизайнеры приложения. Погружение потребовало нового подхода к распределению задач и сотрудничеству в команде, который занял много времени.
Подробности о переезде мобильных дизайнеров на веб — в докладе на нашем митапе.
Мы оказались в гонке со временем, работая при этом с ограниченными ресурсами дизайна и разработки в первую очередь.
Часть вторая, в которой мы делимся опытом редизайна и перекладывания приложения на веб
Мы стартовали. Сначала хотели сохранить старый дизайн и архитектуру и на них добавлять нужные функции. Кажется, все просто — из точки А перейти в точку Б. Быстро стало понятно, что в перспективе это только добавит проблем: старая архитектура не выдерживала всех наших хотелок, а дизайн давно требовал обновления.
В итоге мы потеряли часть драгоценного времени, но осенью наконец-то сформировали новую цель: мобильный веб должен максимально соответствовать приложению, десктоп — поддерживать систему с учетом своих особенностей.
Мобильную версию решили делать через progressive web app (PWA), и нашей главной целью было сделать ее максимально похожей на приложение, чтобы сохранить user experience. PWA хорошо работают, доступны прямо в браузере, не требуют установки и отдельных манипуляций для обновления, но предлагают почти все те же функции: например, пуш-уведомления.
При этом с десктопной версией было не все так просто. На всякий случай напомним, как выглядело «до».
На осень 2022 года казалось логичным сделать дизайн личного кабинета в соответствии с основным сайтом — на сером фоне, ведь интернет-банк является его частью. При этом мобильное приложение было сделано на белом — в итоге такое расхождение тоже было ошибкой, потому что не соответствовало нашей основной цели и помешало синхронизации дизайн-систем. Позже мы отошли от этого подхода, но об этом чуть позже.
Еще мы не хотели просто растягивать мобильные компоненты на десктопе, а стремились к органичному адаптиву, старались давать больше функций и контента. На тот момент это тоже было ошибкой: мы потратили слишком много времени на десктопную версию, которая по посещаемости уступала мобильной.
Может возникнуть логичный вопрос: почему мы стали делать десктопную версию вместе с мобильной? Наш ответ: таким образом мы стали тратить меньше ресурсов на поддержание очень разных версий сайта, хоть это и потребовало больше усилий в начале работы.
У нас не хватало подробной аналитики, поэтому мы не знали, какие функции работают хорошо, а какие нет. Мы решили на первом этапе, что не хотим пока терять текущие наработки — то, что уже и так было в старом личном кабинете, — а в дальнейшем сможем их лучше проработать.
Сначала мы набрасывали варианты десктопной версии личного кабинета в режиме свободного полета, без привязки к каким-либо ограничениям по навигации, функциям и количеству доработок. Было несколько неплохих вариантов, но все они ощущались как «не те». Потом мы начали накладывать ограничения, и они помогли проработать макеты лучше и приземлить их на реальный мир.
Чтобы учитывать различия между платформами, мы перерисовывывали каждый экран. Вот четыре пункта, которые помогли нам при адаптации приложения на веб.
Есть отличия паттернов мобильного веба от приложения. Например:
В вебе нет модальных стеков — шторки можно использовать, но нельзя накладывать друг на друга.
Статусбар не наследует цвет фона отдельного экрана, а его нужно настраивать отдельно.
Между десктопом и мобильным вебом должно быть прямое соотношение в плане модальности. Нельзя в мобильной версии сделать шторку, а на десктопе отдельную страницу с отдельным url.
В мобильном приложении больше вариантов взаимодействий жестами или с самим телефоном — например, переворачивание телефона для скрытия балансов. От этого мы, конечно, отказались, но все еще думаем, как было бы весело крутить монитор компьютера.
Панель браузера ограничивает видимую область, которая в приложении больше.
Дизайн-системы приложения и веба не синхронизированы, поэтому мы стремились эту разницу максимально сократить, взаимодействуя с командой дизайн-системы. Это был очень сложный, но нужный процесс: сначала мы слишком поздно поняли, что ресурса команды дизайн-системы не хватает, чтобы пересобрать и вылить в код компоненты, которые синхронизированы с приложением. Из-за этого дизайнерам личного кабинета приходилось с нуля отрисовывать и описывать компоненты, а команде разработки — с нуля разрабатывать их.
Затем мы не учли, что компоненты, которые максимально близки к приложению, были сделаны с учетом того, что они должны быть на белом фоне, а наш личный кабинет на тот момент был на сером. Так что были сложности еще и с переездом с серого фона на белый — для этого ребята из команды дизайн-системы даже написали отдельный плагин.
На вебе есть неавторизованная зона — это действия, которые может совершать любой пользователь, даже если у него нет нашей карты. Это, например, некоторые переводы. В приложении таких функций часто не было, поэтому какие-то экраны и функции мы придумывали с нуля.
Некоторые флоу, например авторизация, на вебе были гораздо сложнее и иногда напоминали страшный квест, после прохождения которого хочется забыться дня на три. Мы прошли через несколько кругов согласований, чтобы сделать авторизацию проще и быстрее.
Часть третья, в которой мы расскажем о результатах и набитых шишках
Немного похвалимся — вот что получилось сделать за два года:
В работе над вебом участвуют 80+ дизайнеров вместо одного.
В декабре 2022 у нас не было ни одного готового макета. На момент осени 2024 у нас выкачено на прод больше 100 экранов с новым дизайном.
Добавили ключевые функции: просмотр и копирование реквизитов карты, сканирование QR-кода, нативный контакт-пикер в переводах, вход по ПИН-коду, навигацию в виде таббара и многое другое. Все это значительно улучшило пользовательский опыт.
Перестроили процесс работы дизайнеров: теперь продуктовый дизайнер отвечает за свой кусочек не только в приложении, но и на вебе — так страницы стали прорабатываться гораздо глубже.
Благодаря таббару в мобильном вебе у нас выросла конверсия в разделы личного кабинета, которые раньше прятались за семью печатями.
А вот какие ошибки мы совершили:
Поздно начали работу над обновлением, только после удаления первого банка из сторов. В 2023 году сначала бросили все силы на обеспечение надежности и тащили новые функции на старую архитектуру и старый дизайн, но спустя время поняли, что это не позволит масштабироваться. Из-за этого потеряли драгоценное время.
Решали проблемы реактивно, а не проактивно, и это съело очень много времени и сил — начинали тушить пожар, когда он был уже большим, например как с синхронизацией дизайн-систем. Если бы мы потратили чуть больше времени на проработку стратегии работы команд дизайнеров, разработчиков, тестировщиков и аналитиков еще на самом старте проекта, сейчас все могло бы быть гораздо лучше.
Не сразу пересмотрели формат взаимодействия с продуктовыми командами и дизайнерами. Важно было привлечь аналитиков и дизайнеров как можно раньше, а не пытаться вывезти все на крошечной команде из одного продакта, пары дизайнеров и пары аналитиков, которым постоянно нужно было погружаться в различные продукты банка.
Много уделяли времени десктопной версии. Она важна, но наша основная аудитория — в мобильной версии, поэтому на старте проекта можно было не так сильно углубляться в добавление функций в десктопной версии.
А что дальше?
Продолжим инвестировать ресурсы в повышение производительности и скорости работы личного кабинета.
Продолжим синхронизировать дизайн-системы приложения и веба.
Часть команды перейдет к работе над продуктовыми инновациями, углубляя интеграцию и функциональность.
Редизайн интернет-банка был сложным, но невероятно полезным опытом. Мы смогли не только адаптировать мобильные решения для веба, но и существенно улучшить пользовательский опыт. Впереди у нас еще много работы, и мы надеемся, что наш опыт поможет вам делать свои проекты круче.