Дизайн процесс чек-лист
Если вы дизайнер, то много раз сталкивались с бесконечным процессом правок, поиска решений и согласований с командой. В интернете написано много статьей на тему организации дизайн процесса, однако они дают общую картину.
Хочу поделиться своим процессом и тем, как я пришла к своей картине разработки дизайн решения.
Для каждого бизнеса и студии процесс будет свой. Я лишь даю рекомендации, о том, что мне помогло улучшить процессы работы над поиском и защитой решений перед командой.
Итак, я разделяю задачи от бизнеса по типам:
2. Крупная фича (может быть новая форма, новая функция и др.).
3. Доработки текущего интерфейса (более мелкие задачи, баннер поменять, кнопку перенести).
Для каждого из типов можно сокращать этапы, но лучше их пройти все.
Мелкие задачи: возможно пропускать этап 2, однако важно свериться с постановкой на дизайн.
Этап 1. Постановка задачи
Описание: Собираем внутренние данные.
- Определяем основных целей и задачи бизнеса
- Получаем данных от аналитика (технические ограничения, особенности проектирования, постановка на дизайн)
- Бизнес требования
- Определение аудитории бизнеса (на какую создаём ЦА)
- Определение проблемы/боли/ потребности — для чего создаем фичу.
Итог: понимание того что проектируем, для чего, какую потребность закроем.
Этап 2. Анализ и исследование
Описание: Изучаем потребности пользователей, сценарии использования похожих фич в продуктах, best practices на рынке. Проводим на основе полученных первичных данных брейншторм.
- Создание портретов пользователей или персон
- Анализ рынка
- User stories
- Job stories
- Качественные и количественные исследования
- CustDev
- Формулировка гипотез
- CJM/Blueprint
- Бенчмаркинг
- Список функций интерфейса
- Сортировка функций методом Кано
- Информационная структура
Итог: Получаем данные для проектирования интерфейса, определяем метрики успеха, определяем метрики на которые влияет фича.
Этап 3. Проектирование.
Описание: Формируем смысловое и функциональное решение нашей задачи, готовим решение к ресурсной оценке. Задаем вопросы разработчикам и аналитикам.
- Карта экранов
- User flow(основные сценарии)
- Userflow c экранами
- Поиск концепции визуальной
- Поиск рефенсов UI и функциональных
- UX копирайтинг
- Формирование гипотез
- Написание критериев оценки гипотез
Итог: Получаем экраны для сборки по сценариям и готовимся к этапу прототипирования.
Этап 4. Макеты дизайна.
Описание: UI и UX решение, готовимся к внутреннему тесту, собираем прототип, презентуем дизайн.
- Работа с референсами
- Дизайн-концепция
- Страницы/экраны
- Стейты, состояния, ошибки и т.д
- Создание первичных компонентов
- Ключевые адаптивы
- Кликабельный прототип (желательно на интерактивных компонентах)
- Презентация дизайна
Итог: Получаем прототип для тестирования.
Этап 5. Тестирование.
Описание: Проверяем на соответствие изначальной задаче. Делаем доработки.
- Тестирование командой
- Экспертное тестирование (бизнес и заказчики)
- Коридорное тестирование
- Тестирование на респондентах
- Запуск А/В тестов
- Ю-тесты
Итог: Проверяем гипотезы, фиксируем находки и артефакты, создаем бэклог, пишем доработки по дизайну и дизайн решениям. Если нужно, возвращаемся на Этап 2 и 3.
Этап 6. Передача макетов в разработку.
Описание: Если внутреннее тестирование прошло успешно и не нужно изменять интерфейс то готовим макеты к использованию для команды, поддержки и frontend разработки.
- Стили типографики
- Пере используемые блоки (расширяем дизайн систему)
- Чек-лист подготовки к front-end
- Auto Layout
- Variants
- Система отступов
- Цвета
- Сетки
- Анимация и микро-анимация
- Микро UX
- UI Kit или дизайн система
Итог: Готовое решение для верстки.
Этот процесс помогает оценить свое дизайн решение, понять в какой точке находишься при проектировании интерфейса и, если нужно, куда можно откатиться на шаг назад. Дизайн процесс нужен ради пользователя и бизнеса, некоторые этапы можно упростить или вовсе пропустить.