RU
Ctrl + ↑ Позднее

Форма перевода денег

Задача. Спроектировать новую форму перевода денег

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

Смотрим что у конкурентов.

Решаем сделать одну универсальную форму для любого сценария перевода. Начинаем проектировать и искать.

Понимаем, что логически форма делится на три блока: откуда, куда, сумма. Возникает вопрос: в каком порядке располагать эти блоки? Сначала отталкиваемся от задачи человека — перевести куда-то деньги. Пробуем примерить.→

Проводим коридорное тестирование. Выясняем, что у людей при совершении переводов, как правило, четкая схема в голове «откуда → куда → сколько». Решаем не ломать эту логику, раз для людей она понятнее. Меняем блоки местами.

Прорабатываем минорные сценарии, валидацию, ошибки. Меняем концепцию расположения лейблов на форме ради экономии места и простоты считывания — теперь они слева. Внедряем новую концепцию на всем портале Яндекс.Денег.

http://money.yandex.ru/transfer

Страница новых пользователей

Вторым шагом после редизайна регистрации стал процесс улучшения страницы для новых пользователей. Это та страница, на которую попадают только что зарегистрировавшиеся клиенты.

Текущая версия выглядела вот так:

Страница обладала недостатками:

  1. Чтобы сделать каждый из шагов инструкции на странице, нужно было переходить куда-то в другие места. Не было возможности выполнить их тут же.
  2. Стиль страницы отставал от общих тенденций визуального языка Яндекса. На странице очень много акцентов разных уровней — сходу сложно разобраться.
  3. Кажется, что все очень сложно и непонятно зачем нужно.

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

  1. Пополнить кошелек
  2. Сразу оплатить товар или услугу

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

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

Чтобы пользователям было проще разобраться в системе, мы добавили онбординг с объяснением основных элементов интерфейса.

Эти меры позволили увеличить активность пользователей после регистрации на 7%.

Дальше мы провели серию А/Б-тестов в различных состояниях этой страницы. Мы показывали предустановленной вкладой пополнение наличными, пополнение с карты, каталог товаров и услуг, показывали онбординг и не показывали его. Победил вариант с показом онбординга и каталога товаров и услуг сразу после регистрации.

Активность после регистрации выросла на 10%.

Следующим шагом мы решили проверить весь процесс погружения в систему целиком. Для этого отправились в UX-лабораторию, подобрали и пригласили респондентов, попросили их выполнить определенные задания, начиная «с нуля» — с регистрации. В итоге, обнаружили целый список вещей, в которых можно и нужно улучшать:

  • На главной странице для незалогиновых мы рассказывали о скидках и бонусах. По мере прохождения пользователя по сценарию регистрации и первой платежной активности, информация о скидках и бонусах исчезала, что приводило респондентов в недоумение.
  • На онбординге мы сообщали, что для платежей через Яндекс.Деньги необязательно пополнять баланс кошелька, можно просто привязать банковскую карту. Однако, вход в процесс привязки найти было крайне нелегко.
  • Люди не понимали как переключаться по вкладкам, потому что не идентифицировали их как вкладки.
  • В каталоге услуг, куда мы вынесли наиболее популярные наименования, люди не понимали, что это не полный перечень, и, не найдя нужного, уходили.

По итогам тестирования мы составили список из нескольких гипотез, которые необходимо было проверить.

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

Дальше мы перерисовали вкладки и попытались аккуратно представить методы пополнения кошелька, чтобы не размывать фокус.

И наконец, поэкспериментировали с каталогом: попытались представить поставщиков и категории.

В итоге, остановились на последнем варианте, так как он показывал полное разнообразие предложения.

Редизайн регистрации в Яндекс.Деньгах

Задача. Обновить регистрацию. Повысить конверсию из трафика в регистрацию.

В конце 2014 года Яндекс предложил концепцию «Острова», которая подразумевала не только технологические и интерфейсные решения, но также смену общего визуального языка портала. Все сервисы Яндекса стали наследовать новый минималистичный, очищенный от визуального шума стиль. Вместе с тем, назрела необходимость перевести бэкэнд и фронтэнд на новые технологии.

Текущий процесс регистрации разбит на три шага. Пробуем объединить все в один, чтобы не пугать пользователей длиной процесса. Практически сразу возникает идея избавить процесс регистрации от общей портальной навигации. Лишние ссылки отвлекают от процесса и снижают конверсию. Также, хочется попробовать создавать логин из номера телефона, дабы облегчить последующий процесс входа в систему — не нужно вспоминать логин, просто вводишь свой номер телефона.

Эволюция первого подхода:

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

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

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

Появляется идея упростить процесс придумывания логина: давать возможность пропускать этот этап путем входа через социальные сети. Тогда логин не нужен.

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

Верстаем. Запускаем. Смотрим воронки конверсий.

Результат. Количество регистраций в целом выросло на 40%. Количество регистраций через социальные сети выросло на 65%.

Выпуск аварийных кодов

Задача. Увеличить конверсию в выпуск аварийных кодов, попутно «причесав» страницу c таблицей аварийных кодов

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

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

Страница успеха перехода на одноразовые пароли

Текущая страница с таблицей кодов использует место нерационально:

Текущая страница

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

Новая страница

Делаем версию для печати:

Версия для печати.

Готовим гайды. Верстаем. Запускаем.

Результат: Выпуск аварийных кодов вырос на 25%.

Витрина Микрософт офиса

Задача. Сделать общую витрину продажи Микрософт Офиса для трех платформ.

Яндекс.Деньги продают продукты Микрософт Офиса. Для удобства навигации и выбора нужного пакета были спроектированы: разводящая страница, страницы выбора пакетов, а также страница с таблицей сравнения пакетов.

Разводящая страница

Страницы выбора пакетов

Таблица сравнения

Получаем согласование в Микрософте. Готовим гайды.

Верстаем.

Регистрация и настройка приложений API

Задача. Причесать форму регистрации и настроек приложений API.

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

  • Форма очищена от ссылок на документацию. Одна общая ссылка теперь справочно стоит сбоку и не отвлекает от заполнения формы.
  • Форма аккуратно собрана в общей стилистике форм на сайте
  • Нередактируемые поля перестали быть инпутами
  • Появились контролы для копирования идентификатора и секрета.
  • Форма аккуратно собрана в общей стилистике форм на сайте
  • Убрана дата регистрации приложения (она никакой роли не играет).

Результат. Количество регистраций приложений выросло на 20%.