Контекст

В Tados мы работаем над сложными продуктами и оптимизацией бизнес-процессов. Делаем инструменты для работы, конфигураторы, дашборды, административные разделы, интернет-магазины. Все это требует сложных интерфейсных решений: разнообразных компонентов — от простых текстовых полей до сложных вроде комбобоксов, дэйт-пикеров, а также паттернов — объемных форм, фильтров, таблиц.

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

Исследование

Технические особенности работы команды

  1. Долгий запуск. При каждом новом проекте все создаются с нуля: компоненты, паттерны, лейауты.
  2. Дублирование и расхождения. Одни и те же элементы реализуются по-разному, нет стандарта.
  3. Высокая стоимость поддержки. Ресурсы уходят на исправление и сопровождение разнородных решений.
  4. Трудное масштабирование. Новый функционал внедряется и доставляется до пользователей дольше, растет технический долг.

Последствия

  1. Долгий выход в релиз. Задержка запуска и валидации гипотез повышают риск неэффективных решений, тормозят монетизацию.
  2. Расход бюджета на исправления и поддержку. Замедляется возможность реинвестировать в развитие продукта.

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

Гипотеза: у команды появится практичный инструмент, который сделает работу удобнее, ускорит решение задач. Метрика: обратная связь команды.

Работа над дизайн-системой

Создавали дизайн-систему вдвоем с разработчиком: он отвечал за техническую реализацию, я за визуальную часть, пользовательское взаимодействие и структуру компонентов. Активно обсуждали решения, делились своими наработками, изучали best practices, по результатам результатам обсуждений вместе принимали решения и вносили улучшения.

На текущий момент дизайн-система поддерживает две темы: темную и светлую.

Палитра