SberInfra, редизайн дизайн-системы
Доброжелательный
Внутренний инструмент управления ИТ-инфраструктурой
Год
2022-2026
статус
Действующая внутренняя система
Инструменты
Figma
решения
Изменение дизайн-системы, Исследование пользователей
«После»
Финальный дизайн показан в самом начале — не для того, чтобы пропустить процесс разработки, а чтобы вы увидели конечную точку до начала пути. Все решения, которые легли в основу каждого экрана, подробно описаны ниже.
Проблема
Предыдущий дизайн не был рассчитан на масштабирование: он поддерживал существовавшие на тот момент функции, но трещал по швам при попытке добавить новые. Интерфейс требовал полного переосмысления, а не просто косметического ремонта.
Исходной точкой был не макет в Figma, а продукт в том виде, в каком он реально работал на продакшене. Отзывы о UX были положительными: пользователи понимали сценарии и успешно справлялись со своими задачами. Но вот с интерфейсом всё было иначе: вопрос «когда уже будет новый дизайн?» постоянно звучал от всей пользовательской базы. Этот сигнал и лег в основу нашего брифа.
Процесс
Каждый компонент приходилось согласовывать с командой фронтенд-разработки, которой нужно было оценить трудозатраты на внедрение еще до начала каких-либо работ. Эта оценка вскрыла давний конфликт: инженеры уже давно настаивали на рефакторинге фронтенда, и редизайн стал отличной возможностью наконец-то его провести.
Это привело к необходимости выбора: либо «включить рефакторинг в рамки проекта и сделать все как надо», либо сократить объем работ, запуститься быстрее и показать руководству видимый результат раньше. Решение зависело не только от меня. В итоге мы с командой разработчиков нашли компромисс: частичный перенос кода, ограниченный именно теми областями, которые влияли на время загрузки интерфейса. Редизайн продолжился, инженеры избавились от части критического технического долга, а сроки проекта остались вполне разумными.
Процесс начался с жесткого ограничения: один дизайнер полностью, от начала и до конца, отвечал за каждый компонент, каждое решение и каждое согласование.
Я провел серию поэлементных проверок реализуемости совместно с инженерной группой — каждый компонент оценивался с точки зрения затрат на внедрение, прежде чем его утверждали в проекте.
История изменений
Каждое изменение в любом элементе тщательно фиксировалось, чтобы команда разработчиков четко понимала, что именно меняется. Это стало единственным источником достоверных данных в процессе реализации — никаких догадок и двусмысленностей по поводу того, что изменилось, что осталось прежним и почему.
Архитектура токена
Единственное, что отлично выдержало редизайн, — это архитектура токенов, которую мы оставили нетронутой. И это был хороший знак: значит, фундамент был заложен правильно, даже если внешняя часть требовала доработки. Что я действительно расширил, так это область покрытия. Были обнаружены существующие состояния токенов, специфичные для этой системы, которые ранее не были учтены. Я добавил несколько десятков новых токенов, чтобы закрыть эти пробелы. Самым заметным из них стало состояние отклонения («declined»), специфичное для этой системы, для всего набора кнопок. На бумаге это небольшие дополнения, но именно такие пробелы незаметно порождали несогласованность во всем интерфейсе, когда никто не мог точно понять, в чем именно проблема.
Руководство по токенам
Из всего созданного в этом проекте руководство по токенам — это то, чем я искренне горжусь. И дело не в том, как оно выглядит, а в том, какие возможности оно открыло. Инженеры сами, без каких-либо подсказок, обращались к нему, не раз возвращались с благодарностью и использовали его как основу, а не как ограничение. Когда разработчики сами говорят «спасибо», это значит, что дизайн-система действительно работает.
Обновленный темный режим
u0422u0435u043cu043du0430u044f u0442u0435u043cu0430 u0443u0436u0435 u0431u044bu043bu0430 u0434u043eu0441u0442u0443u043fu043du0430 u0432 u043fu0440u0435u0434u044bu0434u0443u0449u0435u0439 u0432u0435u0440u0441u0438u0438, u043du043e u043du0430 u044du0442u0430u043fu0435 u044du043au0441u043fu043bu0443u0430u0442u0430u0446u0438u0438 u0432u044bu044fu0432u0438u043bu0438u0441u044c u043du0435u0434u043eu0440u0430u0431u043eu0442u043au0438, u043au043eu0442u043eu0440u044bu0435 u043du0435 u0437u0430u043cu0435u0442u0438u043bu0438 u043fu0440u0438 u0442u0435u0441u0442u0438u0440u043eu0432u0430u043du0438u0438: u0444u043eu043du044b u0432u044bu0433u043bu044fu0434u0435u043bu0438 u043du0435u0437u0430u0432u0435u0440u0448u0435u043du043du044bu043cu0438 u0442u0430u043a, u043au0430u043a u044du0442u043e u043du0435 u0431u044bu043bu043e u0432u0438u0434u043du043e u0432 Figma.
u042f u0438u0441u043fu043eu043bu044cu0437u043eu0432u0430u043b u0440u0435u0434u0438u0437u0430u0439u043d u043au0430u043a u0432u043eu0437u043cu043eu0436u043du043eu0441u0442u044c u0441u0438u0441u0442u0435u043cu043du043e u0440u0435u0448u0438u0442u044c u044du0442u0438 u043fu0440u043eu0431u043bu0435u043cu044b: u0432u043cu0435u0441u0442u043e u0442u043eu0433u043e u0447u0442u043eu0431u044b u0438u0441u043fu0440u0430u0432u043bu044fu0442u044c u043eu0442u0434u0435u043bu044cu043du044bu0435 u044du043au0440u0430u043du044b, u044f u0440u0435u0441u0442u0440u0443u043au0442u0443u0440u0438u0440u043eu0432u0430u043b u0444u043eu043du043eu0432u044bu0439 u0441u043bu043eu0439 u0432u043eu043au0440u0443u0433 u0447u0435u0442u044bu0440u0435u0445u0443u0440u043eu0432u043du0435u0432u043eu0439 u0441u0438u0441u0442u0435u043cu044b u0432u044bu0441u043eu0442 u2014 u043fu043e u0430u043du0430u043bu043eu0433u0438u0438 u0441 u043cu043eu0434u0435u043bu044cu044e u0432u044bu0441u043eu0442 (elevation) u0432 Material Design, u0437u0430u0434u0430u0432 u043au0430u0436u0434u043eu0439 u043fu043eu0432u0435u0440u0445u043du043eu0441u0442u0438 u043eu043fu0440u0435u0434u0435u043bu0435u043du043du0443u044e u0433u043bu0443u0431u0438u043du0443 u0438 u043fu043eu0441u043bu0435u0434u043eu0432u0430u0442u0435u043bu044cu043du0443u044e u0441u0432u044fu0437u044c u0441 u043eu043au0440u0443u0436u0430u044eu0449u0438u043cu0438 u0435u0435 u0441u043bu043eu044fu043cu0438. u0422u043e, u0447u0442u043e u0440u0430u043du044cu0448u0435 u043au0430u0437u0430u043bu043eu0441u044c u043du0435u043eu0431u0440u0430u0431u043eu0442u0430u043du043du044bu043c, u043eu0431u0440u0435u043bu043e u0437u0430u0432u0435u0440u0448u0435u043du043du043eu0441u0442u044c u0438 u0441u043cu044bu0441u043b.
Докумeнтация коmпонентов
Документация к компонентам вышла далеко за рамки встроенного режима разработчика в Figma. Каждый компонент поставлялся с наглядной матрицей состояний — все состояния, варианты и варианты взаимодействия были представлены на одном интерактивном листе. Инженерам больше не приходилось разбирать файл по кусочкам, чтобы увидеть общую картину. Для одного лишь виджета выбора даты было описано семь состояний в четырех сценариях взаимодействия с отдельной диаграммой, показывающей изменение высоты элементов при наведении.
Типографическая сетка
Когда все компоненты были готовы, пришло время собрать первые реальные экраны. На бумаге — и в Figma — система работала отлично. Математические расчеты были верны. Но на практике экран показал совсем другую картину.
Проблемы, которые всплыли наружу, были классическими трудностями первой сборки: отступы, которые казались правильными на уровне отдельных компонентов, в общем контексте выглядели перегруженными; цвета, сохранявшие контрастность на бумаге, начали визуально сливаться на насыщенных интерфейсах; а шрифт, прошедший все проверки размеров, потерял читаемость в условиях реальной плотности информации. Но под всем этим крылась более тонкая проблема, которую не сразу удалось сформулировать: текст «плыл» по горизонтали. Не хаотично, а вполне систематически. Заголовок H1 стоял ровно на отметке 0px, а метка в модальном окне смещалась на 4px относительно той же базовой линии. Каждый элемент сам по себе был правильным. Но вместе они разрушали ощущение целостности интерфейса.
Решение было не просто визуальным. Я внедрил сетку базовых линий и выровнял каждый текстовый элемент по общей типографической оси, установив единое правило: любой текст, независимо от компонента или контекста, должен быть привязан к одной и той же горизонтальной базовой линии. Эффект смещения исчез. Но что еще важнее, система обрела недостающий принцип: внутренней правильности отдельных элементов недостаточно, если у них нет единой общей линии выравнивания.
Итоговый результат
Ответ инженерной команды не оставил места для двусмысленности — редизайн был встречен решительным решением «да». Качественная обратная связь, а не жесткие метрики: выборка из ~120 пользователей была недостаточно большой для статистической значимости, но сигнал был четким. Тимлид горел желанием увидеть следующую итерацию еще до того, как текущая полностью прижилась.
Когда вышла следующая версия, сигнал превратился в конкретную цифру: 92% положительных отзывов от пользователей. Для технической аудитории, которая редко разбрасывается похвалами, это не просто оценка — это заявление.
«Вишенка на торте»
Эта версия получила свое название: Seon UI — от корейского 새, что означает «новый». И это было не просто красивое название. Для продукта, накопившего за годы огромный визуальный долг, это имя стало осознанным сигналом — команде, пользователям и всем, кто будет работать с системой дальше, — что произошло действительно качественное изменение, а не просто очередной патч.
