Hi-Tech дизайн для топ-5 поставщика банковского оборудования

UX/UI анализ прерыдущей версии сайта и его реализации

Функционально сайт понятен, но логика построения сценариев поведения пользователя не всегда ясна. Не проработан UX/UI , также наблюдались сложности со стороны верстки и адаптива элементов. Таким образом, работа над дизайном повлекла за собой и достаточное количество часов по редактированию кода.

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

Так сайт клиента выглядел изначально

Из очевидных проблем выявили:

Решение

Обновить дизайн, пересобрав некоторые составные части сайта в коде, а также проработать с точки зрения UX/UI и адаптивной верстки под мобильные устройства и планшеты. Внедрить параллакс на главной странице сайта, выдержав стиль и “вес” бренда.

«Финтех - это всегда интересно. Здесь и многоступенчатость согласований, и определенные регламенты, которые во многом претят стандартам UX/UI, и большое количество лиц, принимающих решения. Мы балансировали, как могли. Получился достойный проект в копилку».

коммерческий директор

Андрей Титов

Прототипирование

Ключевым требованием к дизайну проектов в финтехе является их ясность и мобильность. Ниша, с некоторых пор достаточно часто подвергающаяся изменениям, сегодня должна быть ещё и гибкой. Соответственно, работали не только над видимой частью, но и внимательно отнеслись к связке “фронта” и “бэка”.

Разработка дизайн-макетов

Визуализация банковской отрасли всегда задача непростая. А реализовать её так, чтобы было не только показательно, но и притягивало взгляд, да еще и без ущерба функциональности и статуса - вообще что-то на принципиально другом уровне.

Мы создали лаконичный интерфейс с упорядоченными элементами и унифицированную структуру экранов, которая приятна и понятна пользователю.

Раздел “Проекты”

Дизайн-проект содержит более 30 основных макетов в figma.

Каталог товаров

Раздел «Товары» – каталог банковского оборудования, где есть страницы с переходом как на внутренние страницы сайта, так и на другие домены.

Товары разбиты по разделам. Некоторые категории с обозначенной ценой, местами - по запросу. Внутри категорий свои фильтры.

Параллакс-эффект

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