DesignHub

🌡️ Порядок действий на проекте (шаблон конструктора процесса)

1. Инициация

ЭтапАртефакт
1Изучаем вводныеСобираем вводные и структурируем их в figma или miro
2Собираемся с командой, обсуждаем детали, идем к заказчику и проходимся по тем же деталямЗапись звонка (при необходимости)
3Брифинг (после первой связи с заказчиком составляем точечные вопросы под его нишу)Данные в figma или miro
4Планируем свои работы, переоцениваемТабличка с оценкой (вероятно в google таблицах)
5Подготавливаем инфраструктуру проекта (файл миро, файлы в figma с китами, платформами и т. д., линкуем все друг с другом и дружим)В зависимости от необходимых этапов (UX/UI) разворачиваем и подготавливаем для работы figma или miro

2. Исследование и анализ

NameАртефакт
1Более глубокое погружение (конкуренты, тренды ниши, информация из открытых источников)Информация в структурированном виде в figma или miro
2Интервью с конечным пользователем (по возможности)Запись звонка и follow up
3Построение портретов и CJM (или JTBD — редко)CJM в miro
4Поиск решений (рядом в миро описываем развернутое решение проблемы)Решение figma или miro

3. Проектирование (UX)

NameАртефакт
1Обязательные брейншторм со всей командой (начинаем с презентации того что наанализировали, показываем как решаем проблемы и все ли понимают эти решения или есть что добавить, при возможности подключить к брейншторму клиента)Информация в структурированном виде в figma или miro
2Собираем фич лист с приоритетами (не большой как правило, показывает на какие фичи мы хотим обратить внимание)Фич лист с преоритезацией
3Собираем user-flowUser-flow
4Собираем варфреймы (средне детализированные прототипы)Ссылка на прототипы
5Создаем интерактивный прототип (при необходимости следующего пункта)Ссылка на интерактивный прототип
6Тесты интерфейса (коридорное тестирование или фокус группы)Информация в структурированном виде в figma или miro
7Визуальная концепция (возможно с парой анимаций)Дизайн в Figma
8Презентация для заказчика (pdf в несколько слайдов c описанием решений)PDF презентация

4. Защита

NameАртефакт
1Показываем клиенту и аргументируем наши решения (тут важен факт аргументации, мы не защищаем свою работу, мы аргументируем именно свои решения, которые заказчик еще не понимает, ровно так же как и мы часть его бизнеса)Удобный для нас формат

5. UI

ЭтапАртефакт
1Собираем UI KitОтдельный файл в Figma
2Начинаем проработку сценариев согласно варфреймам и визуальной концепцииОдин или несколько файлов с дизайнами в Figma
3Дорабатываем анимацииJSON с анимациями или подробная раскадровка с описыванием и тайм-кодами
4Презентуем клиенту (важно что бы он сказал что точно все принимает)Запись или скрин его подтверждения

6. Завершение и тестирование

ЭтапАртефакт
1Подготовка макетов для разработчиков (прибираемся в figma, раскидываем стрелочки при необходимости)Файлы в figma
2Подготавливаем материалы для макетов, для участия в конкурсах и прочие штуки по запросуОтдельная страница в figma с подготовленными работами для публикаций
3 Visual Question Answering (визуальное тестирование каждого билда)Страница в figma

7. Поддержка

ЭтапАртефакт
1Аналитика и поддержка изменений, продуктовый анализВыводы основанные на метриках в figma или miro
2Доработки по BackLogBackLog с приоритезацией и пометками о том что принято в работу и желательные даты к реализации (в любом удобном формате)
3Актуализация всех связанных материалов при добавлении новой фичиФайл figma и список номеров экранов для разработчиков, в которых происходили изменения