Как получить список экранов и функционала из Value Proposition

Как получить список экранов и функционала из Value Proposition

Иван Серебренников, UX Boost

Привет! Чтобы показать, как можно получить карту экранов, если у тебя на руках есть Value Proposition, я решил спроектировать для себя небольшое приложение.

Пользователь — я сам (чтобы упростить исследование).

Приложение должно будет помогать мне легче достигать своих целей, и жить счастливо.


Итак, берем Value Proposition

И заполняем его.


Вот первая итерация.

Картинка большая. можно открыть в новой вкладке и почитать


Справа каша, хорошо бы как-то сгруппировать.

Картинка большая. можно открыть в новой вкладке и почитать


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

Как быть?

Давайте попробуем декомпозировать.


Вот первый кусочек:

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

Слева направо:

  • Задача, в рамках которой все происходит (проектировать сложные интерфейсы)
  • Боль, которую пользователь при этом испытывает (много метаний между делами)
  • Пейн реливер, который мог бы избавить от этой боли (помощь в фокусе. Заниматься долго одним делом, откладывая важное, но отвлекающее, на потом)
  • Фича/решение, которая будет предоставлять этот пенй реливер ("откладывалка" отвлекающего)

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

Буду ли я использовать именно его для создания продукта? Посмотрим.


Что дальше?

Нужно добавить еще кусочков.

Немного поколдуем, немного сгруппируем...

  • Одна задача — приводить проекты к успеху. Проектом я называю в том числе "организовать работу дизайн команды на проекте", или "провести воркшоп".
  • Четыре боли.
  • У обной из болей — два реливера.
  • Все это покрывается тремя модулями продукта, причем два из них пересекаются, когда покрывают боль "много метаний между делами"

Как это нарезать на кусочки? Нарезка вот такая:

Приводить проекты к успеху (задача):

  1. но целей слишком много (боль) — нужна помощь в правильной загрузке и отдыхе. Брать на себя столько, сколько могу сделать, иметь выделенное на отдых и восстановление (реливер) — в этом поможет умный постановщик целей (кусок продукта).
  2. но неточность целей (боль) — нужно, чтобы мои цели были поставлены в SMART — в этом поможет умный постановщик целей (кусок продукта).
  3. но есть страх, что не двигаюсь к целям (боль) — нужно, что путь к цели был построен понятно, был измерим, и было легко брать из него куски в работу (реливер) — в этом поможет трекер движения к целям (кусок продукта).
  4. но есть страх, что не двигаюсь к целям (боль) — нужно, чтобы я видел, что осталось для достижения цели, и легко мог прикинуть, сколько на это надо времени (реливер) — в этом поможет трекер движения к целям (кусок продукта).
  5. но много метаний между делами (боль) — нужна помощь в фокусе. Заниматься долго одним делом, откладывая важное, но отвлекающее, на потом (реливер) — в этом поможет откладывалка отвлекающего (кусок продукта).
  6. но много метаний между делами (боль) — нужна помощь в фокусе. Заниматься долго одним делом, откладывая важное, но отвлекающее, на потом (реливер) — в этом поможет трекер движения к целям (кусок продукта).

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

Как от этого придти к экранам?

Выберу один из пунктов, нарисую для него диаграммы, в которых будет:

  1. Сегодняшний сценарий, в котором пользователь Ваня страдает.
  2. Будущий сценарий, в котором пользователь Ваня счастлив.
  3. Дополнительный слой, в котором будет разложено поведение системы, требуемые экраны и пр.
Картинка большая, открывайте в новой вкладке


Я использовал знакомый мне кусочек BPMN. Отобразил самое ключевое для меня в сценарии. Тут пока: не показаны ошибки, есть белые пятна, которые надо бы проработать, а последняя часть, где Ваня таки проверяет почту, а приложение его сопровождает — вообще заменено одним большим прямоугольником. При этом мне все равно гораздо понятнее, что делать с приложением.

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

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

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

Что же получается по экранам?

  1. Обучающие скрины
  2. Уведомления
  3. Стики-нотс с:
  • чеклистами
  • опросниками
  • действиями
  • навигацией

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

Итого:

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


Пока все, спасибо за внимание!

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

И не забывайте подписываться на мой канал о UX



Report Page