Редизайн сервиса IP-телефонии «YouMagic.Pro»

Компания «YouMagic.Pro» предоставляет услугу IP-телефонии, воспользовавшись которой клиент может подключит себе номер и активировать Личный кабинет не связываясь с менеджерами компании напрямую. На основе проведенной веб аналитики было принято решение провести аудит сервиса и устранить точки, в которых вероятность отказа значительно увеличивалась, сделать сервис более понятным и удобным для пользователей. Второй по важности задачей стало обновление дизайна сервиса и создание адаптивного интерфейса.

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

Шаг 1

Шаг 2

Шаг 3

Нажмите для приближения

На первом экране (Шаг 1) вверху страницы индикатор в процентах, позволяющий пользователю отслеживать, насколько он близок к окончанию активации номера. Индикатор реагирует на каждое действие пользователя – выбор города, способа выбора номера и прочие действия. Для начала необходимо выбрать город и код номера, поэтому поле выбора расположено по центру горизонтального блока. Далее есть 2 возможности выбора номера: путем подбора конкретных цифр или выбирая категорию номера. Для удобства подбора путем конкретных цифр используется маска, в которой уже отображается код города, выбранного выше. Вторым способом пользователь может выбрать из нескольких категорий номеров: платиновых, золотых, серебряных, бронзовых и обычных.
Все результаты по фильтрам выбора отображаются в поле ниже, с указанием общего количества номеров, подходящих под заданные параметры, количеством страниц и отображением активной страницы. Кнопка «Далее» – переход к следующему шагу.

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

Третий экран сообщает об успешном завершении активации номера и приглашает перейти к работе.

После утверждения заказчиком был нарисован макет для сервиса:

На данный момент около 35% всех посещений сайта составляет мобильный трафик, поэтому дизайн сервиса предусматривает адаптивную верстку, позволяющую с минимальными затратами со стороны разработчиков удобно отображать все функции сервиса:

Нажмите для приближения

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

Нажмите для приближения

Результатом работ компании “Лайм системс” стал адаптивный дизайн и кроссбраузерная адаптивная верстка мастера регистрации.