Личный кабинет клиента Soax

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

В рамках этой задачи предстояло:

• решить проблемы с логикой интерфейса (облегчить запутанную структуру, в которой клиентам приходилось разбираться самостоятельно; выделить пользовательские сценарии и проработать их);
• упростить систему покупки трафика;
• разработать адаптивную версию личного кабинета под мобильные устройства;
• вовлечь и мотивировать пользователей продолжить работу в сервисе. Многие клиенты не пользовались продуктом после покупки: им необходимо было помочь с настройкой, подсказать дальнейшие шаги, предложить техподдержку. Здесь нам помог наш опыт в проектировании и разработке онбордингов. Для Soax мы реализовали три вида онбординга: пошаговый, обучающий и с геймификацией процесса. Каждый — под определённую группу пользователей и для достижения конкретных целей. Но об этом мы расскажем дальше.

1. Изучить существующие артефакты заказчика (веб-аналитика, интервью с пользователями)
2. Провести бизнес-интервью
3. Провести конкурентный анализ
4. Построить сценарии и карту сайта
5. Разработать прототипы и дизайн
6. Написать спецификацию экранных форм для разработчиков 

Для начала мы провели глубинное интервью с клиентом. Выяснили, что прокси может использоваться как для легальных вещей, так и нелегальных. Вторых Soax строго отсекает. Для этого новым пользователям при регистрации аккаунта нужно пройти проверку KYC (Know Your Customer — верификацию личных данных). Процесс схож с проверкой при работе с банковскими системами и криптовалютами.

Сфера деятельности Soax высококонкурентная. Основным своим преимуществом компания обозначает индивидуальный подход. Это проявляется и в процессе идентификации личности клиентов. У некоторых конкурентов перед доступом к прокси проводят сложную проверку с предоставлением личных документов (паспорт, банковская карта, фотография документа регистрации ИП) и только после этого предоставляют доступ. В Soax этот процесс выстроен максимально персонализированно и быстро. Компания предоставляет тестовый доступ к системе, чтобы можно было проверить, подходит ли её функционал для решений задач пользователей или нет.

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

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

В текущей системе клиенты Soax сталкивались с проблемой разделения купленного трафика между своими сотрудниками. У одного пользователя могло быть несколько клиентов/проектов, а каждого клиента мог обслуживать свой менеджер. Для этого нужно делить купленный трафик, чтобы вести настройку и статистику по клиентам/проектам. Пример такого кейса — аккаунт SMM-компании с большим количеством клиентов и проектов.

Мы предложили способ быстро поделиться аккаунтом через email-адрес (как при работе с google-документами). Владельцу аккаунта в таком случае достаточно сформировать ссылку для нового пользователя на его почту. После перехода по ней гость получал доступ к личному кабинету и мог сам настраивать прокси для своих задач. У владельца аккаунта при этом оставалось право отключить гостевых пользователей, а также контролировать количество доступного им трафика.

Интерфейс настройки прокси состоял из двух типов (получить один IP или список адресов). В каждом из типов до 6 видов настроек, что путало пользователей, так как отличия были незначительные. Мы предложили пересобрать этот раздел, облегчить процесс заполнения данных.

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

Конкурентный анализ делали в двух видах. Первый — сравнительная таблица функциональности, UX-решений, UI-решений, маркетинга и бизнес-решений. Второй — текстовый документ-выжимка из первого, где мы подробно описали наиболее важные моменты.

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

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

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

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

Наиболее сложная и нагруженная страница личного кабинета, у которой есть три состояния.

Первое: пользователь зарегистрировался, но ещё не купил подписку.

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

Второе: подписка куплена, но пользователь ещё не настроил прокси.

Задача этого дашборда — направить пользователя в раздел с прокси.

Третье (самое нагруженное состояние): трафик с прокси начал расходоваться.

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

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

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

Для удовлетворения потребности двух групп пользователей мы разделили страницу на две вкладки: Quick access (Быстрый доступ) и Export proxy list (Получить список прокси). В двух вкладках дали возможность настроить фильтр по странам, но при этом в Quick access задействовано минимальное количество элементов управления (контролов), что позволяет разобраться даже новичку. Для более продвинутых пользователей предусмотрены расширенные настройки в Export proxy list.

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

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

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

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

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

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

Из-за сложности продукта мы приняли решение сделать 3 варианта онбординга новых пользователей.

Первый вариант: пошаговый

Интерфейс подсказывает пользователю, что он должен сделать дальше для достижения результата. Например, пока пользователь не оплатил услуги, все разделы закрыты, а доступны только help-центр и возможность купить подписку. Продвигаясь по этапам, пользователь кликает «Далее», а в завершении ему предлагается перейти в раздел настройки прокси.

Второй вариант: обучающий

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

Третий вариант: с геймификацией процесса

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

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

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

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

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

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