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

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

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

Задача

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

Сроки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Клиент

Дата

Март 1, 2018

Команда

Александр Ревяко, Андрей Телего

Дальше

Интерфейс банкоматов сети СБС

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

Right

+375 29 263−56–13ПЧТ ФБ ИГ ТЛГ О компании