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

Продукт-дизайн.

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

ы предоставим краткий отчет по каждому инструменту, объясним, почему он полезен, приведем примеры, ссылки на релевантные ресурсы по теме для более углубленного изучения.

Это длиннопост, так что запаситесь терпением! Вам необязательно читать все по порядку, можете спокойно перескакивать на нужные разделы, которые на данный момент для вас актуальны. Вот краткое содержание:

  • Выработка концепции продукта
  • Ресерч и валидация
  • Понимание дизайн-систем
  • Быстрая идеация
  • Понимание пользователей и связей
  • Подготовка к дизайну
  • Дизайн и разработка

Ну что, поехали!

Выработка концепции продукта

Будущий пресс-релиз

Продукт-дизайн. Будущий пресс-релиз

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

Манифест

Продукт-дизайн. Манифест

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

Ресурсы

Полное руководство по выработке концепции продукта и его преимуществ
Написание концепции продукта
Костяк бизнес-модели
Дизайн начала
Объектно-ориентированный дизайн (ru)

Ресерч и валидация

План ресерча

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

Задаем правильных вопросов

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

В чем самая большая сложность________?
Расскажите, когда вы в последний раз________?
Как вы попытались решить эту проблему? Расскажите подробнее
Опишите типичный________?
Вы упоминали, что ________, расскажите подробнее.
Как часто вы________?
Если бы вам пришлось обучать кого-то________, что бы вы говорили?
Случалось ли с вами ________? Что вы делали?

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

Синтезирование данных

Продукт-дизайн. Синтезирование данных

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

Тестирование пользователей

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

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

Эвристическое оценивание

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

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

Ресурсы

План UX-ресерча, который понравится стейкхолдерам
Как превратить интервью пользователей в корпоративные продажи
Как организовать сессию UX-ресерча
5-шаговый процесс пользовательского ресерча
Использование Trello для синтеза пользовательского ресерча
10 эвристик юзабилити для дизайна пользовательских интерфейсов

Понимание дизайн-систем

Аудит платформы

Продукт-дизайн. Аудит платформы

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

Карта экосистемы

Продукт-дизайн. Карта экосистемы

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

Конкурентный и сравнительный аудиты

Продукт-дизайн. Конкурентный и сравнительный аудит

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

Ресурсы

Пошаговое руководство по эффективному UX-аудиту
Как просчитать конкуренцию
Проведения исследования конкурентов

Быстрая идеация

Дизайн-спринты

Продукт-дизайн. Дизайн-спринты

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

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

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

Ресурсы

Дизайн-спринты в цифровой телепатии
Спринтование
Методология спринтов от Google Ventures
Как выбрать самые важные задачи для дизайн-спринта
Как собрать команду для дизайн-спринта
Дизайн-спринт продукта
Часто задаваемые вопросы по дизайн-спринтам

Понимание пользователей и связей

Прото-персонажи

Продукт-дизайн. Персонажи

Честно говоря, составление персонажей может быть пустой тратой времени. Для ситуационного контекста метод Job stories показал отличную эффективность (мы это рассмотрим детальнее). Но когда нужно определить множество типов пользователей, которые будут взаимодействовать с одним продуктом разными способами, стандартные прото-персонажи очень полезны. Не всегда нужно углубляться в их покупательские привычки или придумывать функциональные имена для их 2.5 детей, но обязательно стоит определить их цели и поведения.

Job Stories

Продукт-дизайн. Job Stories

Когда_______________ (ситуация), я хочу ____________ (действие/мотивация), чтобы __________ (результат).

Job stories были разработаны и популяризированы ребятами из Intercom. Job story — это описание функции из перспективы что-нужно-сделать. Это эффективный прием для определения задачи без предписания решения. Такой подход вдохновляет на креатив, стимулирует коллаборацию в команде, помогает добиться хорошей организации. Сам фреймворк job story строится на основе user story. Структура user story включает в себя:

Как ____, я хочу _____, чтобы я мог _______.

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

Когда я _____, я хочу _______, чтобы я мог _______.

Например:

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

Объектно-ориентированный UX

Продукт-дизайн. Объектно-ориентированный UX

Используя фреймворк объектно-ориентированного UX (OOUX), мы идентифицируем объекты, их атрибуты, метаданные и связи. Это упражнение помогает понять, для «чего» нужно разработать дизайн и как эти вещи связаны друг с другом. На этом этапе уже строятся догадки по поводу того, что должно быть на странице. Простыми словами:

  • Объекты — это существительные; элементы с характеристиками. Это чаще пользователи, документы или файлы.
  • Атрибуты — это части контента, ассоциированные с объектом, обновляемые пользователем. В случае, если пользователь выступает объектом, атрибуты — это имя, имейл-адрес и номер телефона.
  • Метаданные — это информация, генерируемая системой. Если объектом выступает файл, метаданные должны включать размер, дату создания, последних изменений и тип файла.
  • Связи используются для определения, как каждый объект связан с другим.

Ресурсы

Как составлять прото-персонажи
Инструменты для создания прото-персонажей
Дизайн функционала с помощью Job Stories
OOUX: основа для дизайна взаимодействий

Подготовка к дизайну

Чистовик (вайтборд) сценариев

Продукт-дизайн. Наброски

Используя job stories и OOUX, мы определяем контент и связи и переходим к белой доске, чтобы начать решать проблемы. Есть целая наука, как использовать этот метод с цветами, фигурами и job stories. Почитайте пост, целиком посвященный этому вопросу.

Компонентный аудит

Продукт-дизайн. Компонентный аудит

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

  • Поля формы
  • Кнопки
  • Текстовые стили
  • Карточки
  • Модели
  • Сайдбары
  • Навигация
  • Списки
  • Таблицы
  • Уникальные модули

Ресурсы

Дизайн лучших концептов с помощью вайтбординга от DT
Почему разработчикам и дизайнерам стоит работать вместе
Анатомия карточек Trello

Дизайн и разработка

Определение дизайна

Продукт-дизайн. Определение дизайна

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

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

Прототипирование

Продукт-дизайн. Прототипирование

Прототипирование — очень важная часть дизайн-пазла. Оно помогает передавать видение продукта заказчикам, иллюстрирует желаемый результат разработчикам. Учитывая огромное количество доступных инструментов, мы не ограничиваемся каким-то одним. Мы оцениваем опыт использования разных, выбираем лучший. Один из наших любимых вариантов — Sketch + InVision, Axure, Principal, Flinto и Framer. Определите для себя удобный инструмент с помощью этого руководства.

Живые руководства по стилям и компоненты

Продукт-дизайн. Руководство по стилю

Мы часто используем руководство по стилям, основанное на 12-колоночной горизонтальной сетке, построенной в Bootstrap и Sketch. Благодаря ей нашу целостную дизайн-систему можно спокойно применять в промышленных масштабах. Мы определяем размер шрифта на основе относительного размера ема, используя строкомер. Для описанного подхода можно также использовать и популярную 8px сетку. Из инструментов мы в основном используем Sketch, экспериментируем с Adobe XD и Figma, следим за жесткой конкуренцией в праве считаться самым передовым инструментом для дизайна и прототипирования. Пусть победит лучший!

Собираем все вместе

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

Ресурсы

Методология атомного дизайна
Набор инструментов дизайнера для прототипирования
Калькулятор шкалы шрифтов
8-точечная сетка
Bootstrap для дизайнеров
Что дизайнерам нужно знать о Bootstrap

Продукт никогда не завершен, он всегда развивается

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