Мобильное приложение онлайн-банка Link Bank

Контекст

Учебный проект на курсе UPROCK под руководством куратора. Link Bank — мобильный банк для повседневных задач: переводы, платежи, карты и контроль расходов.

Постановка задачи

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

Моя роль

Весь процесс — от интервью до финальных макетов — прошёл сам, решения защищал на ревью с куратором.

Результат

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

4

Интервью с пользователями

5

Банков в анализе

150

Финальных экранов

2. Исследование аудитории

Начал с интервью

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

Ценят простоту

Высокие оценки ставят не за тарифы, а за то, что нужная операция находится сразу.

Кэшбэк непрозрачен

Непонятно, за какие покупки он начислен и когда выбирать категории — разбираться нет времени.

Поддержка отвечает долго

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

Неожиданные условия

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

Пять персон

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

Работы, ради которых открывают банк

Срочно оплатить ЖКУ, скинуться в кафе, быстро перевести родственникам, в конце месяца понять, куда ушли деньги. Эти сценарии и легли в основу MVP: переводы, платежи и аналитика расходов.

3. Конкуренты и функции

Функциональный анализ

Прошёл путь пользователя в пяти банках: Альфа, Т-Банк, Сбер, OZON Банк и МТС Банк. Каждую функцию — от регистрации до заказа карты — сравнил с тремя лидерами и оценил её ценность от 1 до 5. В MVP ушли только функции с оценкой 4–5: итоговый список справа.

CJM перевода по номеру

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

Карта приложения

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

4. Визуальная концепция

Первая попытка главной

Начал с тёмной темы и лаймового акцента, затем перенёс идею на светлый фон. Каждая итерация добавляла плашек, и баланс с картами терялся среди промо и витрины.

Вторая попытка

Собрал референсы и пересобрал иерархию: баланс, карты и быстрые действия — в синей шапке, сервисы — на светлом полотне ниже. Этот вариант и довёл до финала.

Дизайн-система

Типографика на SF Pro, цвета текста, фонов и элементов для светлой и тёмной темы, системные цвета ошибок и успеха. На этих токенах собраны обе темы.

5. Главная

Всё главное на первом экране

Баланс, карты и быстрые действия — в шапке. Ниже поиск по приложению, кэшбэк и расходы, накопления, витрина продуктов и банкоматы на карте. Поиск находит не только операции, но и действия: «оформить кредитную карту», «выписка».

Тёмная тема

Та же структура на тёмных токенах дизайн-системы — без отдельной вёрстки экранов.

6. История операций и аналитика

Куда ушли деньги

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

7. Платежи и переводы

Перевод по номеру

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

8. Личный кабинет

Профиль и безопасность

Телефон, почта, документы и персональные данные собраны в одном месте. В безопасности — вход по Face ID, привязанные устройства, смена кодового слова и кода входа с подтверждением по СМС. Отдельная кнопка «Сообщить о мошеннике» отправляет данные подозрительного номера или карты за пару шагов.

9. Юзабилити-тестирование

Что поправил после тестов

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

10. Итог

Что вынес

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