Дизайн-система
и обновление «Спектрума»
Дизайн-система и редизайн внутреннего рабочего инструмента операторов банка ВТБ.
Рабочий инструмент для сотрудников банка
«Спектрум» — внутренняя система банка ВТБ, с которой работают операторы. Они используют её для поиска данных о клиентах и обработки запросов и обращений.
Задача проекта — обновить интерфейс, оптимизировать рабочие сценарии и внедрить дизайн-систему, тесно взаимодействуя с пользователями и разработчиками.
Упростить работу операторов
Арт-директор обозначил проблемы, которые нужно было решить при обновлении системы.
Перегруженный интерфейс
Устаревший интерфейс и избыток функций усложняли работу пользователей.
Несогласованные компоненты
Без общей дизайн-системы продукты и команды использовали разные визуальные элементы, что создавало путаницу и дополнительные затраты времени на разработку.
Рутинные операции
Операторы тратили много времени на поиск клиентских данных и обработку запросов.
Общие правила и компоненты
Проанализировал существующие интерфейсы банка и выделил повторяющиеся паттерны, которые стали основой для компонентов.
Библиотека в Figma
Участвовал в создании UI-библиотеки: кнопок, полей ввода, выпадающих списков, табов и таблиц.
Доступность и состояния
Учитывал размер шрифтов и фокусное состояние. Документировал поведение компонентов в разных состояниях, включая активное, заблокированное и ошибку.
Проверка в макетах
Тестировал дизайн-систему в рабочих макетах, чтобы находить недочёты и предлагать оптимизации.
Кнопки
Верхняя панель
От анализа сценариев к новым экранам
Участвовал в полном редизайне системы: начал с анализа текущих пользовательских сценариев, затем применил компоненты дизайн-системы в новых экранах, обеспечивая визуальную и функциональную согласованность.
Карточки клиентов
Создание и ведение карточек с данными клиентов.
Задачи операторов
Мониторинг текущих задач в рабочем интерфейсе.
Запросы и обращения
Обработка клиентских запросов и обращений.
Исходный интерфейс
Старый интерфейс удалось зафиксировать только фотографированием.
Новый и исходный интерфейсы
От обсуждения до дизайн-ревью
Обсуждения с дизайнерами
Участвовал во внутренних обсуждениях и предлагал улучшения компонентов дизайн-системы.
Передача в разработку
Работал с разработчиками, передавая макеты и спецификации для реализации интерфейсов.
Дизайн-ревью
Проверял соответствие реализованных интерфейсов макетам.
Единая система и обновлённый интерфейс
Совместно с командой разработал первую версию дизайн-системы, которую внедрили в несколько внутренних продуктов банка, и переработал интерфейс «Спектрума» для операторов.
Компоненты и документация
Библиотека и документация помогли ускорить разработку интерфейсов новых продуктов.
Практический опыт
Проект дал опыт работы с большой командой дизайнеров, создания масштабной дизайн-системы и проектирования интерфейсов для задач сотрудников банка.
Если вам нужен дизайн для бизнеса, напишите мне.