Кейсы, заметки с тегом: процесс

Мобильная регистрация в Яндекс.Деньгах

Tue, 15 Mar 2016 15:32:00 +0300

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

В первом подходе просто примеряем десктопную версию в мобильную ширину.

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

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

Дорабатываем минорные сценарии, валидацию, ошибки, и прочую мелочь. Верстаем. Запускаем.

Результат. Мобильные регистрации выросли в два раза.

Страница-визитка

Wed, 25 Nov 2015 16:11:00 +0300

Задача. Дать возможность легко перевести деньги пользователю.

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

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

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

Первый подход почти сразу в точку.

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

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

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

Ищем варианты:

Из-за технических ограничений не можем сделать копирование по клику. Решаем вынести ссылку в отдельный этаж меню.

Верстаем. Запускаем. Следим за метриками. Готовим планы на будущие улучшения.

Моя страница-визитка

Платеж до востребования

Tue, 18 Aug 2015 14:24:00 +0300

Задача. Спроектировать страницу получения денег для десктопа и мобильных.

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

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

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

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

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

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

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

Верстаем. Запускаем. Следим за метриками.

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

Wed, 15 Jul 2015 15:03:00 +0300

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

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

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

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

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

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

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

http://money.yandex.ru/transfer

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

Wed, 20 May 2015 23:55:00 +0300

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Tue, 24 Mar 2015 00:18:00 +0300

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

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

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

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

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

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

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

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

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

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

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

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

Mon, 29 Sep 2014 23:05:00 +0300

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

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

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

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

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

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

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

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

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

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

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

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

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

Wed, 20 Aug 2014 22:19:00 +0300

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

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

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

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

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

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

Верстаем.

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

Wed, 06 Aug 2014 22:46:00 +0300

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

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

Форма очищена от ссылок на документацию. Одна общая ссылка теперь справочно стоит сбоку и не отвлекает от заполнения формы.
Форма аккуратно собрана в общей стилистике форм на сайте

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

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