September 3, 2024

Дизайн процесс

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

Задача -> цели бизнеса -> критерии успеха -> погружение в контекст -> мозговой штурм -> список гипотез -> приоритезация гипотез -> тестирование гипотез -> низко детальные прототипы -> проверка на пользователях -> обработка фидбека -> высоко детальные прототипы -> A/Б тест -> собираем метрики -> прод

А теперь пробежимся по каждому из этапов с пояснениями

  • Задача Четко сформулированная задача от заказчика — первый ключ в успеху. Иногда бизнес чётко понимает свои задачи, иногда — нет. Но всегда стоит провести брифинг с вопросами друг для друга, чтобы сверить ощущения от задачи, вместе посмотреть на проблему, которую мы хотим решить
  • Цели бизнеса Чтобы лучше понимать задачу, нужно знать, какие бизнес-задачи она решает. Нам нужно понять: что нужно бизнесу от нас? На какие финансы мы повиляем? Что мы хотим «починить» или внедрить нашим дизайном? На эти вопросы мы вместе должны подумать. Может, мы вообще должны решать другую бизнес-задачу
  • Критерии успеха Понимая задачи бизнеса, зная исходную точку мы прогнозируем, что придём к точке, лучшей чем сейчас. А как это замерить? Нужно определить, что является для нас результатом, Чаще всего это метрика: выросла конверсия, глубина просмотра, снизился процент отказов или любая другая метрика.
  • Погружение в контекст Когда задачи поставлены и мы понимаем, что нам надо сделать, идём смотрим, а как у конкурентов. Делаем табличку, в которой всё будет наглядно видно. Подмечаем всё по максимуму: как ведут на страницу, почему выделяется плашка и т.д. А ещё смотрим Ютуб по теме, читаем форумы, задаём вопросы знакомым. Цель этого этапа — максимальное погружение в контекст проблемы и анализ имеющихся решений
  • Мозговой штурм На мозговом штурме мы делаем оценку ситуации и составляем список наработок — гипотез, которые мы будем тестировать. Например: если дополнительно выделить баннер с формой обратной связи плашкой, это увеличит конверсию в этом блоке
  • Список гипотез Нужно использовать любой фреймворк для составления болей и потребностей пользователей и формирования списка гипотез. С прошлого этапа мы вытащили потребности и боли, а теперь должны сформировать список гипотез. Например: «Если будет больше 6 полей ввода, пользователи будут отваливаться после 4». И таких гипотез мы набрать несколько
  • Приоретизация гипотез Из списка гипотез мы должны выбрать те, с которых начнём. Можно использовать что-то наподобие матрицы Эйзенхауера:
  • Тестирование гипотез На этом этапе надо идти в глубинки, чтобы проверить, точно ли «болит» это у пользователей. Спрашивать не о гипотетических ситуациях, а тех, которые уже были с ними
  • Низко-детальные прототипы На этом этапе мы рисуем быстрые прототипы, в которых проходимся по флоу пользователей. Нужны нам для проверки наших гипотез, «обстукивания» элементов дизайна, форм и т.д.
  • Проверка на пользователях Делаем кликабельный прототип со всеми сценариями, которые мы хотим проверить и просим пройти по разным сценариям
  • Обработка фидбека Собираем фидбек, который получили на прошлом этапе и формулируем выводы: что хорошо, где пользователи путались, где не смогли выполнить задание
  • Высоко-детальные прототипы Доделываем прототипы в дизайне. На это этапе получаем детальные дизайн-макеты
  • А/Б тест Тестируем два лучших наших дизайн-решения на пользователях, показывая одним первое решение, а другим — второе
  • Сбор метрик Смотрим, какое решение имеет наибольшую конверсию
  • Выкатываем в прод Оставляем решение из предыдущего этапа и передаём его в разработку, контролируя точность переноса макета