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

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

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

Концепт Тинькофф Банк X Халиков Руслан

Почему Тинькофф Банк Х?

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

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

Веб-версия банка

Дашборд с виджетами Халиков Руслан

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

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

Дашборд с большими виджетами Халиков Руслан

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

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

Большой виджет дебетовой карты Халиков Руслан

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

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

Навигация Халиков Руслан

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

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

Поддержка и оповещения Руслан Халиков

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

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

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

Счета Tinkoff Bank X Халиков Руслан

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

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

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

Дизайн страницы с целями Tinkoff Bank X Халиков Руслан

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

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

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

Тинькофф Инвестиции концепт Халиков Руслан

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

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

Тинькофф Инвестиции концепт Руслан Халиков

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

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

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

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

Итог

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

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

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

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

Мобильная версия банка

Мобильное приложение Tinkoff Bank X Руслан Халиков

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

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

Мобильное приложение Tinkoff Bank X Руслан Халиков

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

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

Мобильное приложение Tinkoff Bank X Руслан Халиков

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

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

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

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

Мобильное приложение Tinkoff Bank X Руслан Халиков

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

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

Мобильное приложение Tinkoff Bank X Руслан Халиков

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

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

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

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

Мобильное приложение Tinkoff Bank X Руслан Халиков

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

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

Мобильное приложение Tinkoff Bank X Руслан Халиков

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

Мобильное приложение Tinkoff Bank X Руслан Халиков

Итог

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

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

{ "author_name": "Ruslan Khalikov", "author_type": "self", "tags": ["\u0442\u0438\u043d\u044c\u043a\u043e\u0444\u0444","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 16, "likes": 18, "favorites": 35, "is_advertisement": false, "subsite_label": "design", "id": 176973, "is_wide": true, "is_ugc": true, "date": "Tue, 24 Nov 2020 23:55:05 +0300", "is_special": false }
0
16 комментариев
Популярные
По порядку
Написать комментарий...
20

Ну ты не плох) сначала сделал концепт, потом, через 5 лет, на этом же концепте делаешь статью тут - безотходное производство)

Ответить
6

Ужас. Веб-версия с виджетами (как с большими, так и с маленькими) больше похожа на дашборд Мыса Канаверал, в котором полэкрана почему-то занимает показатель уровня жидкости в мочевике пилота, а показатели оставшегося ракетного ракетного топлива, высоты и времени со старта зачем-то сделаны максимально незаметными. Даже 5 лет назад подобные дашборды были бы актуальны в кабинете какой-нибудь СРА платформы или для сбора метрик какого-нибудь финтех стартапа. Мне кажется оценки "не плохо" и "7.5 из 10" здесь абсолютно неприменимы.

Ответить
0

Согласен

Ответить
5

Спустя 5 лет дизайн тянет на 7 из 10, это говорит о многом! Посмотреть бы работы других конкурсантов и сравнить. Руслан силен в аналитике

Ответить
3

Банк Х от Руслана Х 🙂

Ответить
3

Представьте женщину 60 лет, которая поставила банк на телефон, сможет она разобраться? На экране с большими виджетами слишком много информации имхо, глаза разбегаются. Там 4 больших виджета и между ними по 2 маленьких, это путаница. Сбер вот недавно тоже переделал свой интернет-банк, там где были просто тексты, стали фоны/ картинки / фичи. Очень геморно стало, да еще и грузится дольше, да еще и через какой-то "имиджевый" экран-заставку. 

Ответить
2

А что показывает график акций Apple? Какой в нем смысл, он же нечитабелен?

Ответить
–1

Согласен, херня полная

Ответить
–3

К UI мобильной версии нареканий нет, а сайт на уровне десятилетней давности. Учитесь у Гугла, материальный и минималистичный дизайн должен быть как ГОСТ. Разрешения экранов растут и универсальная адаптивность это приоритетная основа для грамотного интерфейса.

Ответить
7

учится у гугла это самый пиздецовый совет

Ответить
1

Как по мне UI на скринах веб сайта в посте это типичный "детский сад". Никаких толковых идей по дэшборду, хотя горизонт безграничен. Автор насмотрелся админ панелей на Themeforest, не осознавая специфики UX онлайн банкинга. Большинство "веб-дизайнеров" именно в рунете не понимают, что по-настоящему серьёзный веб дизайн тот, который нейтрален и его абсолютно не видно. Среди банков РФ более менее нормальный личный кабинет только у Райффайзена.

Ответить
2

телега кстати крутая у человека (неожиданно) 

Ответить
0

Автор не может в -тся -ться, зато купил теслу :/ се ля ви

Ответить
0

Если хочешь, могу на деньги сдать ЕГЭ. У кого будет больше баллов, тот получит куш. Только спойлер: я тебя порву

Ответить
–1

Мм, логика? Человек не может ошибаться в твоем мире?

Ответить
0

Комментарий удален по просьбе пользователя

Ответить

Комментарии

null