Методика проектирования цифровых продуктов

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

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

1. Ссбор информации всеми доступными способами

Определение задачи
Что нужно сделать (продукт с нуля или редизайн существующего)? Зачем,
какая основная цель? Какую задачу решаем? Какой результат хотим
получить в итоге? Как мы узнаем, что получили нужный результат?
Бизнес-модель
Какая бизнес-модель и как продукт вписывается в эту модель?
Функциональные требования
Какой функционал должен быть с точки зрения бизнеса?
Исследуем как сейчас решается задача
1. Какую задачу решают пользователи?
2. В каком контексте?
3. Какая основная цель?
4. Как делают это сейчас? Какие используются инструменты?
5. Что нравится? Что не нравится?
6. Какие есть идеи как можно улучшить?
Инструменты сбора информации
1. Анализ процесса с помощью CJM.
2. Сбор информации с помощью онлайн-опросника и живые интервью.
3. Анализ конкурентов или похожих продуктов.
4. Наблюдения за пользователями.
5. Личный опыт.
6. Любые другие способы сбора информации (ютуб и т. д.).

UX/UI Design Process

1

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

Анализ информации по методу Jobs-to-be-Done
1. Какие есть роли пользователей?
2. Какую задачу решают?
3. В каком контексте?
4. Какая основная цель?
5. Как делают это сейчас (пошагово)?
6. Какие используют инструменты?
7. Что не нравится?
8. Какие есть проблемы?
9. Какие есть идеи как улучшить?
Общее описание ситуации
Описать ситуацию по схеме:
● Роль (роли);
● Задача (задачи);
● Контекст;
● Основная цель.
Какой продукт нужно сделать
Определить какой продукт нужно сделать по схеме:
● Что нужно сделать (сайт, мобильное приложение, веб-сервис, ПО)?
● Для кого (роль)?
● Какую задачу решает (ценность)?

UX/UI Design Process

2

3. Концепция
Создать несколько концепций продукта,
протестировать и выбрать одну

Фокус на задачах и посик идей
1. Определить ключевые задачи пользователя.
2. Выделить текущие проблемы (если есть).
3. Поиск и анализ разных интересных решений (конкуренты, смежные
сферы, разные интересные продукты).
4. Найти идеи как решить текущие проблемы (если есть).
5. Найти разные идеи для ключевых задач.
Концепция (2–3 варианта)
1. Продумать логику ключевых сценариев (User Flow).
2. Прописать ключевые пользовательские сценарий.
3. Сделать черновую структуру (без подробной детализации).
4. Сделать бумажные наброски по сценариям.
5. Сделать прототип для ключевых сценариев.
Обсуждение, тестирование, доработка
1. Эвристическая оценка.
2. Обсудить концепции.
3. Подготовить сценарии тестирования и провести тестирование.
4. Доработать прототип для выбранной концепции или продумать
новую концепцию (если нужно).

UX/UI Design Process

3

4. Проработка
Детально проработать все сценарии и сделать
интерактивный прототип продукта

Требования
1. Описать функциональные требования для текущей версии и
составить бэклог для будущих версий (если нужно).
2. Описать технические требования (обсудить с разработчиками).
Проработка взаимодействия
1. Продумать все дополнительные сценарии (User Flow).
2. Прописать все пользовательские сценарии (если нужно).
3. Сделать детальную структуру по всем экранам.
4. Проработать интерактивный прототип (по сценариям).
5. Обсудить и протестировать (если нужно).
Проверка и обсуждение
1. Проверить все ли экраны проработаны.
2. Обсудить с разработчиками.
3. Протестировать (если возможно).

UX/UI Design Process

4

5. Оформление
Сделать графическое оформление
пользовательского интерфейса

Требования и вдохновение
1. Определить требования к графическому оформлению на основе
анализа текущей ситуации и задачи.
2. Найти примеры для вдохновения, которые соответствуют
поставленной задаче.
Концепция (2–3 варианта)
1. Сделать наброски графического оформления для ключевых экранов.
2. Обсудить концепции и выбрать один вариант.
Финальная проработка
1. Проработать графическое оформление для всех элементов.
2. Добавить оформление в прототип.
3. Сделать дизайн-систему (при необходимости).

UX/UI Design Process

5

6. Передача проекта
Подготовить документацию и передать
разработчикам

Документация
1. Проверить интерактивный прототип.
2. Подготовить документ с пояснениями (если нужно).
3. Передать все исходники и документацию.
Результат
Разработчики имеют детально проработанный прототип и
документацию, понимают как должен работать продукт и, в итоге, могут
реализовать проект самостоятельно.

1. Исследования, анализ ситуации и формирование требований к продукту

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

Перечень основных шагов, которые нужно пройти на этом этапе:

1. Определить конечные цели и потребности бизнеса.
2. Узнать кто конечный пользователь продукта, определить каковы его цели и потребности, с какими проблемами сталкивается сейчас и как он их решает.
3. Описать персонаж пользователя на основе полученных данных и держать его перед глазами в течение всей работы над проектом.
4. Изучить существующие технологии которые используются в данной предметной области.
5. Изучить уже существующие решения и конкурентов.
6. Проанализировать полученную информацию и четко выделить проблемы.
7. Найти идеи как можно решить существующие проблемы.
8. Отобрать идеи и описать требования к будущему продукту.

Бизнес-требования и портрет ЦА

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

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

Сбор необходимых данных

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

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

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

Анализ конкурентов и существующих решений

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

Анализ ситуации и генерация идей

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

Технические требования и ограничения

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

Функциональные требования

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

(!) Важность первого этапа

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

2. Проектирование интерфейса

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

Перечень основных шагов, которые нужно пройти на этом этапе:

1. Определить логику работы пользователя с продуктом с помощью диаграммы потоков задач.
2. Описать работы с продуктом с помощью пользовательских сценариев (охватить все ключевые сценарии).
3. Составить структуру (информационная архитектура).
4. Сделать первые концептуальные наброски.
5. Разработать прототип (при необходимости интерактивный).
6. Сделать эвристическую оценку.

Логика работы продукта

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

Пользовательские сценарии

Пользовательские сценарии помогают спроектировать и описать более детально процесс работы пользователя с продуктом, то есть тот самый пользовательский опыт (User Experience), при этом фокус держится на 4-х ключевых составляющих: контекст использования, задача, процесс решения задачи и конечный результат.

Поэкранная детализация и структура

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

Анализ решений для вдохновения

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

Первые наброски на бумаге

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

Прототипирование интерфейса

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

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

Оценка и обсуждение прототипа

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

(!) Важность второго этапа

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

3. Тестирование, доработка, графическое оформление и передача проекта в разработку

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

Перечень шагов, которые нужно пройти на заключительном этапе:

1. Провести тестирование и внести изменения.
2. Определить общее настроение, тон визуальной и текстовой коммуникации на основе исследований целевой аудитории, проработать несколько вариантов графического оформления для ключевых экранов.
3. Выбрать один вариант и проработать все экраны.
4. Проработать эффекты и анимацию.
5. Подготовить графику для вёрстки и руководство для программистов.
6. Проверить результаты работы программистов.

Графическое оформление

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

Карта навигации

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

Документация для разработчиков

Дизайнер готовит руководство с пояснениями для разработчиков и передает его вместе с рабочими файлами (прототип и графическое оформление).

Проверка результата

После разработки и запуска проекта желательно проверить результат, чтобы разработчики не внесли в него свои “улучшения”.

В заключение

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

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

Инфо о курсах 👉 https://www.facebook.com/opendesign.onlineschool

Инстаграмм 👉 https://www.instagram.com/opendesign.school/

Отзывы 👉 https://www.facebook.com/opendesign.onlineschool/reviews

Связаться 👉 t.me/alexvoloshyn