Дизайн-система для рентген-оборудования

01Что было до

Интерфейсы компании жили сами по себе. Общей структуры не было, продукты выглядели по-разному, единого бренда не читалось. Поверх старого флоу годами накидывался новый, и интерфейсы отяжелели не только внешне, но и функционально. Каждая новая функция дописывалась в мануал, который к тому моменту разросся до большого количества страниц — их полагалось изучить медицинскому персоналу до начала работы.

1. 01Разные визуальные приёмы внутри одной компании
2. 02Печатный мануал для медицинских работников как точка входа в интерфейс
3. 03Каждый компонент пишется разработчиками вручную по PNG-макетам
4. 04Дизайн-долг растёт, провести быстрый аудит невозможно

02Дизайн-аудит

Начала с ревизии: разобрала существующие интерфейсы и отметила, что в них повторяется, а что уникально. Аудит показал, что согласованность в интерфейсах одной компании практически отсутствует. Для каждого аппарата придумывался новый внешний вид, который почти никак не связывался с его «собратом». В то же время вёрстка любого нового компонента писалась вручную по PNG-изображению, что совершенно не ускоряет разработку, а наоборот замедляет. Дизайн-аудиты при таком раскладе были зачастую провальными, а код-ревью удлинялся за счёт разнообразных написаний компонентов разными разработчиками. Также вход в продукт новых коллег затруднён, так как не было унификации как в дизайне, так и в написании кода.

03UI-кит и переход к системе

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

1. 01Редизайн первых экранов, утверждение направления
2. 02UI-кит на полное покрытие компонентов
3. 03Защита перехода от кита к системе перед стейкхолдером

04Компоненты через вайбкодинг

Разработчиков на заведение библиотеки не хватало: они были заняты продуктом, а каждый компонент дополнительно проходил долгий код-аудит. Я предложила завести компоненты с помощью нейросетей и вайбкодинга — и защитила это решение. Так получилось продолжать развивать дизайн-систему без отвлечения разработки от работы. Вайбкод компонентов проходил быстрое код-ревью, чтобы проверить нейронку на ошибки, а после утверждался в сторибуке.

1. 01Причина: нехватка разработчиков и долгий код-аудит
2. 02Рутина по заводу компонентов — на нейросети
3. 03Решения и правила остаются за дизайном