Яндекс Практикум — онлайн-курсы обучения IT-профессиям.

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

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

Мы начали с исследований:
• Изучили существующие курсы и собрали аналитику по используемым схемам и визуализациям. Выявили повторяющиеся паттерны и типовые лейауты, которые чаще всего встречались. Разобрали их до уровня атомарных элементов и выделили основные визуальные единицы, из которых строилась техническая графика.
• Метрики использования технической графики помогли нам приоритизировать, какие типы лейаутов подготовить в первую очередь, а какие типы можно объединить в один.
• Мы провели серию качественных интервью с командой продукта как с будущими пользователями разрабатываемой дизайн системы, чтобы понять какие у них сейчас есть сложности и чего им не хватает, как обычно они выстраивают свою работу и где процесс можно сделать прозрачнее и чётче.

Мы предположили, что если мы создадим единую библиотеку готовых элементов, то сможем ускорить создание курсов, сократить затраты на дизайн и обеспечить единообразие всех образовательных продуктов. Это позволит дизайн команде быстрее и системнее создавать новые решения, в некоторых случаях команда продукта даже сможет добавлять и редактировать контент без участия дизайнеров.

Мы разработали дизайн-систему для технической графики, которая включала:
• Библиотеку готовых решений в едином стиле для всех типовых видов визуального технического контента: таблиц, блок-схем, скриншотов, карточек продуктов на платформе, обложек учебных видео, PDF памяток.
• Атомарный подход — все элементы были разложены на базовые строительные блоки, которые можно комбинировать в разных вариациях по описанный в гайдлайнам правилам.
• Фреймворк в Figma — удобную систему гайдлайнов, из которой легко собирать новые графические материалы.

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