VK Tech UI
VK Tech UI
Внедрение единой стилистики VK Tech в продукты FinOps
Внедрение единой стилистики VK Tech в продукты FinOps
Роль
Роль
Продуктовый дизайнер
Продуктовый дизайнер
Тэги
Тэги
UI, дизайн-система, токены, систематизация
UI, дизайн-система, токены, систематизация
Тип
Тип
Веб-сервис
Веб-сервис
Таймлайн
Таймлайн
2024–2025
2024–2025
Контекст
Контекст
Продукты VK Tech исторически развивались отдельными командами на разных дизайн-системах, из-за чего пользовательский опыт между сервисами был несогласованным. В рамках инициативы по унификации экосистемы одной из ключевых задач было внедрение общего базового слоя интерфейсов: цветовые токены, типографика, иконки, скругления и отступы
Продукты VK Tech исторически развивались отдельными командами на разных дизайн-системах, из-за чего пользовательский опыт между сервисами был несогласованным. В рамках инициативы по унификации экосистемы одной из ключевых задач было внедрение общего базового слоя интерфейсов: цветовые токены, типографика, иконки, скругления и отступы
Проблемы и ограничения
Проблемы и ограничения
Внутри FinOps существует две независимые дизайн-системы, которые используют разные компонентные базы. Однако решение по миграции должно было быть универсальным, чтобы исключить будущие расходы по поддержке двух продуктовых тем
Новая система токенов VK Tech значительно отличалась по структуре и архитектуре от систем FinOps, поэтому простой замены стилей было недостаточно
Дополнительно проект был ограничен жёсткими сроками и ограниченными ресурсами команды, невозможностью останавливать продуктовую разработку и выкатывать обновления интерфейса постепенно
Внутри FinOps существует две независимые дизайн-системы, которые используют разные компонентные базы. Однако решение по миграции должно было быть универсальным, чтобы исключить будущие расходы по поддержке двух продуктовых тем
Новая система токенов VK Tech значительно отличалась по структуре и архитектуре от систем FinOps, поэтому простой замены стилей было недостаточно
Дополнительно проект был ограничен жёсткими сроками и ограниченными ресурсами команды, невозможностью останавливать продуктовую разработку и выкатывать обновления интерфейса постепенно
Задача
Задача
Найти способ и реализовать переход всех (5+) продуктов FinOps на новую стилистику быстро, безопасно и незаметно для пользователей
Найти способ и реализовать переход всех (5+) продуктов FinOps на новую стилистику быстро, безопасно и незаметно для пользователей
Что делала
Что делала
Изучила архитектуру новой системы токенов VK Tech и принципы её работы, участвовала в разработке стратегии поэтапного перехода без остановки продуктовой разработки
Провела меппинг существующих стилей FinOps на новую систему токенов и подобрала универсальные значения токенов для визуально разных продуктов с независимыми дизайн-системами
Собрала библиотеку продуктовой темы FinOps в Figma, перевела на нее дизайн-компоненты и собрала шаблоны основных экранов для команды
Провела аудит и систематизацию ~500 иконок, подготовила их меппинг на библиотеку VK Tech, сформировала ТЗ на отрисовку недостающих иконок и ревьюила работу
Разработала гайд для внедрения новой стилистики через код без макетов интерфейсов, сопровождала разработку и поэтапный rollout новой стилистики
Проводила дизайн-ревью тестовых стендов после миграции, контролировала визуальную консистентность интерфейсов и точечно корректировала проблемные сценарии
Изучила архитектуру новой системы токенов VK Tech и принципы её работы, участвовала в разработке стратегии поэтапного перехода без остановки продуктовой разработки
Провела меппинг существующих стилей FinOps на новую систему токенов и подобрала универсальные значения токенов для визуально разных продуктов с независимыми дизайн-системами
Собрала библиотеку продуктовой темы FinOps в Figma, перевела на нее дизайн-компоненты и собрала шаблоны основных экранов для команды
Провела аудит и систематизацию ~500 иконок, подготовила их меппинг на библиотеку VK Tech, сформировала ТЗ на отрисовку недостающих иконок и ревьюила работу
Разработала гайд для внедрения новой стилистики через код без макетов интерфейсов, сопровождала разработку и поэтапный rollout новой стилистики
Проводила дизайн-ревью тестовых стендов после миграции, контролировала визуальную консистентность интерфейсов и точечно корректировала проблемные сценарии
Пример таблиц меппинга из гайда
Пример таблиц меппинга из гайда
Результаты
Результаты
Продукты FinOps первыми в VK Tech перешли на единую стилистику. Переход был реализован без остановки продуктовой разработки и нарушения сроков релизов
Меппинг и внедрение новой стилистики через код позволили сократить TTM и затраты на разработку в несколько раз
Благодаря миграции через промежуточный слой токенов внедрение прошло практически незаметно для пользователей
Около 90% интерфейсов корректно обновились на новый стиль автоматически, а оставшиеся визуальные несоответствия были устранены через дизайн-ревью и точечные доработки
Найденный подход стал основой для дальнейшей миграции других продуктовых направлений и развития единого пользовательского опыта внутри VK Tech
Продукты FinOps первыми в VK Tech перешли на единую стилистику. Переход был реализован без остановки продуктовой разработки и нарушения сроков релизов
Меппинг и внедрение новой стилистики через код позволили сократить TTM и затраты на разработку в несколько раз
Благодаря миграции через промежуточный слой токенов внедрение прошло практически незаметно для пользователей
Около 90% интерфейсов корректно обновились на новый стиль автоматически, а оставшиеся визуальные несоответствия были устранены через дизайн-ревью и точечные доработки
Найденный подход стал основой для дальнейшей миграции других продуктовых направлений и развития единого пользовательского опыта внутри VK Tech
VK Budgeting
VK Tax Compliance
VK GRC
VK Tax Compliance
VK Process Mining
VK Budgeting
VK Tax Compliance
VK GRC
VK Process Mining
Две дизайн-системы на одной продуктовой теме
Две дизайн-системы на одной продуктовой теме
Проблема
Проблема
Внутри FinOps существует две независимые и визуально разные дизайн-системы. Для перехода на единую стилистику VK Tech было важно не объединить дизайн-системы полностью, а выстроить общий слой стилей и иконок поверх существующих решений. Основная сложность заключалась в подборе универсальных значений токенов, которые одинаково хорошо работали бы для двух разных систем
Внутри FinOps существует две независимые и визуально разные дизайн-системы. Для перехода на единую стилистику VK Tech было важно не объединить дизайн-системы полностью, а выстроить общий слой стилей и иконок поверх существующих решений. Основная сложность заключалась в подборе универсальных значений токенов, которые одинаково хорошо работали бы для двух разных систем
Решение
Решение
Я смеппила стили обеих дизайн-систем на одну продуктовую тему и подобрала универсальные значения токенов, которые одинаково хорошо работают для двух разных систем. Это позволило:
унифицировать базовый слой внутри направления, сохранив визуальную целостность разных интерфейсов
сократить различия между продуктами и создать условия для формирования единого пользовательского опыта
упростить поддержку интерфейсов и работу разработки, а также исключить будущие расходы по поддержке двух продуктовых тем
Я смеппила стили обеих дизайн-систем на одну продуктовую тему и подобрала универсальные значения токенов, которые одинаково хорошо работают для двух разных систем. Это позволило:
унифицировать базовый слой внутри направления, сохранив визуальную целостность разных интерфейсов
сократить различия между продуктами и создать условия для формирования единого пользовательского опыта
упростить поддержку интерфейсов и работу разработки, а также исключить будущие расходы по поддержке двух продуктовых тем
До
После
До
После
Незаметная миграция и мгновенная смена стиля
Незаметная миграция и мгновенная смена стиля
Проблема
Проблема
Структура цветовых стилей FinOps была примитивной: для всех элементов интерфейса мог применяться любой цвет из растяжки серых, синих, красных, оранжевых и зеленых цветов. Новая система токенов VK Tech имеет другую архитектуру: здесь цветовые токены сгруппированы по контексту применения (text, icon / background / border) и функции (base / accent / system / states). Из-за разницы структуры прямая замена цветов и текстовых стилей приводила к большому количеству визуальных ошибок, поэтому прямой одномоментный переход был невозможен без риска сломать текущие релизы и пользовательский опыт
Структура цветовых стилей FinOps была примитивной: для всех элементов интерфейса мог применяться любой цвет из растяжки серых, синих, красных, оранжевых и зеленых цветов. Новая система токенов VK Tech имеет другую архитектуру: здесь цветовые токены сгруппированы по контексту применения (text, icon / background / border) и функции (base / accent / system / states). Из-за разницы структуры прямая замена цветов и текстовых стилей приводила к большому количеству визуальных ошибок, поэтому прямой одномоментный переход был невозможен без риска сломать текущие релизы и пользовательский опыт
Решение
Решение
Провести миграцию в несколько этапов, выполнив большую часть работы «под капотом»: сначала безопасно перевести продукты на токены, установив им «старые» значения, а затем централизовано обновить значения на «новые» и одномоментно полностью поменять стиль продуктов
Провести миграцию в несколько этапов, выполнив большую часть работы «под капотом»: сначала безопасно перевести продукты на токены, установив им «старые» значения, а затем централизовано обновить значения на «новые» и одномоментно полностью поменять стиль продуктов
Этапы перехода на новую стилистику
Этапы перехода на новую стилистику
Систематизация и меппинг иконок
Систематизация и меппинг иконок
Проблема
Проблема
Внутри продуктов FinOps накопилось ~500 иконок без единой системы организации: часть иконок дублировалась, часть была устаревшей, а полный состав библиотеки не был до конца известен даже команде. Также было сразу понятно, что набор иконок в библиотеке VK Tech слишком базовый и не покроет все сценарии продуктов
Внутри продуктов FinOps накопилось ~500 иконок без единой системы организации: часть иконок дублировалась, часть была устаревшей, а полный состав библиотеки не был до конца известен даже команде. Также было сразу понятно, что набор иконок в библиотеке VK Tech слишком базовый и не покроет все сценарии продуктов
Решение
Решение
Перед миграцией я провела аудит и систематизацию библиотеки иконок: убрала дубликаты и неиспользуемые элементы, структурировала библиотеку
Затем подготовила меппинг старых иконок на новую библиотеку VK Tech и определила правила замены для разных сценариев использования
Так как замена нашлась для ~50% иконок, я подготовила ТЗ на отрисовку новых иконок внешним дизайнером и проводила ревью результатов, чтобы контролировать понятность метафор и косистентность решений
Перед миграцией я провела аудит и систематизацию библиотеки иконок: убрала дубликаты и неиспользуемые элементы, структурировала библиотеку
Затем подготовила меппинг старых иконок на новую библиотеку VK Tech и определила правила замены для разных сценариев использования
Так как замена нашлась для ~50% иконок, я подготовила ТЗ на отрисовку новых иконок внешним дизайнером и проводила ревью результатов, чтобы контролировать понятность метафор и косистентность решений
Меппинг иконок двух дизайн-систем FinOps
Меппинг иконок двух дизайн-систем FinOps
Карина Мулкаманова