CJM для интеграции двух финтех-продуктов

Как встроить к себе чуждую логику чужого продукта и сделать бесшовный интерфейс и UX.

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

Без этого можно упустить что-то в интерфейсе и потом доделывать ночами.
Особенно это важно, когда ты интегрируешься с другими продуктами. Тут нужно разобрать логику чужого продукта, чтобы встроить его к себе.

У меня как раз была такая история.

Я работал в криптовалютной бирже DSX. К нам пришёл создатель продукта Nordic Crypto. Его продукт — торговый робот, который совершает сделки за пользователя, следуя заданной стратегии, и через это поднимает доходность. Человек может положить свои деньги, и робот будет распоряжаться ими, совершая сделки и принося прибыль.

Зачем это было нужно

Nordic Crypto хотели открыть себе доступ к новому рынку и новым пользователям — это увеличивало их доход.

Нам в DSX было нужно, чтобы пользователи больше торговали, чаще двигали свои деньги — а значит, оставляли у нас больше комиссии.

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

(Ещё раз убеждаемся, что продуктовый дизайнер решает бизнес-задачи, а не просто проектирует UX и рисует интерфейс.)

Выбираем главные шаги пользователя

Это позволяет разложить создание фичи на отдельные задачи. Нужно было, чтобы пользователь:

Узнал о новом инструменте. Без этого остальные шаги, как бы хорошо они ни были продуманы, оказались бы бессмысленными.

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

Поверил. Тут надо убедить, что роботом стоит пользоваться — ведь речь идёт о том, чтобы доверить программе свои деньги и принятие финансовых решений.

Начал использовать. Теперь пора помочь включить робота, настроить и дать ему денег. Надо, чтобы пользователь не просто «попробовал», а вовлёкся в процесс, сделал первый шаг к повседневному и регулярному использованию.

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

Пользователь должен попробовать, получить деньги и продолжать использовать робота

А мы должны помочь в этом, убрать все препятствия на его пути.

Используем упрощённый CJM

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

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

Что было на входе? Несколько не очень понятных скриншотов и пара кадров из презентации:

Мне нужно было превратить эти кусочки в интерфейс, который подружит Nordic Crypto с биржей DSX 🙂

Как я делал эту схему

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

Сначала пользователь узнаёт о фиче, робот зарабатывает его начальное доверие. А в самом конце пользователь активно торгует (руками робота) и приносит нам много прибыли.

Когда я занимаюсь продуктами побольше, то использую в CJM вот такие шаги:

Привлечение.
Активация.
Вовлечение.
Удержание.

Фича с роботом меньше, и там это избыточно. Поэтому шаги другие, под конкретную задачу:

Рассказать пользователям, что появился новый продукт.
Продать фичу:

Рассказать, что за продукт, зачем он, почему хорош.
Снять страхи и продать идею использовать продукт (пользователи рискуют своими деньгами, решение непростое).

Помочь подключить торгового робота.
Обеспечить администрирование. Дать пользователю подкручивать настройки и ощущать себя у руля.

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

Ок, что дальше? Нужно показать, какие экраны потребуются, чтобы выполнить сценарий. Сказали — сделали.

Часть экранов простые. Некоторые — либо сложные, либо требуют много копирайтинга (тот же лендинг, например). У таких сразу показываем основные блоки.

Зачем такие детали?

Запросить у владельца продукта нужный контент.
Попросить копирайтера написать тексты для лендинга.
Отдать лендинг и часть остальных экранов дизайнеру.
Ничего не забыть.

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

Как схемы побеждают прокрастинацию

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

Это важно, потому что такие задачи затягиваются ещё сильнее, когда тебе влом вспоминать — «а что же там было и на чём я остановился?» И ты просто ничего не делаешь по задаче.

Посмотрев на схему, ты вспомнишь всё относительно быстро — и прокрастинация с воем бежит прочь.

Когда использовать схемы

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

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

Когда тебе нужно с кем-то договариваться: что-то объяснять по фиче, передавать в работу, проверять, верно ли ты понимаешь задачу и верно ли поняли тебя.

Схема упрощает синхронизацию. Работает это и вверх, и вниз — помогает при общении и с исполнителем, и со стейкхолдером. Горизонтально, кстати, тоже — когда надо что-то показать разработчикам или тестировщикам.

Когда не использовать эту конкретную схему

Когда у тебя большой продукт. Тут нужен будет полноразмерный CJM или ещё что-то серьёзное.

Когда ты планируешь конкретные экраны со сложной логикой переходов. Тут нужна уже большая детализация.

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

Что получит дизайнер, используя этот метод в своей работе

Карту того, что должно быть в фиче.
Ускорение. Кажется, что схема отнимет твоё время: сначала нарисовать её, потом UI... Но нет, схема сильно ускоряет работу с UI. Поэтому фича в целом делается даже быстрее (сильно меньше переделок и забытых экранов/состояний).
Возможность проверять себя. Там ли я, то ли я делаю, решаю ли главную задачу фичи.

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

Если человек заходит, смотрит и уходит (потому что ты не доказал ему, что робот ему нужен) — остальные классные экраны и возможности он просто не увидит. А когда у тебя есть пункт «Продать», про это уже не забудешь.
Синхронизацию с остальной командой. Имея схему, разработчики включатся раньше и фича выйдет в продакшен быстрее (и менеджер продукта скажет тебе спасибо за time to market).

Ведь разработчики уже будут знать:

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

Возможность получить хороший фидбек, и гораздо раньше. Покажи схему продакту, разработчикам, расскажи и объясни. Если они хорошего уровня, то дадут полезные советы (которые гораздо легче учесть ДО того, как всё нарисовано, а не после 🙂).
Быструю связь с фичей. Ты сможешь отключаться от задачи и легко возвращаться к ней (даже после долгого перерыва). Взглянув на схему, можно легко понять, что сейчас делать.

Схема спасает от прокрастинации и тупняков. Она позволяет каждый раз начать легко и быстро. Есть у тебя пара часов поковырять фичу — ты не убьёшь полтора из них на повторное вникание.

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

Почитать описание менторинга.
Задать вопросы и записаться на менторинг: @ivanuxboost (телеграм).
Записаться на бесплатный вебинар о навыках продуктового дизайнера.

* Можно записаться и только на занятия по схемам — тогда мы позовём тебя, когда дойдём в менторинге до этого блока.