Новый дизайн

От малого к большому

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

Интерфейсная гарнитура

Градиенты

Дизайн-концепция

В конце 2020 года новая главная страница сайта ВТБ была запущена в пилотном формате. При желании клиент мог вернуться к старому дизайну. Это позволило избежать возможной негативной реакции аудитории. После прохождения необходимых тестов и доработок, в мае 2021 года, предыдущая версия сайта канула в Лету. Тогда же обновилась сквозная система навигации сайта.

Показать историю

Что она дает

Синхронизация команд дизайна и разработки

Максимальное соответствие макетов и сайта

Быстрое внедрение нового функционала

Узнаваемость бренда банка в цифровой среде

Как выглядит дизайн-система

Это библиотека элементов и стилей, доступная в Figma для дизайнеров и продактов, набор компонент в сторибуке для разработчиков, и интерфейс сборки и администрирования страниц для контент-менеджеров. Все составляющие системы интегрированы между собой.

Какие у нее преимущества

Снижение нагрузки на зрение пользователей

Увеличение доступности интерфейса для клиентов

Что мы учитывали

Мы провели исследование клиентов банка и получили несколько инсайтов, которые помогли нам в работе. Стало очевидно, что пользователям необходима темная тема сайта. И вот почему

Люди с нарушениями зрения активно пользуются мобильным банкингом, как в приложениях, так и на сайтах.
Бизнесу важно обеспечить максимальную доступность продуктов для разных сегментов целевой аудитории.
Слабовидящие не используют стандартную панель на сайтах, так как испытывают трудности с ее настройкой.
Дефолтные настройки панелей для слабовидящих неудобны и затрудняют считывание контента.
Отключение графики на сайте для клиентов с нарушениями зрения, скорее ущемляет их права, нежели расширяет их возможности.
Необходимая контрастность ключевых элементов должна соответствовать 7:1, минимальный размер текста — 16.