Наша команда UI/UX три года работала над созданием Coherent Design System – индивидуальной системы дизайна, основанной на обширном опыте работы с клиентами из различных отраслей. Система помогает дизайнерам и разработчикам справляться с проектами, где стандартные решения не подходят. Сейчас она состоит из 160 компонентов для разработки мобильных и веб-интерфейсов, которые работают с React и другими фреймворками.
В интервью мы выясним, что собой представляет данная дизайн-система, как проходил процесс создания, зачем и кому она нужна. Также нам интересно узнать, кто и каким образом ее разрабатывал.
КОМАНДА
Алексей Новик, Денис Козюля, Ирина Лемешевская, Юлия Кобрикова, Ксения Горобюк, Ольга Жуковская, Роман Кучук, Татьяна Капица, Юрий Григорович.
О COHERENT DESIGN SYSTEM
РАССКАЖИТЕ КОРОТКО, ЧТО ТАКОЕ ДИЗАЙН-СИСТЕМА.
Юрий
Дизайн-система – это структурированный набор, или библиотека, компонентов, шрифтов, цветов, а также задокументированных правил (рекомендаций) по их использованию. Она позволяет дизайнеру и разработчику не тратить время на выяснение того, как компоненты должны быть устроены. Достаточно кастомизировать такие ключевые составляющие, как цвета, шрифты и форму, – и можно сосредоточиться на решении задач в виде high-fidelity макетов, а разработчикам – на трансформации этих макетов в готовый цифровой продукт.
Алексей
Дизайн-система для меня – нечто большее, чем просто набор «компонентов-кирпичиков» для сборки дизайна. Само слово «система» подразумевает, что есть зависимости. В нашем случае это и код, и вспомогательный инструментарий – все это в связке работает гораздо эффективнее. Отдельные продукты закладывают в свои системы даже тон речи, чтобы максимально соответствовать своей аудитории, но нам до этого еще далеко. Для Coherent Solutions это один из продуктов, который мы открыли для внешних пользователей, чтобы показать и доказать нашу экспертизу на деле, а не на словах.
КАК И КОГДА ВОЗНИКЛА ИДЕЯ СОЗДАНИЯ ВНУТРЕННЕЙ ДИЗАЙН-СИСТЕМЫ? С ЧЕГО ВЫ НАЧИНАЛИ РАЗРАБОТКУ?
Алексей
Мы с Денисом, когда доходит до этого вопроса, часто спорим. На мой взгляд, все началось три с половиной года назад. Начинал работать в одиночку, Денис подключился позже. Точно помню, что два процесса шли параллельно. Ребята собирали дизайн-систему под Sketch.app, который тогда еще активно использовался как дизайнерский инструмент. А я делал первые пробы собрать это в новом для нас инструменте – Figma.
На это было две причины. Первая – «зоопарк» из индивидуальных компонентов в куче внутренних проектов, которые повторяли друг друга с минимальными отличиями и были пустой тратой времени на разработку и саппорт. Вторая – библиотеки, собранные в Sketch, было неудобно распространять их между проектами.
В начале проекта мне пришлось пройти через некоторую бюрократию, чтобы дизайнеры получили апрув на использование Figma в компании. Это было чем-то новым – общение с командой Infosec, аргументация, лицензии и прочее.
Первый внутренний паблиш нескольких компонентов был сделан 3 марта 2021 года. Целью было проверить, как работает библиотека при подключении к другим файлам, так что считаем эту дату нашим «днем рождения».
КАК ДИЗАЙН-СИСТЕМА ИЗМЕНИЛА РАБОТУ КОМПАНИИ И ВЗАИМОДЕЙСТВИЕ С КЛИЕНТАМИ?
Денис
Сейчас дизайн-система используется преимущественно на новых проектах. Начиная со стадии пресейла и продолжая полноценной разработкой проекта, мы помогаем эффективнее справляться с UI-рутиной и даем сфокусироваться на действительно важных вещах вроде UX и продуктовых метрик.
Алексей
Текущий партнерский проект я собирал целиком на дизайн-системе. Для меня было важно применить ее по полной. Позитивные отклики были получены уже с первых недель, когда мы проводили брейнсторм-сессии с нашими партнерами – их восхитила наша скорость работы над новым решением.
А ЕСТЬ ЛИ УЖЕ УСПЕШНЫЕ КЕЙСЫ ВНЕДРЕНИЯ COHERENT DESIGN SYSTEM?
Алексей
Их несколько. Первым в моем списке будет победа в Innovation Sandbox (7th batch): для реализации проекта мы использовали еще черновую версию дизайн-системы. С одной стороны, это позволило нам больше сфокусироваться на исследованиях и понимании рынка, с другой – предоставить фидбэк о том, как функционирует система, что в ней хорошо, а что надо доработать.
Текущие проекты для наших партнеров собраны целиком на дизайн-системе. По ходу дела мы продолжаем находить новые точки импрува. Еще до второго релиза мы с Ромой «подтырили» друг у друга компоненты, которые были в работе: ему нужен был чат для пресейла, мне – графики для текущей работы. Оба остались довольны результатом.
Юрий
Я много работаю на пресейл-проектах, и часто неизвестно, какая дизайн-система будет использоваться. Кроме того, такие проекты очень короткие и требуют высокой концентрации на поиске дизайн-решений, что не оставляет времени на создание всех нужных составляющих с нуля. В таком случае я часто обращаюсь к Coherent Design System как к уже готовому набору компонентов, которые я минимально стилизую под брендовые требования клиентов.
Алексей
Кстати, сейчас у нас в работе несколько решений, которые смогут упростить этот процесс для дизайнера как на стадии подготовки проекта, так и в период долгосрочной поддержки.
Юрий
Также я работаю на внутреннем проекте, который постепенно перевожу на нашу дизайн-систему. А когда Coherent Design System будет иметь полноценный код, мы окончательно сможем перевести текущую библиотеку на новую, что станет хорошим началом во внутренних изменениях наших продуктов.
КАК ВЫ ОЦЕНИВАЕТЕ ОБРАТНУЮ СВЯЗЬ ОТ КЛИЕНТОВ И ПОЛЬЗОВАТЕЛЕЙ?
Ксения
Поскольку Figma не предоставляет статистику по использованию компонентов из Figma community, фидбэк собирается вручную. Опрашиваются знакомые дизайнеры вне компании и наши коллеги.
Татьяна
У нас было интервью с коллегами-дизайнерами, которое показало, что они к ней обращаются за компонентами, и посмотреть, как они сделаны. В целом, все отмечали, что дизайн-система получилась очень крутая и многофункциональная.
Алексей
Со стороны клиентов – в тех случаях, когда проходят живые сессии по импрувам на основе обратной связи – все просто в восторге от скорости получения нужного результата. Но фидбэка нам все равно не хватает, поэтому мы продолжаем его запрашивать у коллег.
О ТРУДНОСТЯХ
ПРИХОДИЛОСЬ ЛИ СТАЛКИВАТЬСЯ С КАКИМИ-ЛИБО СЛОЖНОСТЯМИ НА ПРОЕКТЕ? КАК ВЫ ИХ ПРЕОДОЛЕВАЛИ?
Алексей
Сложности возникают постоянно: процессы, приоритеты, аргументация, отсутствие стабильных релизов и активностей, так как команда все еще не формализована. К счастью, мы минимизировали бюрократию, и принятие решения не затягивается на недели, а происходит здесь и сейчас.
Юрий
Основные сложности на проекте связаны с поиском ресурсов на разработку, так как сам проект пока существует как инициатива энтузиастов-добровольцев, которые стараются создать продукт, значимый для своей компании и приносящий ей определенную пользу. Мы постепенно из дизайнеров растем в маркетологов, продавцов, SMM-специалистов и, возможно, в разработчиков. Самое сложное пока – найти нужную поддержку. Надеемся, мы дойдем до момента, когда желающих с нами поработать будет так много, что придется устраивать конкурс, и нашей единственной сложностью будет вопрос, как всех взять к себе.
КАКАЯ ЧАСТЬ РАБОТЫ НАД ДИЗАЙН-СИСТЕМОЙ ВАС РАЗДРАЖАЛА И ПОЧЕМУ?
Денис
Когда 80% сделано и нужно доделать остальные 20%. Когда ты понимаешь, что сделал все прикольное, а теперь нужно заняться рутинной частью проекта.
Юлия
Меня не раздражало, но немного печалило, что в документации нельзя было просто однажды написать «конец», закрыть ноут и радостно потянуться. Дизайн-система развивалась, обрастала новыми компонентами, характеристиками и переменными и, соответственно, требовала более подробного и расширенного описания. Но это не нытье. Помните, как, топнув по Луне, Нил Армстронг сказал, что это маленький шажок для человека и гигантский скачок для всего человечества? Так вот, маленькие печали для меня – это доказательство роста нашей дизайн-системы.
КАКОЙ ВАШ САМЫЙ БОЛЬШОЙ ФЕЙЛ ПРИ РАБОТЕ НАД ДИЗАЙН-СИСТЕМОЙ?
Денис
Без должного усердия команды вся работа над дизайн-системой могла бы стать большим фейлом. Но если серьезно, их миллион. Самый глобальный – мы начали делать инициативу «по приколу», не проработав запросы и потребности. Это как раз причина того, что мы до сих пор не миллионеры (смеется). Да, мы потратили много времени на разработку – зато получили большой опыт и пришли к результату.
О ЛИЧНОМ УЧАСТИИ И ЛИДЕРСТВЕ
КАКИЕ СИЛЬНЫЕ СТОРОНЫ УЧАСТНИКОВ КОМАНДЫ ПОСПОСОБСТВОВАЛИ УСПЕШНОЙ РЕАЛИЗАЦИИ ПРОЕКТА? ЗА ЧТО ВЫ МОЖЕТЕ ПОХВАЛИТЬ СЕБЯ И ДРУГ ДРУГА?
Алексей
Любопытство, в первую очередь. Дальше добавляли классические «смотри, как я могу» и «смотри, как надо», где мы с Денисом прошли по хорошей куче граблей в самых разных вариациях. Сейчас помогает информированность и более широкий взгляд на задачу, так как постепенно у нас сформировалось понимание потребностей, возможностей и ограничений. «Немного» нашей настойчивости и везения.
Юрий
Усидчивость, высокая концентрация внимания, умение проводить исследования, собирать информацию и требования, хорошие навыки работы в Figma, навык давать глубокий и детальный фидбэк, объясняя преимущества и недостатки тех или иных решений, умение презентовать и писать документацию, делегировать задачи, умение слушать и слышать, терпение.
Денис
Слабоумие и отвага (улыбается). Если серьезно, много чего держится на оптимизме. Еще это усердие, инициативность команды, желание сделать что-то крутое, несмотря на сложный путь разработки. Так у нас получается не только двигаться вперед, но и придумывать крутые нестандартные идеи, которые потом становятся частью дизайн-системы.
Юлия
Я дотошная, и мне нравится, когда красиво, талантливо и хоть чуточку полезно. Мне кажется, все у нас в команде такие, так что, ребята, наша дизайн-система – это красиво, талантливо и очень помогает в работе.
КАК ВЫ УПРАВЛЯЛИ РОСТОМ КОМАНДЫ И КАКИЕ СТРАТЕГИИ ИСПОЛЬЗОВАЛИ ДЛЯ ПОДДЕРЖАНИЯ ВЫСОКОГО УРОВНЯ СОТРУДНИЧЕСТВА И ПРОДУКТИВНОСТИ?
Алексей
Рост порой происходил хаотически: кому-то было интересно, кому-то нужно было чем-то себя занять, кого-то просили подключиться. Всем и каждому я старался найти применение по их возможностям и интересам. Со временем я делегировал это Денису, чтобы больше сфокусироваться на стратегии.
С продуктивностью у нас не всегда было хорошо, потому что инициатива не существует как проект Coherent Solutions – мы все работаем в свободном режиме, без жестких дедлайнов и строгих проверок.
У нас есть один колл в неделю, где обсуждаем свежие новости из мира дизайн-систем, прогресс по задачам, вопросы и предложения. Еще проводим один стратегический колл, где решаем, куда можно развиваться.
Денис
Объективно, за рост команды больше отвечал Леша. Я каждый раз говорил, что нам не нужно столько людей, так как не знаю, чем их всех занять, но в итоге всегда находилось настолько много новой работы, что нам снова не хватало помощников.
Что касается высокого уровня сотрудничества, я думаю, основной поинт в том, что люди шли чему-то научиться и поучаствовать в относительно необычной инициативе. Точно знаю: несколько ребят очень хотели разобраться в технических нюансах дизайн-системы, и у них это получилось.
Возможно, не последнее место занимали мои попытки персонализировать работу и распределять задачи по степени «интересности» и открытое общение с командой по всем вопросам, без затянутых историй о том, как у нас все хорошо, но пока видимых результатов нет.
О СЛЕДУЮЩИХ ШАГАХ И РАЗВИТИИ КОМАНДЫ
КАКИЕ У ВАС ПЛАНЫ НА РАЗВИТИЕ ДИЗАЙН-СИСТЕМЫ?
Алексей
Планов много, но все сводится к ключевому: хочется сделать полноценный продукт, который бы позволил сократить time-to-market и повысить эффективность команд, работающих над продуктами. Для этого нам нужно сделать еще несколько итераций: внедрить переменные для шрифтов и размерностей для возможности быстро задавать компонентам темы (например, светлую или темную); доработать черновик плагина, чтобы «мягче» работать с цветами.
Юрий
Мы хотим сделать из Coherent Design System полноценный продукт, который будут использовать на внутренних и внешних проектах. Он будет помогать дизайнерам собирать макеты быстрее и качественнее, минуя стадию Lo-fi дизайна, и фокусироваться на решении дизайн-задач, а не на том, как правильно собрать тот или иной компонент. Библиотека в Figma будет иметь прямую связь с кодом, и наши разработчики смогут быстрее трансформировать макеты в готовые интерфейсы, что поможет клиентам Coherent Solutions сэкономить ресурсы на свои проекты.
КАК ДРУГИЕ СОТРУДНИКИ КОМПАНИИ МОГУТ ПРИСОЕДИНИТЬСЯ К ИНИЦИАТИВЕ ИЛИ ВНЕСТИ СВОЙ ВКЛАД?
Юрий
В настоящее время команда работает на основе энтузиазма и альтруизма в свободное от клиентских задач время. Присоединиться к нашему проекту можно, обратившись к Алексею Новику или к любому из членов нашей команды. Работая над Coherent Design System, мы не просто создаем новый продукт, мы сами развиваемся, учимся новому и помогаем другим стать большими профессионалами. У нас есть потребность в разработчиках, и мы рады любой другой помощи и от дизайнеров, и от маркетологов.
Мы уже создали богатую библиотеку компонентов в Figma, у нас есть немалый бэклог задач по созданию новых компонентов и улучшению старых. Сейчас мы продолжаем работу над переносом всех компонентов в код, и здесь нам нужно больше рук, чем бы имеем сейчас. Кроме того, у нас есть много амбициозных идей по созданию плагинов, которые будут помогать и дизайнерам, и разработчикам.
В новых членах команды мы ищем стремление к развитию, самообразованию, желание помочь не только проекту, но и другим участникам, делясь своим опытом, идеями. Не обязательно быть специалистом senior-уровня, чтобы работать с нами. Нам нужны люди с достаточными амбициями, заряженные на прогресс и развитие, готовыми работать как самостоятельно, так и в команде.
Алексей
Есть три ключевых направления, где нам нужны люди:
- развивать компонентную базу, чтобы закрывать потребности по бизнес- и пользовательским решениям;
- развивать фреймворки, чтобы было проще собирать front и по возможности партнериться с Figma;
- помогать с плагинами для Figma, чтобы упростить работу с макетами и их передачу на разработку.
Если получится монетизировать все эти сферы, постараемся оформить постоянную команду.
НАПУТСТВИЕ
ЧТО БЫ ВЫ СКАЗАЛИ ТЕМ, КТО ТОЛЬКО НАЧИНАЕТ РАБОТАТЬ НАД ПОДОБНЫМИ ПРОЕКТАМИ?
Алексей
Поймите, зачем вам это надо, нет ли других решений, которые бы могли этот вопрос закрыть, и какие специфические моменты есть в вашем решении, чего нет у других.
Важно не забывать, что постепенно цели могут смещаться. Наши изначальные и текущие цели отличаются прилично. Чем больше входящих данных мы получаем, тем больше это влияет на дальнейшее развитие.
Юрий
Нет ничего невозможного! Любая идея может найти свое материальное воплощение. Ее нужно зафиксировать и развивать. Желательно работать не одному, а в группе единомышленников и таких же энтузиастов. Успех и навыки сами не приходят – к ним нужно идти.
