Концепт Tinkoff Bank X из прошлого

Я основатель команды DesginCode&Robots. Свой путь в ИТ я начинал с UI/UX-дизайна. В 2016 году для конкурса редизайна «Тинькофф» я разработал концепт веба и мобильного приложения, где за основу была взята идея с виджетами.

После релиза iOS 14 я решил сделать критический анализ своей работы пятилетней давности.

На тот момент было модно в названия сервисов добавлять X, чтобы было мнимое превосходство версии сервиса над прошлыми. Мол, мы сделали что-то особенное.

Так как я хотел выиграть в конкурсе и как минимум запомнится, то решил применить этот простой прием и в своей работе.

На главном экране после авторизации в сервисе показываем дашборд из виджетов, которые пользователь сам добавил. В данном случае видим виджеты банковских карт, целей, штрафы ГИБДД, затраты по категории, ипотека, долг по кредитке, оплата ЖКХ и акции.

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

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

Очевидно, не хватает 3 точки при наведении, что тоже спорное решение (на планшетах и телефонах нет hower эффекта).

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

Опять же не очевидно для пользователя и стоило придумать куда более понятное решение.

Навигация по сервисам расположена на второй полоске с контрастным фоном. Там же кнопка с добавлением новых продуктов и поиск.

В первом меню располагаем сторонние сервисы, которые не входят в наш дашборд (что там делают Госуслуги?).

Тем не менее сразу же дальше я допускаю ошибку — Службу поддержки засунул в иконку вопроса в правый верхний угол сайта.

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

Сейчас бы я Поддержку расположил во второй полоске меню с сервисами и добавил бы виджет. Я как клиент хочу отдельную самодостаточную страницу со всеми моими запросами в виде чата. А не вот это вот все.

UX страницы со счетами я решил кардинально не переделывать и он максимально приближен к старой версии сайта банка, который я и по сей день считаю более удобным текущей версии.

Единственное, добавил блок с Избранными платежами, график по приходу/расходу и блок с затратами.

Объективно не хватает информации по кэшбекам отдельным виджетом. Также стоило добавить виджеты по быстрому переводу средств по номеру телефона, карте и прочее.

Крайне безобразно сделан переключатель слева. Смотрю на него и хочется плакать. Даже для 2016 года это плохо.

Первый блок с автомобилем на фоне сделан не плохо. Стоит поправить немного UI цифр и отступов. Ты видишь свою цель, видишь цифры и идешь к цели.

Забавно, что в дизайне использовал Tesla Model X, а через 3 года купил Tesla Model 3. Статью об этом так же писал на vc.ru.

Страница с брокерским счетом выглядит не доработанным. Не понятно как будут выглядеть 15–20 акций клиента. Поэтому текущее решение смело может отправится на помойку.

Также я как клиент хочу сразу увидеть Избранные котировки виджетами на этом же экране, а не делать лишний клик в левом меню.

На данном экране я вижу то, что сейчас не хватает мне в 2к20 – нормальная лента с плитками акций, где добавил все за чем следишь и сразу видно что упало, а что поднялось.

Единственное раздражает, что только 3 колонки сетки используется для контента, а 1 используется для бокового короткого меню.

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

В данном случае я бы избавился от бокового меню точно.

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

Однако, рано или поздно появляются сервисы, которым будет тесно в гайдлайнах банка и им нужен собственный дизайн интерфейса.

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

Для 2016 года не плохо, ставлю себе твердую 6,5 баллов из 10.

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

Делаешь скрол, либо выбираешь в нужный сервис в верхнем баре.

Крайне ублюдские иконки в тап-баре. Видимо не стал тратить время на отрисовку и на поиск нормальных. За это минус.

Спорные карточки с фоновой картинкой с мало заметным текстом. В остальном белые карточки на темном фоне смотрятся не плохо и не выбиваются из стиля.

Вторую иконку отдал под операции банка. Не понятно какая тут выбрана карта или счет. В рамках банка экран имеет место быть. В рамках «суперприложения» возникают вопросы.

Например, где отображаются переводы по счетам компании или по брокерскому счету? Если на этом экране, то это каша. Если отдельно, то это не удобно и дополнительные действия.

Лучшее решение в данном случае убрать данную иконку из тап бара и вставить вместо нее иной функционал. А информацию о счете перенести на экран по нажатию на карточку.

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

Я всегда питал трепет к «умному» поиску по типу Spotlight, Alfred или Runner, где можно в одной строке делать множество действий. Поэтому поиск я расположил именно на первом экране.

В данном случае поиск работает только по расходам по категории «март» и «рестораны». Не раскрыл потенциал умного поиска как фичу на полную.

Отличный экран с точки зрения UI. Приятные цвета и контрасты. По UX есть вопросы.

Не понятно зачем показывать проценты акций в своем портфеле. Эта информация нужна 1 раз максимум после покупки/продажи новых бумаг. Выглядит красиво, но бесполезно для первой 1/3 экрана.

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

Пользователям придется все время делать скроллы вниз, чтобы посмотреть свой портфель, что будет бесить постоянно.

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

Лучший вариант было сделать так же, как это сделано в текущей версии приложения Тинькофф Инвестициях: при нажатии на котировки открываем отдельный экран с графиком, операциями, новостями и прочие.

Дополнительное меню сделано в стиле Slack. Справа в плашке избранные переводы, для повторных операций. По факту можно сделать перевод за 2-3 тапа, что крайне быстро, сравнивая с текущим приложением Тинькофф Банка.

Мобильное приложение с точки зрения UI крайне не плох спустя 5 лет. Однако, данная версия точно не вышла бы в продакшен из-за серьезных проблем в UX. Тем не менее для конкурса не плохо – 7.5 баллов из 10.

Кстати, у меня есть Телеграм-канал по инвестициям, если кому интересно буду рад вас там видеть.

#тинькофф #интерфейсы