Интерфейс интернет‑банка Premium Bank

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

Интерфейс главного экрана интернет-банка Silkway Bank для юридических лиц. Акценты на главном: счетах, документах и популярных платежах.

Задача

Разработать интерфейсы интернет-банка для физических и юридических лиц.

Сроки

Необходимо было вложиться в 2 месяца.

The interface of the Payments and transfers section of Silkway Bank online banking for legal entities is Displayed in the favorites, Payments, Transfers, corporate card issue offer, Deposit opening offer, and currency exchange rates sections.

Проработка компонентов

Прорабатываем отдельные элементы и собираем дизайн-систему интерфейса.

Дизайн-система интернет-банка Silkway Bank. На скриншоте разные состояния кнопок, чек-боксов и тумблеров.
Показаны скриншоты трех разделов интернет-банка Silkway Bank для юридических лиц: счета, движение средств и история операций.
Показаны скриншоты трех разделов интернет-банка Silkway Bank для юридических лиц: настройки платежных карт, корпоративные карты и документы.
Банк для физических лиц: используем готовую базу компонентов

Интернет-банк для физических лиц выстроен по тем же правилам: выносим вверх самое важное для пользователя. В дашборде это карты, в платежах — избранные операции. Чтобы сразу после входа, например, пополнить баланс телефона, нужно сделать ровно 2 клика:

  • переход в Платежи и переводы,

  • выбор операции.

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

Интерфейс избранных платежей интернет-банка Silkway Bank для физических лиц. Популярные платежи располагаются выше остальных. Статистика расходов показана на графике.
90% готовых компонентов интерфейса для юридических лиц легко формируют банк для физических лиц

Его остается просто собрать из уже готового «конструктора» и доделать недостающие элементы. Вспомните об этом, когда будете думать, нужна ли вам дизайн-система.

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

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

Два продукта за 2 месяца

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

Впереди — работа над мобильным приложением.

Поговорим о деле

Заявка улетит в отдел продаж. Вам ответит кто-то из менеджеров, чтобы обсудить
детали. В рабочее время это занимает до получаса

Интерфейс банкоматов сети СБС
Смотреть следующий проект Интерфейс банкоматов сети СБС

Спроектировали удобное и лаконичное визуальное решение