Проблемы
На проекте отсутствовала дизайн-система или качественный UI kit.
В существующем UI kit множество проблем: слабый контраст цветов, неподходящая гарнитура, отсутствует система отступов и проработка стилей и токенов. Компоненты построены некачественно. Нормальной практикой было самостоятельное создание нужных компонентов на стороне разработки без участия дизайна.
Отсутствие единой библиотеки компонентов усложняло работу дизайнеров и разработчиков. Присутствуют различные стили, цвета, компоненты и паттерны взаимодействия в разных частях продукта. Новые фичи добавлялись без учёта общей логики.
Цели
- Построить масштабируемую дизайн-систему для AccORD и других проектов компании.
- Использовать эту дизайн-систему при редизайне AccORD, что бы сделать консистентный интерфейс – единые правила для цветов, типографики, компонентов и состояний.
- Создать качественные гайды к компонентам для дизайнеров и команды разработки.
- Сэкономить время на «рисование», чтобы направить больше ресурсов дизайна на исследования, проработку сценариев и улучшения UX.
- Увеличить скорость прототипирования для проверки гипотез.
Процесс работы
Я провела аудит текущего интерфейса и UI kit. Это позволило понять проблемы интерфейса, такие как слабая контрастность, неподходящая гарнитура, проблемы с компонентами. Опираясь на это мы приступили к созданию дизайн-системы.
Некоторые особенности дизайн-системы:
- Токены цвета имеют абстрактную семантику, что помогает более гибко использовать цвета.
- Чтобы внедрение системы прошло проще, мы тщательно документировали каждый компонент.
- Помимо гайдов, практически для всех компонентов были сделаны интерактивные прототипы для демонстрации взаимодействия.
Мы изменили контрастность цветов для более простого считывания информации.
Подобрали простую и более компактную гарнитуру, чтобы была возможность уместить больше контента в небольших блоках.
Собрали 40+ компонентов и сделали для каждого гайд и анимацию.
Сейчас frontend команда разрабатывает дизайн-систему. Мы постоянно находимся в тесном взаимодействии с ними, чтобы работа над ДС прошла максимально эффективно.
Так же дополнительно я провела серию созвонов с разработкой, чтобы помочь команде понять ценность дизайн-системы и качественно ее реализовать.
Влияние и планы на будущее
Мы улучшили доступность и консистентность. Работа с дизайн-системой привела к повышению эффективности процесса проектирования, теперь при работе над макетами больше времени уделяется на проработку сценариев.
Далее планируется развитие дизайн-системы с учетом отзывов пользователей и будущих задач.