# Кейс: мобильное приложение банка Link Bank — Игорь Тростянский > Кейс: мобильный онлайн-банк Link Bank от интервью до протестированного MVP. Исследование аудитории, анализ пяти банков, CJM, прототип, визуальная концепция, дизайн-система и 150 финальных экранов. > Source: https://troydesigns.vercel.app/ru/case-linkbank.html Tags: B2С, FinTech, 2025 # Мобильное приложение онлайн-банка Link Bank ![История операций](https://troydesigns.vercel.app/assets/case-linkbank/hero-1.webp) ![Главная Link Bank](https://troydesigns.vercel.app/assets/case-linkbank/hero-2.webp) ![Личный кабинет](https://troydesigns.vercel.app/assets/case-linkbank/hero-3.webp) ## Контекст Учебный проект на курсе UPROCK под руководством куратора. Link Bank — мобильный банк для повседневных задач: переводы, платежи, карты и контроль расходов. ## Постановка задачи Спроектировать MVP мобильного банка с нуля: разобраться, кто и зачем пользуется банковскими приложениями, выбрать функции, без которых не обойтись на старте, и довести интерфейс до протестированных макетов в светлой и тёмной теме. ## Моя роль Весь процесс — от интервью до финальных макетов — прошёл сам, решения защищал на ревью с куратором. ## Результат Кликабельный прототип и 150 финальных экранов MVP в светлой и тёмной теме. Каждое решение опирается на интервью, анализ пяти банков или юзабилити-тесты — по их итогам переработал главную. 4 — Интервью с пользователями 5 — Банков в анализе 150 — Финальных экранов ## 2. Исследование аудитории ### Начал с интервью Поговорил с четырьмя людьми от 21 до 60 лет: студентом-инженером, двумя фельдшерами скорой помощи и линейным обходчиком. Все пользуются Сбером или Т-Банком и ставят своему банку 9–10 из 10. Спрашивал, какие задачи решают, как часто открывают приложение и что раздражает. ### Ценят простоту Высокие оценки ставят не за тарифы, а за то, что нужная операция находится сразу. ### Кэшбэк непрозрачен Непонятно, за какие покупки он начислен и когда выбирать категории — разбираться нет времени. ### Поддержка отвечает долго С проблемой перевода приходится ждать, пока переключат на нужного специалиста. ### Неожиданные условия Кредитка оказалась не бесплатной, ставка по кредиту — выше ожидаемой. Условия хотят видеть заранее. ### Пять персон IT-специалист, предприниматель, пенсионерка, студент и офисный сотрудник. Мотивации разные — от автоплатежей до контроля перерасхода, — но ожидание общее: всё главное на первом экране, основные операции без лишних шагов. ### Работы, ради которых открывают банк Срочно оплатить ЖКУ, скинуться в кафе, быстро перевести родственникам, в конце месяца понять, куда ушли деньги. Эти сценарии и легли в основу MVP: переводы, платежи и аналитика расходов. ## 3. Конкуренты и функции ![Функциональный анализ: функции банка в сравнении с Альфа-Банком, Т-Банком и Сбером и оценка ценности](https://troydesigns.vercel.app/assets/case-linkbank/functional-analysis.jpg) ### Функциональный анализ Прошёл путь пользователя в пяти банках: Альфа, Т-Банк, Сбер, OZON Банк и МТС Банк. Каждую функцию — от регистрации до заказа карты — сравнил с тремя лидерами и оценил её ценность от 1 до 5. В MVP ушли только функции с оценкой 4–5: итоговый список справа. ![CJM перевода по номеру телефона: шаги, вопросы, негативные и позитивные моменты, идеи](https://troydesigns.vercel.app/assets/case-linkbank/cjm-transfer.jpg) ### CJM перевода по номеру Разобрал перевод шаг за шагом: какие вопросы возникают и где легко ошибиться. Отсюда решения, которые потом ушли в макеты: поле номера прямо в платежах, по умолчанию карта прошлого перевода, банк получателя виден сразу, предупреждение об овердрафте и отмена перевода в первые секунды. ![Карта приложения онлайн-банка](https://troydesigns.vercel.app/assets/case-linkbank/app-map.jpg) ### Карта приложения Семь разделов: авторизация, оформление карты, повторный вход, главная, история, платежи и чаты. По карте собрал функциональный прототип, а затем — кликабельный. ## 4. Визуальная концепция ![Первая попытка главной: тёмные и светлые варианты с лаймовым акцентом](https://troydesigns.vercel.app/assets/case-linkbank/concept-home-1.jpg) ### Первая попытка главной Начал с тёмной темы и лаймового акцента, затем перенёс идею на светлый фон. Каждая итерация добавляла плашек, и баланс с картами терялся среди промо и витрины. ![Вторая попытка главной: синяя шапка с балансом и картами](https://troydesigns.vercel.app/assets/case-linkbank/concept-home-2.jpg) ### Вторая попытка Собрал референсы и пересобрал иерархию: баланс, карты и быстрые действия — в синей шапке, сервисы — на светлом полотне ниже. Этот вариант и довёл до финала. ![Дизайн-система: типографика и цвета светлой и тёмной темы](https://troydesigns.vercel.app/assets/case-linkbank/design-system.jpg) ### Дизайн-система Типографика на SF Pro, цвета текста, фонов и элементов для светлой и тёмной темы, системные цвета ошибок и успеха. На этих токенах собраны обе темы. ## 5. Главная ![Главная в светлой теме](https://troydesigns.vercel.app/assets/case-linkbank/home-light-1.webp) ![Главная при прокрутке](https://troydesigns.vercel.app/assets/case-linkbank/home-light-2.webp) ![Поиск по приложению с клавиатурой](https://troydesigns.vercel.app/assets/case-linkbank/home-light-3.webp) ![Результаты поиска по приложению](https://troydesigns.vercel.app/assets/case-linkbank/home-light-4.webp) ![Банкоматы на карте и список отделений](https://troydesigns.vercel.app/assets/case-linkbank/home-light-5.webp) ### Всё главное на первом экране Баланс, карты и быстрые действия — в шапке. Ниже поиск по приложению, кэшбэк и расходы, накопления, витрина продуктов и банкоматы на карте. Поиск находит не только операции, но и действия: «оформить кредитную карту», «выписка». ![Главная в тёмной теме](https://troydesigns.vercel.app/assets/case-linkbank/home-dark-1.webp) ![Поиск в тёмной теме](https://troydesigns.vercel.app/assets/case-linkbank/home-dark-2.webp) ![Банкоматы в тёмной теме](https://troydesigns.vercel.app/assets/case-linkbank/home-dark-3.webp) ### Тёмная тема Та же структура на тёмных токенах дизайн-системы — без отдельной вёрстки экранов. ## 6. История операций и аналитика ![История операций](https://troydesigns.vercel.app/assets/case-linkbank/history-after-1.webp) ![Аналитика расходов](https://troydesigns.vercel.app/assets/case-linkbank/history-after-2.webp) ![Аналитика доходов](https://troydesigns.vercel.app/assets/case-linkbank/history-after-3.webp) ![Страница операции](https://troydesigns.vercel.app/assets/case-linkbank/history-after-4.webp) ![Выбор дат для истории операций](https://troydesigns.vercel.app/assets/case-linkbank/history-after-5.webp) ### Куда ушли деньги Наверху — график трат по дням, ниже операции по датам. Тап по доходам или расходам открывает аналитику с кольцевой диаграммой по категориям и переключением года, месяца и недели. В карточке операции — квитанция, шаблон, автоплатёж и повтор, а период выбирается в календаре диапазоном. ## 7. Платежи и переводы ![Платежи и переводы](https://troydesigns.vercel.app/assets/case-linkbank/payments-1.webp) ![Выбор контакта](https://troydesigns.vercel.app/assets/case-linkbank/payments-2.webp) ![Ввод данных перевода](https://troydesigns.vercel.app/assets/case-linkbank/payments-3.webp) ![Экран успешного перевода](https://troydesigns.vercel.app/assets/case-linkbank/payments-4.webp) ### Перевод по номеру Решения из CJM дошли до макетов: поле перевода по номеру стоит прямо на экране платежей, рядом шаблоны и автоплатежи. На экране перевода сверху счёт списания, а под получателем — банки, к которым привязан его номер, чтобы не отправить деньги не туда. Комиссия видна до отправки, а после — квитанция, шаблон и автоплатёж в один тап. ## 8. Личный кабинет ![Личный кабинет](https://troydesigns.vercel.app/assets/case-linkbank/profile-1.webp) ![Настройки профиля](https://troydesigns.vercel.app/assets/case-linkbank/profile-2.webp) ![Безопасность](https://troydesigns.vercel.app/assets/case-linkbank/profile-3.webp) ![Сообщение о мошеннике](https://troydesigns.vercel.app/assets/case-linkbank/profile-4.webp) ![Подтверждение сообщения о мошеннике](https://troydesigns.vercel.app/assets/case-linkbank/profile-5.webp) ### Профиль и безопасность Телефон, почта, документы и персональные данные собраны в одном месте. В безопасности — вход по Face ID, привязанные устройства, смена кодового слова и кода входа с подтверждением по СМС. Отдельная кнопка «Сообщить о мошеннике» отправляет данные подозрительного номера или карты за пару шагов. ## 9. Юзабилити-тестирование ![Заметный поиск на главной](https://troydesigns.vercel.app/assets/case-linkbank/testing-fixes-1.webp) ![Панель при прокрутке](https://troydesigns.vercel.app/assets/case-linkbank/testing-fixes-2.webp) ![Подсказка у шторки](https://troydesigns.vercel.app/assets/case-linkbank/testing-fixes-3.webp) ![Жест открытия счёта](https://troydesigns.vercel.app/assets/case-linkbank/testing-fixes-4.webp) ### Что поправил после тестов Поле поиска сливалось с фоном — сделал его на несколько тонов серее. При прокрутке ниже счёта шапка превращается в панель со сплошной заливкой, так поиск и настройки всегда под рукой. Переход в счёт тоже оказался неочевидным, поэтому добавил второй вход, знакомый по крупным банкам: потянуть полотно вниз — и откроется страница счёта. ## 10. Итог ### Что вынес Когда решения опираются на артефакты, спорить о вкусе не приходится: функциональный анализ отсекал лишнее, CJM подсказывала детали, а тесты показали, что даже продуманная главная требует правок. Первая визуальная концепция — черновик, а не ошибка: без неё не было бы второй.