Внедрение
Дизайн-системы
До 2025 года eXpress тратил по 3-4 спринта на реализацию фичи.
Сейчас мы тратим 1-2 и экономим 500к рублей компании.
Проблемы
-
1
Одна и та же кнопка могла выглядеть по-разному. Дизайнеры каждый раз искали по файлам актуальный вид макеты
-
2
Процесс создания новых интерфейсов был медленным, несогласованным. Нет стандартнов и понимания принципов проектирования
-
3
Чтобы поменять цвет бренда для заказчика разработчикам нужно было переписывать код вручную
-
4
Сложно поддерживать обновления
MVP
На момент старта работы над ДС, мы уже начали делать редизайн всего приложения. Сроки сильно поджимали, приоритет ДС понижали из раза в раз, так как результат по редизайну от нас требовали ежедневно.
Я понимала, что без ДС нас ждет большой провал и вне потока задач собрала ядро системы: 23 ключевых компонента: кнопки, поля, списки.
Внедрение
У нас было уже около 100+ макетов редизайна (о нём рассказала тут), которые послужили отправной точкой. Перенос макетов на компоненты занял несколько дней, но я знала, что эти 2 дня сэкономят нам недели в уже ближайшем будущем.
При проектировании новых макетов или продолжениях флоу, использовали только готовые компоненты. Параллельно адаптировали и дополняли дизайн-систему под редизайн.
Здесь же сделали систему токенов для цветов и типографику.
Масштабирование
Итак, система активно внедряется в наши проекты, разрастается и распространяется по отделам. Пора собрать результаты и корректировать работу. Начали с позитивного:
Мы (дизайнеры) смогли быстро реагировать на правки концептов
Аналитики сами проектировали варфреймы для тестирования гипотез или передачи идей нам
Разработка делала сторибук сразу с согласованными компонентами
Без анализа ошибок также не обошлось:
Макеты строятся из смысловых блоков. Любые изменения приходилось вносить вручную во всех флоу
Сформировали стратегию, в основу которой легли:
-
1
Атомарный подход
-
2
Перевод шаблонных блоков на компоненты
-
3
Создание подробных гайдов/документаций по использованию компонентов и блоков
Так мы спроектировали наши первые блоки, которые следом распространили по всем макетам.
Сложности
У нас нет дизайнера ДС. Каждый дизайнер своевременно вносит свой вклад в систему. Ранее дизайнер мог поправить компонент без понимания, что он может сломать что-то не в своих макетах.
Ввели систему согласования изменений. Теперь компоненты не меняются бездумно, а обызательно проходят через установленную процедуру.
Количество компонентов стремительно увеличивалось. Ориентироваться в файле стало невыносимо.
Создали систему навигации с возможностью быстро отыскать нужный элемент по его мини превью. Теперь не надо листать странички в поиске нужного.
Бизнес-ценность
Время разработки средней сложности фичи снизилась с 3-4 до 1-2 спринтов.
ДС экономит ~500тыс. сразу и еще больше в будущем, так как количество правок минимизировано.
Аналитики и продакты могут сами создавать варфреймы и тестировать гипотезы до момента передачи фичи в разработку.
Все решения задокументированы в Дизайн-системе. Даже новый сотрудник может зайти, изучить документации и приносить пользу в первые недели работы, а не месяцы. Дизайн одинаков во всех продуктах, приложение не выглядит как франкенштейн. Время на коммуникацию снижается, так как все ответы есть в ДС.
В основу системы мы закладывали масштабируемость. Каждый элемент создается с пониманием быстро растущего продукта и местом под новые элементы.
ура
