Проблема
Масштабный редизайн сайта ВТБ требовал системного подхода: в сжатые сроки необходимо было запустить более 500 страниц, поэтому важно было выстроить дизайн-систему, позволяющую собирать интерфейсы быстро и с минимальным количеством ошибок.
Дизайн-система для ВТБ
Задача
В рамках редизайна сайта ВТБ разработать и внедрить дизайн-систему, которая:
Обеспечит консистентность интерфейсов
Ускорит создание новых
страниц
Упростит взаимодействие между дизайном и разработкой
Создаст основу для дальнейшего масштабирования продукта
Мой вклад
- Создала и поддерживала >60 сложных компонентов, >30 атомов
- Участвовала в кросс-функциональном взаимодействии с заказчиком, менеджерами, разработчиками и дизайн-командой
- Подготовила гайдлайны по использованию компонентов для разработчиков и контент-менеджеров
- Участвовала в дизайн-ревью и проверке консистентности реализованных страниц
Вызовы
Дизайн-система создавалась параллельно с редизайном сайта. На старте был только концепт главной страницы, при этом сам сайт включает больше 500 страниц. Поэтому нужно было идти на опережение, учитывая новую дизайн-концепцию, необходимость масштабирования и ограничения разработки.
Я работала не только с визуальной реализацией редизайна в дизайн-системе, но и с логикой компонентов: анализировала их поведение в старой системе, выявляла несостыковки, прорабатывала сценарии использования в разных контекстах и состояниях, а также проверяла реализуемость решений совместно с разработкой.
- 01Анализ действующей дизайн-системы
- 02Систематизация компонентов
- 03Создание дизайн-системы 4.0
- 04Поддержка внедрения
Процесс
Шаг 0. Проанализировала новый дизайн в контексте старой дизайн-системы, сравнила изменения в поисках противоречий. На этом этапе важно убедиться, что решение не ломает логику системы, сохраняет консистентность и не создаёт лишних исключений.
Шаг 1. Создала единую систему токенов на основании актуального редизайна.
Шаг 2. На основе токенов создала стили. Они нужны, чтобы давать токенам понятные готовые роли в интерфейсе и ускорять работу дизайнеров.
Шаг 3. С учетом новой системы токенов пересобрала атомы: кнопки, чипсы, чек-боксы, поля ввода — все базовые компоненты, из которых будут собираться молекулы и организмы.
Шаг 4. Создала из атомов систему компонентов с использованием стилей. Добавила варианты для разных контекстов и разрешений.
Шаг 5. Оформила навигацию для дизайнеров, чтобы они могли легко ориентироваться в системе.
Шаг 6. Написала гайдлайны для разработчиков и контент-менеджеров: правила использования, анатомия, поведение, адаптивность.
Результат
В рамках масштабного редизайна сайта ВТБ была разработана новая дизайн-система, которая стала основой для обновления более 500 страниц продукта. Система позволила стандартизировать интерфейсы, ускорить создание новых страниц и обеспечить их консистентность на этапе масштабирования.
