Жду ваши проекты 💙
Можно отсканировать код через мобильное приложение Telegram: Настройки > Иконка кода в правом верхнем углу > «Сканировать QR-код»
Развитие
дизайн-системы
Создание дизайн-системы и её документации для ImmunoMind — единые принципы, паттерны и компоненты, понятные всей команде, с открытым доступом и презентацией для удобного внедрения.
8 минут
Развитие
дизайн-системы
Создание дизайн-системы и её документации для ImmunoMind — единые принципы, паттерны и компоненты, понятные всей команде, с открытым доступом и презентацией для удобного внедрения.
8 минут
Когда я пришла в команду, у нас уже был узнаваемый визуальный стиль и набор компонентов, над которыми поработал прошлый дизайнер. Но система выглядела хаотично:
- одни и те же элементы выглядели и работали по-разному в разных частях продукта, что в том числе влияло на восприятие продукта пользователями
- много времени уходило на обсуждение визуальных деталей, в том числе на общих созвонах
- была снижена эффективность и скорость дизайна и разработки, фичи выпускались медленнее
- продукт рос и мы планировали расширять команду: дизайн-система должна была облегчить онбординг будущих коллег
Контекст
и проблема
Исследование
и подход
Аудит текущего UX/UI
Провела ревью платформы: собрала все экраны и компоненты, сравнила их между собой, выделила дубли и рассогласования. Провела ревью платформы.
Сбор обратной связи
Поговорила с разработчиками: узнала, что им сложнее всего имплементировать и где чаще всего возникают недопонимания
Сбор решений
Изучила лучшие практики: на крупные и популярные дизайн-системы. Посмотрела, что можно реализовать у нас на текущем этапе продукте
Библиотека компонентов
Собрала библиотеку компонентов с четкой структурой и описанием логики работы каждого компонента. Стиль продукта, взаимодействия и все состояния стали консистентными.
Структура документации
- Перед изучением: на этой странице объясняла всей команде, зачем нужна дизайн-система, правила и какую пользу нам это принесет.
- Принципы: 7 главных принципов нашего дизайна. Каждый вел на отдельную страницу с наглядными примерами.
- Бренд-библиотека: здесь фиксировали такие вещи как правила коммуникационного дизайна, палитру, правила работы с текстами (tone of voice), иконки и иллюстрации, лого и его варианты.
- Паттерны/повторяющиеся решения: цветовое кодирование, состояния элементов, структура и навигация, паттерны отображения ошибок.
- Компоненты: полный список элементов + FAQ по ним
- Обновления: список всех изменений в системе, чтобы разработчики могли быстро их находить.
Документация
Создала 16-страничную интерактивную документацию, которая была доступна всей команде. Зафиксировала там правила нашего дизайна на всех уровнях
Результат
- Чтобы документация не осталась «мертвой», я сделала большую презентацию для всей команды: объяснила пользу дизайн-системы простым языком и показала, как система сокращает время на разработку
- Появилась структурированная и консистетная библиотека компонентов, а также интерактивная документация в Figma + Notion (для быстрого доступа всей команде)
- Увеличилась эффективность и скорость работы дизайна и разработки
- Появилась база для масштабирования продукта
- Дизайн стал консистентным и узнаваемым для пользователей, и это в том числе положительно повлияло и на взаимодействие с платформой
