Дизайн-библиотека Бридж

Проект начался как подготовка к редизайну: дизайн-концепция была сделана на аутсорсе, а команда продукта собрала все компоненты в удобную библиотеку в новом дизайне и начала разработку с постепенным внедрением на прод.

Особенности проекта
У нас не было ресурсов на полноценную дизайн-систему, поэтому появился своего рода гибрид: часть токенов отгружалась автоматически (шрифтовые стили, иконки, цвета), а основные компоненты были разработаны так, чтобы их можно было вставить на место старых и просто «перекрасить» существующий продукт с минимальными корректировками.
Проблемы
Беспорядок в старом UI-kit
Много функционально одинаковых, но визуально разных компонентов, некоторые компоненты с прода отсутствуют в ките
Отсутствие процессов
Каждый стрим добавляет новые компонент без согласования с командой, разработка не в курсе изменений
Расхождения на платформах
Некоторые элементы iOS были не консистентны с дизайном на Android
Неполноценные компоненты
Концепт редизайна был сделан на аутсорсе и нужно было доработать некоторые компоненты под наши нужды
Этапы проекта
1Cтарый UI-kit: анализ и рефакторинг
2Создание, тестирование и рефакторинг новой библиотеки
3Выстраивание процессов работы с компонентами
4Разработка и ревью новых компонентов
Моя роль в проекте
Я приступила к проекту уже после первого этапа, так что работу вела только над новой библиотекой.
1Поддержка, рефакторинг
2Добавление компонентов
3Оптимизация работы написание гайдов и процессов
4Контроль качества проверка на кейсы и состояния, ревью
5 Ревью разрабатываемых компонентов
6Кросс-функциональная коммуникация
Рефакторинг
2 этап
Первая проблема, с которой мы столкнулись: исчерпание памяти в фигме и крэш файлов из-за тысячи скрытых слоев и вариантов в новых компонентах.
1632 вариантов ячеек (cell)
Ячейки после рефакторинга
Пересобрала массивные компоненты, используя boolean properties и удалила более 80к скрытых слоев. В итоге удалось уменьшить количество используемой памяти в два раза (с 98% до 46%), с библиотекой стало проще работать.
Так же, было сложно понять иерархию вариантов некоторых компонентов:
Неочевидная группировка кнопок, не понятен их приоритет на экране
25 разных шрифтовых стилей,  непонятная иерархия
Написала гайды по использованию и провела рефакторинг сложных компонентов и перестала получать вопросы по их использованию. Шрифтовых стилей стало 2,5 раза меньше, кнопки и другие компоненты получили логичную группировку, дизайн стал более консистентным.
Сделанные на аутсорсе иконки нам не подошли (разная плотность, плохо встают в кнопки, не масштабируются, не читаются). Ситуацию усложняло и то, что они были объединены все в один компонент, поэтому превью были недоступны (приходилось за каждой иконкой лезть в библиотеку, чтобы найти ее визуально)
За две недели удалила лишние иконки, добавила недостающие и перерисовала утвержденный дизайнерами состав. В итоге получили набор более читабельных иконок, поиск теперь занимает не более 4 секунд, а их количество сократилось почти в три раза.
Описание процессов
3 этап
Все этапы шли одновременно, и времени на детальную проверку компонентов не хватало, поэтому я написала пошаговую инструкцию по дизайну и передаче новых компонентов:
Компоненты передавались мной в разработку только после утверждения на дизайн-демо и наличии всех сопутствующих состояний и документа.  

Это помогло уменьшить мою вовлеченность в создание новых компонентов и сократить время от первого показа компонента до передачи в разработку.
Разработка и ревью
‍4 этап
Разработка компонентов началась почти сразу, как я приступила к работе над библиотекой и нужно было постоянно проверять сборки с компонентами на обеих платформах, писать ревью, поддерживать бэклог с правками.

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