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

Приступаем к проектированию интерфейса

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

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

Интерфесй раздела платежи и переводы интернет-банка

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

Интерфейс раздела платежи и переводы интернет-банка SilkWay Bank 

Документы рассортированы по типу и по статусу. Цветом подсказываем, какие из них требуют обратить на себя внимание. Достаточно пары секунд, чтобы пользователь смог комплексно оценить ситуацию.

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

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

Дизайн-система интернет-банка SilkWay Bank. На скриншоте разные состояния кнопок, чек-боксов и тумблеров

Показаны скриншоты разделов интернет-банка SilkWay Bank для юридических лиц: настройки, счета, движение средств и история операций

Банк для физических лиц: используем готовую базу компонентов

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

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

Интерфейс интернет-банка SilkWay Bank для физических лиц

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

ff98185b251cfb13cfbb693424fd2602.png

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

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

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

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

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

ee0b7e325602fdd1eb5853168fe4913e.png

Перейти на сайт

Полный текст статьи читайте на CMS Magazine