Процесс создания дизайн эко-системы за 20 дней

Есть много солопренеров и студий, которые занимаются веб-дизайном. Чаще всего в этой сфере стейкхолдеры приходят за дизайном сайтов и приложений. При этом не каждая команда способна сделать так, чтобы дизайн-проект вырос до визуальной экосистемы бренда. Ее польза очевидна для дизайнера, но не для стейкхолдера. Визуальная экосистема — мощный фундамент, который сокращает издержки времени и стоимости всех будущих визуальных и маркетинговых проектов бренда. Сильные дизайн-команды знают, как на примере одного проекта раскрыть свой профессионализм, показать пользу дизайн-экосистемы и получить доверие от стейкхолдеров на ее создание.

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

Стейкхолдерам. Часто я сталкиваюсь с тем, что партнеры не всегда понимают, как устроены процессы на нашей стороне. Эта неопределенность заставляет нервничать и мешает сотрудничеству. Надеюсь, эта информация развеет туман войны и улучшит ваше взаимопонимание с дизайнерами. Из текста вы также узнаете, что такое зрелый подход к дизайну.

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

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

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

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

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

Не участвует в тендерах. Если кто-то приходит с желанием сравнить студию с десятком других игроков в поисках лучшего ценового предложения — советую отказаться от этой войны. Оставайтесь как Швейцария. В сторонке, но со своими точными процессами и рецептами сильного дизайна.

«Студия не руки, не закрывает дыры и не участвует в тендерах»

Ценности как внутренний фильтр помогают работать с теми партнерами, которые близки по духу и отсеивать всех остальных. Чтобы избежать конфликтов и непонимания, стоит объяснить, почему работать вместе — не лучшее решение. Хорошим тоном я считаю порекомендовать взамен других ребят, которые могут решить проблему. Звучит как осознанное желание потерять потенциальных партнеров навсегда? Удивитесь, но спустя некоторое время они возвращаются с другим уровнем понимания дизайна и заключают долгосрочные соглашения.

Если стейкхолдеры оказались близки в ценностях, время идти на сближение с проблемами. На этом этапе вектор дальнейшей работы, ее продолжительность и успешное завершение определяют два документа: Lean Canvas и Brand Canvas. Сила этого подхода — в краткости. Среди двух дизайнеров быстрее поймет суть задачи тот, кто задаёт вопросы и заполняет два шаблона бизнес-модели. Дизайнер, который на старте бросается с головой в многостраничную документацию проигрывает.

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

Но перед тем как погружаться в подробности, есть несколько вопросов, на которые необходимо получить ответы от партнеров:

Почему вы хотите сделать это сейчас? Такой вопрос отрезвляет и заставляет подумать о необходимости. Иногда он оказывается очень неожиданным. Знаю случаи, когда люди задумывались, действительно ли это важно, или к дизайну можно вернуться позднее. Этот вопрос наравне с ценностями может отсеивать потенциальных партнеров. Но честность и желание работать с теми, кто понимает смысл своих действий, окупается уже в процессе.

Для чего нужен дизайн? Нужен ли он вообще? Это основной вопрос среди трех. Он показывает зрелость стейкхолдеров и их желание достигать целей с помощью дизайна, а не вариться в процессе, получая от него удовольствие.

Как оценить успех работы? Есть ли измеримая цель этой операции? Какие метрики использовать, чтобы оценивать работу не по шкале «нравится/не нравится»? Здесь все просто. Дизайн должен работать, а партнеры должны видеть общую точку назначения, без привязки к которой не будет завершения. Если стейкхолдеры бизнеса не дают четких границ, то задача дизайн-команды помочь им в этом, задавая вопросы.

«Общий посыл большинства запросов звучит так: „Помогите нам совершить качественный скачок в дизайне”»

Если говорить о задачах без полутонов, то общий посыл большинства запросов звучит так: «Помогите нам совершить качественный скачок в дизайне». Проблема актуальна даже с командой штатных дизайнеров продукта. Объясню, почему так складывается.

Ценность внутренней команды в глубоком знании продукта. Но если у этих дизайнеров нет сайд-проектов или экспериментов с трендами, то им сложно смотреть на дизайн глобально. А ежедневное вдохновение без работы руками так и остается теоретическим. Это существенно уменьшает шансы на отрыв от конкурентов за счет дизайна продукта. Ситуация усугубляется еще и тем, что масштабный редизайн бренды проводят раз в 3—5 лет.

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

После этапа целей дизайн-команда вместе со стейкхолдерами выстраивают контуры будущего образа. Для этого дизайнеры используют мудборд. Не все понимают истинное назначение этого инструмента. Его не следует путать с подбором картинок под настроение. Мудборд — область, где вкусы стейкхолдеров бизнеса встречаются с насмотренностью дизайнера. Именно внимательное отношение к этому мэтчу – залог работы без правок. Собрать хороший мудборд — один из базовых навыков дизайнера.

«Мудборд — область, где вкусы стейкхолдеров бизнеса встречаются с насмотренностью дизайнера»

Для начала дизайнер смотрит, как обстоят дела в нише. Оценивает доминирующие цвета, структуру и паттерны продуктов, использование пространства. Ищет привычные шаблоны для пользователей. Все это — нерв индустрии. При создании продукта важно соответствовать сложившимся традициям и метафорам. Если ворваться на рынок с креативной агрессией и сделать продукт наперекор всему, то, вероятнее всего, продукт вызовет неприятие у аудитории. Особенно если это проект от новичков или середнячков рынка. Лучший интерфейс — привычный, а кардинальные изменения — это все же привилегия лидеров рынка.

После анализа ниши дизайнер обнажает один из главных своих навыков — насмотренность. Он подбирает и создает образы продукта по своему вкусу, которые позже покажет на встрече партнерам. Встреча напоминает викторину, скрещенную с тестом Роршаха. Дизайнер демонстрирует стейкхолдерам несколько палитр и спрашивает: «Ну, что ты ощущаешь? Быстро-быстро, ни секунды не раздумывая, только эмоции!» И задает те же вопросы, когда показывает подборку фотографий, шрифтов, иллюстраций, элементов интерфейса. Эти чувства и ассоциации дают то видение партнера, которое он не всегда может сформулировать самостоятельно.

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

Далее дизайнер схлопывает свои предпочтения и вкусы стейкхолдера. В правильном мудборде важна именно гармония. Несерьезное отношение к видению партнера закончится словами: «Если вы хотели сделать все то, что мне не нравится, вам это удалось». Перекос в другую сторону оборачивается слепым копированием чужих вкусов и постоянной погоней за ними. Личный вклад в дизайн остается в стороне, а сам дизайнер выступает исключительно в роли «рук». Есть много ребят, которые могут превосходно копировать, да и спрос на эти услуги в дизайне есть. Копирование в самом начале пути — это один из способов научиться. Зрелость же дизайнера определяется созиданием и собственным вкладом в проект.

Когда этап мэтча заканчивается, дизайн-команда сосредотачивается на макетах. В понятие «макеты» я вкладываю значение чистой функциональности. Цель — сделать кликабельный прототип всего проекта. На этом этапе ни одна деталь, которую зафиксировали в Lean Canvas, не должна ускользнуть из фокуса.

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

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

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

На этом же этапе дизайнер зонирует продукт. В разных зонах обновленный голос звучить с разной тональностью, если это необходимо. Например, если это пара «приложение-сайт», то на сайте, где нужно привлечь внимание, голос будет громче. В приложении, напротив, он не должен мешать работе пользователя. Эти принципы будут составной частью будущей визуальной экосистемы.

Еще стоит упомянуть об одном из самых болезненных этапов для творческих ребят — правочках. Есть магическое число 3. Именно этим количеством стоит ограничить возможность партнеров вносить замечания в проект. Это не всегда работает на 100%, но ограничения все равно помогают. Стейкхолдеры подходят к этому этапу более ответственно, тщательно взвешивают слова и не отправляют замечания по несколько раз на дню. Так за три итерации ритмично и слаженно команда доводит проект до желаемого результата.

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

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

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

Сильная команда смотрит дальше и делает немного больше. Она отдает макеты, где все компоненты собраны в соответствии с правилами atomic design. Мельчайшие составные части — атомы — выстраиваются на холсте в составе молекул, организмов и шаблонов. Все названия стандартизированы, их легко различить и найти, чтобы заменить. Сетка проекта — единая для всех страниц, а размеры компонентов и отступы имеют кратные размеры и выглядят гармонично. Полюбуйтесь, как выглядит порядок:

Это не только забота о нервах разработчика. В рамках текущего проекта макеты быстрее встают на ноги. Это значит, что они быстрее продают, завлекают и взаимодействуют — в общем, приносят осязаемую пользу. В перспективе же такой подход экономит время фронтендеров и снижает конечную стоимость всех будущих проектов. Чтобы все это работало постоянно, как раз и нужна дизайн-система.

На техническом уровне ее польза в том, что однажды отрисованные дизайнером компоненты, уложенные в систему, разработчики используют во всех следующих спринтах. Если со временем для дизайна потребуются дополнительные элементы — алгоритм будет такой же. Дизайнер переосмыслит текущие компоненты и спроектирует новые. Он добавит их в систему, а фронтендер возьмет эти элементы в работу.

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

Вот так в моей вселенной выглядит сотрудничество между стейкхолдерами и дизайн-командами. Казалось бы, ничего революционного: все строится на пользе, внимательности и сотрудничестве. Однако к сожалению, не все команды действуют именно так. Повторюсь, я буду двумя руками за, если кто-то вдохновится и перестроит свой майндсет.

Стейкхолдеры, если дизайнеры задают на старте много вопросов и въедливо пытаются добраться до цели дизайна, не давят авторитетом и не ставят свои вкусы превыше ваших, последовательно идут по всем этапам и плотно взаимодействуют с вашей командой — они действуют в интересах проекта.

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

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

Жду всех, отвечу каждому!