От хорошего к великому
Развиваем дизайн-систему
Сибирикс

Развиваем дизайн-систему

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

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

Эффект маховика

«Эффект маховика» заключается в последовательном наращивании потенциала, переходящем в стремительный рост. Он был впервые использован основателем Amazon Джеффом Безосом, а затем стал широко известным благодаря книге Джима Коллинза «От хорошего к великому».

Чтобы помочь понять концепцию, Джим Коллинз использовал аналогию с тяжелым металлическим жерновом, установленным на горизонтальной оси. Его диаметр — более 9 метров, толщина — полметра, а вес — более 2000 кг. Ваша цель — заставить жернов вращаться как можно быстрее и дольше.
Чтобы начать движение маховика, необходимо приложить значительные усилия. Первые несколько сантиметров оказываются самыми трудными. Однако, если вы продолжите раскручивать маховик в том же направлении, постепенно становится легче. А затем, в один момент — происходит рывок, когда маховик набирает обороты почти сам по себе.

Как маховик, постепенно разгоняясь, наращивает свою скорость и мощь, так и должно происходить развитие дизайн-системы компании. Поначалу, двигая маховик, вы добиваетесь лишь незначительных изменений. Но прикладывая все большие усилия, вы достигаете более заметного успеха. И в какой-то момент произойдет рывок — маховик начнёт вращаться сам по себе.

Одна из самых известных историй о маховике — как Джефф Безос набросал концепцию Amazon на салфетке.
Оригинальный набросок Безоса

Вот как работает маховик Amazon:

  • В основе — максимальное удовлетворение потребностей клиентов, благодаря чему растет трафик.
  • Увеличение трафика на Amazon привлекает больше продавцов.
  • Увеличение количества продавцов на Amazon обеспечивает больший выбор товаров и лучшее удовлетворение потребностей пользователей.
  • По мере роста Amazon может оптимизировать издержки и предлагать лучшие цены, чтобы еще лучше удовлетворять потребности клиентов.

Как применить эффект маховика при создании дизайн-системы

Чтобы вся ваша дизайн-система, включая философию и концепцию бренда, визуальные ассоциации и маркетинговые планы, развивалась сама по себе, наращивая обороты, необходимо самостоятельно сделать первые «толчки»:

1. Вспомните ваши успехи

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

2. Составьте список неудач

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

  • Дизайн вашего сайта был создан лучшими специалистами, но не увеличил конверсию. Почему так произошло? Что нужно изменить? Возможно, следует включить дополнительные этапы тестирования в алгоритм создания дизайна?
  • MVP создавалось слишком быстро и не учитывало мнения пользователей. Что можно поменять в процессе разработки и согласования MVP?
  • Пользователи оказали слишком низкое доверие вашему новому ресурсу. Стоит ли его доработать или эта концепция оказалась нежизнеспособной? Как вообще относиться к таким ситуациям в будущем?

3. Сравните успехи и неудачи

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

  • Срок разработки MVP должен составлять не менее 3 недель;
  • Перед презентацией нового дизайн-продукта необходимо отдать его на аудит разработчикам;
  • В начале дня каждый сотрудник должен публиковать свои планы на день, чтобы каждый в команде был осведомлен о его прогрессе.

4. Сделайте эскиз вашего маховика

Когда вы собрали успехи, неудачи и выявили закономерности, пора заняться самым интересным — проработкой структуры вашего «маховика». У Джефа Безоса это заняло несколько минут — концепция Amazon была набросана на обычной салфетке.

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

5. Упростите и консолидируйте ваши мысли

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

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

В идеале, на вашем эскизе должно остаться 4−6 ключевых этапов.

6. Сверьте свой эскиз со списком успехов и неудач

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

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

7. Подключаем концепцию «ежа»

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

  • то, что ее действительно увлекает — например, изучение новых навыков или решение крупных задач;
  • то, в чем вы считаете ее лучшей — например, дизайн сложных CRM или анимированные сайты;
  • то, что является вашим экономическим двигателем — упрощение процессов или ускорение взаимодействия в команде.
Сравнив эту схему с эскизом «маховика», вы сможете добавить уникальности ключевым этапам. Они не просто будут указывать шаги развития, но и показывать, в какую сторону двигаться, и что это принесет команде.

Какие выводы по улучшению дизайн-системы вы сможете сделать

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

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

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