Поддержка «Вконтакте»

Декабрь 2017

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

За пять лет стихийного развития поддержка стала чертовски сложной изнутри. На деле это не одна, а целых пять поддержек. Где-то нет базы знаний, где-то нельзя задавать вопросы, где-то пишут не сами, а от лица кабинетов. Форма подачи имеет с полдюжины конфигураций, а переписка с агентами — это целый месенджер с сотней нюансов. Я постарался уложить всё это в такой интерфейс, чтобы о сложности и не догадывались.

Справочник

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

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

Счётчик в шапке говорит: «Эй, не пропустите кое-что новое в соседних поддержках».

Где-то справочник может быть устроен иначе — все возможные случаи учтены.

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

Если поиск не помог, вопрос можно задать вручную. Окно предупреждает о загруженности агентов и отсекает немотивированных троллей.

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

Плохие оценки ждут уточнения.

Отдельные статьи сразу направляют на решение проблемы.

Новый вопрос

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

Требует ссылок, если разбираются со страницами.

Или специальные фотографии, когда утрачивают доступ к профилю.

Запрашивает все детали, когда обращаются по платежам.

Мои вопросы

Отдельный экран хранит обращения в поддержку. В рекламной поддержке и поддержке по приложениям вопросы разбиты по кабинетам.

С агентами общаются почти так же, как с друзьями в месенджере «Вконтакте».

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

Аватарки

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

Итого

Всего для поддержки я подготовил по 55 макетов на каждую платформу. Если их вывести друг за другом на экране телефона, то такой девайс дотянул бы до пятого этажа в Доме Зингера, где я работал. С учётом всех версий макетов было около 300.

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

В ролях

Менеджмент
  • Вадим Дорохов
  • Миша Болдов
  • Катя Лебедева
Дизайн
  • Павел Ващенко
Бэкенд
  • Михаил Кошкин
Фронтенд
  • Тарас Иванов
Фреймворк
  • Тимофей Чаптыков
  • Артур Стамбульцян
Интеграция
  • Аркаша Фраерман
  • Арсений Васильев
Редактура
  • Катерина Харькова
  • Павел Ващенко

За кадром