Контекст

Когда я подключилась к работе, компания переходила со старого UI-kit на новый. Новая библиотека была частично собрана, но оставалась незавершенной и имела незавершенную документацию. Во внутренних и внешних продуктах использовались разные подходы к интерфейсу, а правила применения компонентов не были зафиксированы.

Задача

Провести анализ использования компонента переключатель (toggle), чекбокс (checkbox) и таблицы во внутренних и внешних проектах компании, систематизировать варианты, описать назначение и показать применение в интерфейсах.

Исследование

Чтобы разобраться в устройстве UI-kit и правилах использования компонентов, я изучала внутреннюю дизайн-документацию и консультировалась с более опытными дизайнерами компании.

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

Так я могла сопоставить три источника: документацию, компонент в Figma и его фактическую реализацию в продуктах.

Проверка документации на практике

Для наполнения документации я изучала внутренние материалы, консультировалась с более опытными дизайнерами и проверяла интерфейсы на тестовых стендах внешних проектов.

На примере toggle обнаружила расхождения между описанием в Figma и реализацией: некоторые указанные состояния отсутствовали в продуктах, а цвета компонента не соответствовали новому UI-kit.

Я обсуждала эти несоответствия с дизайнерами и разработчиками, уточняла актуальные состояния и особенности применения в других проектах, в том числе использование переключателя с badge, на основе проверки исправляла компонент и обновляла документацию.

Решения

Я описывала компоненты по принятому в компании шаблону из четырех секций:

• Info — общая информация о компоненте: для чего он предназначен и какие задачи решает.

• Components — сам компонент и его варианты в Figma.

• Showcase — витрина вариантов с пояснениями, когда следует использовать каждый из них.

• Templates — примеры применения в интерфейсах, типичные паттерны и ссылки на страницы продуктов, где встречается компонент.