Всем привет! Это команда UX-студии Everest. Мы разрабатываем личные кабинеты, порталы, интранеты и другие внутренние и внешние веб-сервисы с фокусом на пользовательский опыт.
В кейсе хотим поделиться нашим опытом работы над проектом для Soax. Это один из крупнейших в мире поставщиков прокси-серверов для бизнеса. Нашей задачей было переработать личный кабинет клиента, чтобы пользователь мог быстро и удобно получать необходимую информацию, изменять настройки и тарифный план.
В рамках задачи предстояло:
решить проблемы с логикой интерфейса: выделить пользовательские сценарии и облегчить запутанную структуру, в которой клиентам приходилось разбираться самостоятельно;
упростить систему покупки трафика;
разработать адаптивную версию личного кабинета под мобильные устройства;
вовлечь и мотивировать пользователей продолжить работу в сервисе.
Последний пункт был особенно интересным с точки зрения взаимодействия пользователя с интерфейсом. Многие клиенты не пользовались продуктом после покупки: им необходимо было помочь с настройкой, подсказать дальнейшие шаги, предложить техподдержку. Здесь помог наш опыт в проектировании и разработке онбордингов. Для Soax мы реализовали три вида онбординга: пошаговый, обучающий и с геймификацией процесса. Каждый — под определённую группу пользователей и для достижения конкретных целей. Но об этом расскажем дальше.
Бизнес-анализ и анализ текущего сервиса
Идентификация клиентов
Начали с глубинного интервью с клиентом. Выяснили, что прокси может использоваться как для легальных вещей, так и нелегальных. Вторых Soax строго отсекает. Для этого новым пользователям при регистрации аккаунта нужно пройти проверку KYC (Know Your Customer — верификацию личных данных). Процесс схож с проверкой при работе с банковскими системами и криптовалютами.
Клиент рассказал о высокой конкуренции в сфере и, что основным преимуществом компании является индивидуальный подход. Это проявляется, например, в процессе идентификации личности клиентов. Некоторые компании перед доступом к прокси проводят сложную проверку с предоставлением личных документов (паспорт, банковская карта, фотография документа регистрации ИП) и только после этого предоставляют доступ. В Soax этот процесс выстроен максимально лояльно и быстро. Компания предоставляет тестовый доступ к системе, чтобы можно было проверить, подходит ли её функционал для решений задач пользователей или нет.
Варианты оплаты
В начале мы уже писали, что модель подписки на тарифный план нуждалась в оптимизации. Клиенты оплачивали тариф (пакет), вырабатывали его и покупали новый. То есть им ещё до начала работы нужно было попытаться оценить необходимое количество мегабайт, а потом следить за остатком трафика и не забывать покупать новые пакеты.
Soax решил перейти на систему ежемесячной подписки. Клиент настраивает оплату один раз и работает, не отвлекаясь на покупку дополнительных пакетов трафика. При этом ему всегда доступна статистика использования тарифа, а система автоматически предлагает перейти на тариф с большим или меньшим количеством мегабайт исходя из данных статистики. Нам предстояло было адаптировать личный кабинет под изменения в политике оплат.
Возможность делиться трафиком
В текущей системе клиенты Soax сталкивались с проблемой разделения купленного трафика между своими сотрудниками. У одного пользователя могло быть несколько клиентов/проектов, а каждого клиента мог обслуживать свой менеджер. Для этого нужно делить купленный трафик, чтобы вести настройку и статистику по клиентам/проектам. Пример такого кейса — аккаунт SMM-компании с большим количеством клиентов и проектов.
Мы предложили способ быстро поделиться аккаунтом через email-адрес (как при работе с google-документами). Владельцу аккаунта в таком случае достаточно сформировать ссылку для нового пользователя на его почту. После перехода по ней гость получал доступ к личному кабинету и мог сам настраивать прокси для своих задач. У владельца аккаунта при этом оставалось право отключить гостевых пользователей, а также контролировать количество доступного им трафика.
Настройка прокси
Интерфейс настройки прокси состоял из двух типов (получить один IP или список адресов). В каждом из типов до 6 видов настроек, что путало пользователей, так как отличия были незначительные. Мы предложили пересобрать этот раздел, облегчить процесс заполнения данных.
Конкурентный анализ
Чтобы подробнее изучить сферу, провели конкурентный анализ. Взяли четырёх предоставленных бизнесом конкурентов. Ещё двух добавили по ключевым словам из поисковых систем, исключив брендовые запросы.
Анализ делали в двух видах. Первый — сравнительная таблица функциональности, UX-решений, UI-решений, маркетинга и бизнес-решений. Второй — текстовый документ-выжимка из первого, где мы подробно описали наиболее важные моменты.
Анализ UX-решений проводили на базе эвристик Якоба Нильсена. В ходе исследования получили несколько интересных инсайтов. Например, стало понятно, что при регистрации большинство компаний проводят скоринг (оценку) пользователей и запрашивают тип использования прокси. У всех есть онбординг, чат технической поддержки, а некоторые компании выделяют персонального менеджера. Все ведут статистику потраченного трафика, отображают информацию о балансе. Настройку прокси конкуренты выносят в отдельный раздел личного кабинета, где она представлена в виде шагов.
Разработка пользовательских сценариев
Перед началом проектирования построили пользовательские сценарии для ключевых целей: регистрация и авторизация, покупка подписки, настройка прокси, онбординг. Сценарии помогают лучше понять цели пользователя и выявить необходимое количество шагов с минимальными затратами сил, времени и внимания.
Архитектура навигации сервиса
Разработали карту разделов и страниц личного кабинета для понимания навигации. К ней же обращались в дальнейшем для проверки сценариев. Проверяли, удобно ли с такой навигацией двигаться назад и вперёд по сценариям.
Интерфейсные решения
Дашборд
Наиболее сложная и нагруженная страница личного кабинета, у которой есть три состояния.
#1 — Пользователь зарегистрировался, но ещё не купил подписку.
Цель дашборда как страницы, открывающейся по умолчанию, рассказать пользователю о способах покупки подписки и о получении доступа к прокси.
#2 — Подписка куплена, но пользователь ещё не настроил прокси.
Задача этого дашборда — направить пользователя в раздел с прокси.
#3 — Трафик с прокси начал расходоваться (самое нагруженное состояние).
Цель этого дашборда — показать, сколько трафика и портов осталось, дать возможность поделиться трафиком из подписки, продемонстрировать трату трафика каждым из субаккаунтов. А также сообщить пользователю, что его трафик подходит к концу. На дашборде в третьем состоянии у пользователя есть возможность докупить трафик или перейти на повышенную подписку.
Статистика расходуемого трафика отображается в виде линейной диаграммы с возможностью задать временной период, фильтровать по типу трафика, входящему и исходящему трафику.
Настройка прокси
Проектирование этого раздела имело ряд нюансов. К настройке прокси обращаются два типа клиентов. Одним нужен только логин, пароль и порт. Для других этих настроек недостаточно — они хотят получить прокси из конкретной страны или даже целый список прокси.
Для удовлетворения потребности двух групп пользователей мы разделили страницу на две вкладки: Quick access (Быстрый доступ) и Export proxy list (Получить список прокси). В двух вкладках дали возможность настроить фильтр по странам, но при этом в Quick access задействовано минимальное количество элементов управления (контролов), что позволяет разобраться даже новичку. Для более продвинутых пользователей предусмотрены расширенные настройки в Export proxy list.
Нам пришлось изучить все связи между контролами и тем, как они влияют на финальный результат. В итоге у нас получилась одинаковая структура для двух вкладок: сначала идут настройки, а в конце — результат этих настроек.
Также мы предусмотрели все состояния контролов и подсказки к ним для избежания ввода неверных настроек. Например, если пользователь решил авторизоваться через свой IP, но до этого не верифицировал его и не добавил в «белый лист», то система не позволит ему получить список IP-адресов. При выборе авторизации по IP пользователь сразу увидит сообщение о необходимости проверить свой IP, если он уже внес его, и добавить новый, если не сделал этого ранее.
Покупка подписки и финансы
В процессе выбора нужной подписки клиенту необходимо подобрать подходящий ему тариф или настроить свой, не сомневаясь в правильности решения. Поэтому мы добавили на страницу, помимо стандартных карточек с тарифными планами, таблицу сравнения тарифов. Включили информацию о том, какой тариф подходит для разных случаев использования.
Для контроля финансовых операций пользователю доступен раздел «Финансы», где он может посмотреть свои оплаты, скачать документы или пополнить баланс альтернативными способами — например, биткоинами или через PayPal.
Сейчас все пополнения баланса происходят вручную, мы проанализировали существующие решения на рынке и предложили автоматизированные сервисы пополнения баланса.
Для B2B-клиентов мы предусмотрели также оплату через банковский платёж. Сценарий выбрали простой: клиент указывает сумму и скачивает счёт на оплату, оплачивает удобным ему способом и загружает платёжку. Деньги поступят на счёт после проверки менеджером.
Онбординг и уведомления
Из-за сложности продукта мы приняли решение сделать 3 варианта онбординга новых пользователей.
Первый вариант: пошаговый
Интерфейс подсказывает пользователю, что он должен сделать дальше для достижения результата. Например, пока пользователь не оплатил услуги, все разделы закрыты, а доступны только help-центр и возможность купить подписку. Продвигаясь по этапам, пользователь кликает «Далее», а в завершении ему предлагается перейти в раздел настройки прокси.
Второй вариант: обучающий
Рядом с каждым заголовком на странице есть вопросительный знак. При нажатии на него пользователь видит подсказку с информацией об этом разделе. При первом входе в систему онбординг включается автоматически. Для всех последующих входов мы вывели в шапку личного кабинета иконку для повторного запуска онбординга.
Третий вариант: с геймификацией процесса
Взяв за основу сценарии использования ЛК, мы проработали шаги, при прохождении которых пользователю начисляются баллы. Каждый шаг дополнен ссылками на хелп-центр и техподдержку на случай, если у пользователя возникли трудности. Пройдя все шаги, пользователь получает ачивку или бонус. Задачу разработки системы премирования клиент взял на себя.
Все три варианта онбординга не мешают, а только дополняют друг друга. Такой системы обучения достаточно даже для самого неопытного пользователя.
Уведомления являются частью обучающей системы, но имеют более широкие функции. Они информируют о состоянии подписки, о зачислении денежных средств и других данных, которые важно знать пользователю. Уведомления держат пользователя в курсе событий независимо от того, в каком разделе ЛК он находится.
Спецификации экранных форм
После завершения этапа проектирования и дизайна требовалось передать все решения команде разработки. Для этого мы написали спецификации. В них подробно описали каждый элемент готового макета, а также собрали все артефакты, созданные нами на этапе аналитики, проектирования и дизайна.
Результат
За 4 месяца работы над проектом мы погрузились в сферу бизнеса клиента, разобрались в продукте и решили ряд интерфейсных задач:
Выделили пользовательские сценарии, проработали по ним интерфейсы, разбили процессы на отдельные этапы.
Адаптировали личный кабинет для новой системы оплаты в формате ежемесячной подписки.
Спроектировали интерфейсы, которые легко адаптируются под планшеты и мобильные устройства. Использовали модульную технику построения контента, которая строится из отдельных блоков.
Вынесли настройку прокси в отдельный раздел, добавили вкладки для новичков и опытных пользователей.
Продумали и реализовали тройную систему онбординга.