Развитие дизайн-системы

Создание дизайн-системы и её документации для ImmunoMind — единые принципы, паттерны и компоненты, понятные всей команде, с открытым доступом и презентацией для удобного внедрения.

8 минут

Когда я пришла в команду, у нас уже был узнаваемый визуальный стиль и набор компонентов, над которыми поработал прошлый дизайнер. Но система выглядела хаотично:

одни и те же элементы выглядели и работали по-разному в разных частях продукта, что в том числе влияло на восприятие продукта пользователями
много времени уходило на обсуждение визуальных деталей, в том числе на общих созвонах
была снижена эффективность и скорость дизайна и разработки, фичи выпускались медленнее
продукт рос и мы планировали расширять команду: дизайн-система должна была облегчить онбординг будущих коллег

Контекст и проблема

Я начала с аудита текущего UI/UX: собрала все экраны и компоненты, сравнила их между собой, выделила дубли и рассогласования. Провела ревью платформы.
Также я поговорила с разработчиками: узнала, что им сложнее всего имплементировать и где чаще всего возникают недопонимания

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

Собрала библиотеку компонентов с четкой структурой и описанием логики работы каждого компонента. Стиль продукта, взаимодействия и все состояния стали консистентными.

Решение: библиотека компонентов

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

Перед изучением: на этой странице объясняла всей команде, зачем нужна дизайн-система, правила и какую пользу нам это принесет.
Принципы: 7 главных принципов нашего дизайна. Каждый вел на отдельную страницу с наглядными примерами.
Бренд-библиотека: здесь фиксировали такие вещи как правила коммуникационного дизайна, палитру, правила работы с текстами (tone of voice), иконки и иллюстрации, лого и его варианты.
Паттерны/повторяющиеся решения: цветовое кодирование, состояния элементов, структура и навигация, паттерны отображения ошибок.
Компоненты: полный список элементов + FAQ по ним
Обновления: список всех изменений в системе, чтобы разработчики могли быстро их находить.

Структура документации

Решение: дизайн-система

и документация

Чтобы документация не осталась «мертвой», я сделала большую презентацию для всей команды: объяснила пользу дизайн-системы простым языком и показала, как система сокращает время на разработку

Внедрение

Появилась структурированная и консистетная библиотека компонентов, а также интерактивная документация в Figma + Notion (для быстрого доступа всей команде)
Увеличилась эффективность и скорость работы дизайна и разработки
Появилась база для масштабирования продукта
Дизайн стал консистентным и узнаваемым для пользователей, и это в том числе положительно повлияло и на взаимодействие с платформой

Результат