Разработка и внедрение новой дизайн-системы в Tarantool Data Grid

Tarantool — это база данных с открытым исходным кодом, которая умеет хранить все в оперативной памяти.
www.tarantool.io

Задача

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

Релизация

Я составила план по безболезненному внедрению стилей:

Типографика
Цветовая схема
Кнопки
Элементы форм
Таблицы
Прочие контролы
Иконки

Обновление проходило итерационно: делаем один пункт, смотрим тесты, внедряем, пробегаемся по всем страницам и смотрим не сломалось ли ничего, и так после каждого обновления.

Для начала были убраны заголовки, набранные верхним регистром, и удален красный цвета из типографики

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

Далее была поставлена цель избавиться обводок и теней в кнопках, чтобы не добавлять шум интерфейсу. Был оставлен только один стиль красный кнопки, который использовался для CTA.

Параллельно с задачей по обновлению стилей были и задачи по отдельным страницам, поэтому была возможность не только заменить стили но и проработать компонент таблицы более качественно. Все стили перенеслись и в другие таблицы.

С элементами форм оказалось сложнее всего. Внедрение оказалось более сложным, так как не было до этого единой системы и компоненты не были вынесены в UI-kit. В итоге обновились инпуты, селекты, тумблеры, чекбоксы и радиобаттоны, а также создана целая система отступов, которая покрывала все формы, которые были на данный момент на сайте.

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

Результат