Проблема
Интерфейс платформы развивался без единых стандартов, что привело к фрагментации дизайна.
В системе существовали вариаций одних и тех же элементов (кнопки, формы, таблицы), несогласованные типографических стили и разные подходы к цветам и отступам.Это создавало проблемы на всех уровнях.
В системе существовали вариаций одних и тех же элементов (кнопки, формы, таблицы), несогласованные типографических стили и разные подходы к цветам и отступам.Это создавало проблемы на всех уровнях.
При планировании выхода на B2B-рынок стало критически важно иметь единую масштабируемую систему, позволяющую быстро кастомизировать интерфейс под разных клиентов
Создать масштабируемую атомарную дизайн-систему, которая обеспечит консистентность интерфейса во всех разделах платформы, ускорит разработку новых фич и редизайн существующих
и подготовит продукт к масштабированию
и подготовит продукт к масштабированию
в B2B-решение с возможностью быстрой кастомизации
Цели
Задачи
— Провести инвентаризацию всех элементов интерфейса, выявить дублирование и несоответствия. Определить единые стандарты для всей платформы
— Разработать систему дизайн-токенов (цвета, типографика, отступы, радиусы), которая станет базой для компонентов
— Спроектировать библиотеку переиспользуемых компонентов по атомарному подходу, покрывающую все сценарии платформы
— Разработать систему дизайн-токенов (цвета, типографика, отступы, радиусы), которая станет базой для компонентов
— Спроектировать библиотеку переиспользуемых компонентов по атомарному подходу, покрывающую все сценарии платформы
— Синхронизировать дизайн-компоненты с кодовой базой, обеспечить единый источник правды между дизайном и фронтендом
— Создать подробную документацию с примерами использования, guidelines и best practices. Провести обучение команды для быстрого внедрения
— Заложить возможность кастомизации для разных B2B-клиентов без изменения базовой архитектуры системы
— Создать подробную документацию с примерами использования, guidelines и best practices. Провести обучение команды для быстрого внедрения
— Заложить возможность кастомизации для разных B2B-клиентов без изменения базовой архитектуры системы
Аудит и инвентаризация
Провели с командой аудит всех интерфейсов платформы: выявили 50+ вариаций кнопок, 30+ типографических стилей, несогласованные цвета и отступы. Задокументировали критические паттерны: формы добавления, таблицы, карточки кандидатов.
Изначально мы решили заложить лишь используемые стандарты и актуальные для компании фреймфорки на текущий момент времени, а далее масштабировать в более крупный продукт ориентируясь на гайдлайны крупных дизайн систем.
Анализ дизайн-систем крупных игроков
Провели бенчмарк существующих enterprise-решений для выявления best practices и адаптации под специфику HR-платформы
Адаптировали лучшие практики под специфику рекрутинговой платформы: акцент на формы, таблицы, статусы и визуализацию данных.
- Изучили подход к документации компонентов и accessibility guidelines
- Рассмотрели систему токенов для тематизации (возможность ребрендинга для B2B)
- Проанализировали паттерны сложных таблиц с фильтрацией и сортировкой
- Изучили систему data display для работы
- Исследовали подход к кастомизации компонентов для разных проектов
- Оценили архитектуру для быстрой адаптации под клиентские требования
- Проанализировали подход к сложным дашбордам и визуализации данных
- Изучили систему spacing и layout grid для структурирования плотных интерфейсов
Внедрила Foundations
Цель создать единый язык между дизайном и разработкой, обеспечить масштабируемость и возможность ребрендинга для B2B-клиентов.
Определила дизайн-токены: цветовую палитру, типографическую шкалу, систему отступов, радиусы скругления, лайауты, систему отступов.
Cоздание компонентов Атомы → Молекулы → Организмы
Начинала с основных форм: кнопки, иконки, чекбоксы, радиокнопки, стили. Из атомов собирала молекулы: формы, шапки, таблицы, виджеты и тд. Создала единые стили для состояний (hover, active, disabled, error).
Из молекул собирала организмы: отдельные разделы страницы, шапку и подвал сайта, модальные окна, готовые секции, из которых будет состоять продукт.
Шаблоны и страницы
Собрали шаблоны ключевых экранов: список кандидатов, карточка специалиста, таймшиты, добавление события.
Создали адаптивные сетки и правила компоновки компонентов.
Документация и внедрение
Задокументировала все компоненты в Figma с типами, состояниями, корнер-кейсами, вариантами использования, кодовыми примерами.
Провели воркшопы с разработчиками для синхронизации. Заложили стандарты для рабочих сценариев, внедрили компонентную библиотеку в код.
Масштабирование и поддержка
Создали процесс добавления новых компонентов, версионирование ДС, регулярные ревью консистентности. Внедрили и автоматизировали все токены в системе, ввели автоматические обновления токенов в приложении, теперь все изменения
автоматически пересобирают с новыми токенами и публикают сторибук в котором мы проводим валидацию. Подготовили систему к кастомизации для B2B-клиентов.
Выводы
Единая библиотека из 120+ компонентов, сокращение времени разработки фич на 18% ежеквартально, снижение TTM на 12%. Время адаптации новых пользователей сократилось с 2-3 недель до 3-5 дней. Платформа готова к быстрому масштабированию для внешних клиентов.
