Дизайн-процесс в интерактивном агентстве

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

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

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

Видео-версия доступна на dribbblemeetup.ru

1. Поймите суть бизнеса

Первое с чего стоит начать, когда к вам приходит заказчик, будь то тендер или сразу контракт на проект, это начать задавать вопросы.

Нужно попытаться узнать о проекте, бизнесе и сфере деятельности клиента как можно больше. Только так вы сможете в полной мере понять какие запросы пользователя вы решаете и что хочет от вас заказчик. На этой фазе так же важно понять — кто тот человек, который будет принимать решения со стороны заказчика и что лично он от ваc ожидает. Этот момент может показаться не правильным для ориентира, но он крайне важен для того, чтобы проект действительно состоялся. Кроме того, искать компромиссы с заказчиком всегда более эффективно, чем бороться с ним, настаивая на своем видении.

2. Ведите учет обратной связи

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

Во время проекта вы получаете фидбек в самой разной форме — устно по телефону, в виде видеозаписи, по емейлу, в комментариях invision или PDF и так далее.

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

Открыть Feedback Tracker

3. Узнайте вашу целевую аудиторию

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

Полезная ссылка: A Gude to personas

4. Составьте гипотезы

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

5. Проверьте гипотезы

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

Для этих целей можно воспользоваться сервисами, типа Typeform.com или SurveyMonkey.com. Последние могут так же сами найти для вас представителей целевой аудитории и опросить её за вас.

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

6. Придумайте пользовательские сценарии

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

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

7. Составьте карту сайта

Теперь у нас есть достаточно знаний для начала работы над картой сайта. Главная задача — составить высоко-детализованную, продуманную карту сайта. Работа над картой сайта, как правило, не прекращается в течение всей фазы аналитики. Помощь в её составлении, в том числе, окажут и некоторые последующие фазы.

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

Скачать шаблон карты сайта

8. Составьте матрицу функций

Матрица функций — это документ, в котором вы записываете, упорядочиваете и держите перед собой все возможности и функции вашего будущего продукта. Очень удобно держать всё в виде таблицы. В такой форме легко получать комментарии от клиента и от девелоперов, а так же сортировать функции по сложности, приоритетности и, возможно, переносить что-то на следующую фазу проекта. Кроме того, матрица позволяет дизайнеру во время работы над проектом ничего не забыть из того, что было запланировано.

Скачать форму матрицы функций

9. Начните коммуникацию с разработчиками

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

10. Составьте муд-борд

Мудборд — это коллекция графических материалов, призванных передать определенное настроение.

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

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

11. Создайте лучший в мире фреймворк

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

Фреймворк — это базовая структура, вокруг которой строятся элементы интерфейса.

Создавая фреймворк, нужно подумать — а как еще можно решить задачу? Нужно суметь заглянуть в саму суть проекта и понять, какой же фреймворк в действительности красиво решит задачу.

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

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

12. Создайте look and feel и дизайн-язык

Не смотря на то, что в интерактивном дизайне чаще всего “форму определяет функция”, работать над look and feel уже можно начинать и раньше. Иногда и какое-то интересное чисто визуальное решение может натолкнуть на хорошую UX идею.

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

После утверждения фреймворка, нужно заняться превращением look and feel в дизайн-язык, то есть приведением набросков и отдельных элементов к понятной, обоснованной и логичной системе. Работа над дизайн-языком продолжается весь проект, он развивается по ходу возникновения новых и новых UX-задач, поэтому дизайн-язык, над которым вы работаете, должен быть максимально гибким и понятным всем членам вашей команды.

Посмотреть пример создания look-and-feel

13. Дизайн и UX

Wireframe и Визуальный дмизайн — результат тесной работы UX и визуального дизайнера

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

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

14. Прототипируйте

Прототипирование решает несколько задач:

  1. Проверка идеи. Действительно ли Ваша идея работает и понятна, исправить ошибки на ходу.
  2. Юзер-тест интерфейса и выявление логических ошибок.
  3. Наглядная презентация заказчику. Заказчику будет проще реагировать на интерактивный прототип, чем на статичные картинки. Иногда, это хорошо работает в качестве инструмента убеждения в правильности ваших решений.
  4. Наглядное руководство для разработчиков.

Сейчас прототипирование стало очень доступно всем дизайнерам. Самое простое — это Invision и Marvel — онлайн сервисы прототипирования, не требующие никаких дополнительных знаний.

Для более точной имитации реального приложения или сайта, включая анимации, есть большой выбор программ, таких как Principle, Framer, Origami, иногда After Effects. Основным функциям Principle можно научиться недели за две и вы сможете буквально на ходу превращать ваши статичные дизайны в интерактивные прототипы с крутой анимацией.

15. Создайте стайл-гайд

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

Подробнее о том как правильно составить стайл-гайд можно узнать здесь.

16. Организуйте файлы и слои

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


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

Чтобы следить за обновлениями, подпишитесь на мой twitter, dribbble, behance и еще на что-нибудь.