{
    "version": "https:\/\/jsonfeed.org\/version\/1.1",
    "title": "Максим Петров: заметки с тегом Support Center",
    "_rss_description": "UI\/UX-дизайнер",
    "_rss_language": "ru",
    "_itunes_email": "mail@maximpetrov.ru",
    "_itunes_categories_xml": "",
    "_itunes_image": "https:\/\/maximpetrov.ru\/blog\/pictures\/userpic\/userpic-square@2x.jpg?1711785590",
    "_itunes_explicit": "no",
    "home_page_url": "https:\/\/maximpetrov.ru\/blog\/tags\/support-center-2\/",
    "feed_url": "https:\/\/maximpetrov.ru\/blog\/tags\/support-center-2\/json\/",
    "icon": "https:\/\/maximpetrov.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1711785590",
    "authors": [
        {
            "name": "Максим Петров",
            "url": "https:\/\/maximpetrov.ru\/blog\/",
            "avatar": "https:\/\/maximpetrov.ru\/blog\/pictures\/userpic\/userpic@2x.jpg?1711785590"
        }
    ],
    "items": [
        {
            "id": "1",
            "url": "https:\/\/maximpetrov.ru\/blog\/all\/support-center\/",
            "title": "Support Center",
            "content_html": "<p>Система поддержки пользователей. Включает различные информационные ресурсы: вопросы от пользователей, статьи в базе знаний и истории версий.<\/p>\n<p>Ежедневно в Support Center создаются сотни новых вопросов и на них отвечают десятки саппорт-инженеров. За годы работы старый интерфейс устарел как внешне, так и с точки зрения удобства и функциональности. Пришла задача полностью переработать платформу, с учётом всех бизнес-требований.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/sc-1.png\" srcset=\"\/images\/blog\/1x\/sc-1.png 1x, \/images\/blog\/2x\/sc-1@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h2>Вводная<\/h2>\n<p>Система состоит из трёх основных порталов:<\/p>\n<ul>\n<li>Клиентский портал<\/li>\n<li>Внутренний портал для сотрудников<\/li>\n<li>Админ-панель<\/li>\n<\/ul>\n<p>Каждым порталом пользуется свой сегмент пользователей. Клиенты компании ожидают простой и понятный интерфейс. В то время как саппорт-инженеры привыкли к определенным сценариям, которые тоже нужно было сохранить.<\/p>\n<h2>Клиентский портал<\/h2>\n<p>На этот ресурс были задействованы основные силы. Клиентский портал даёт возможность клиентам задавать вопросы технического характера и получать на них ответы.<\/p>\n<p>Перед редизайном ставились следующие задачи:<\/p>\n<ul>\n<li><b>Снизить нагрузку на саппорт-инженеров.<\/b> Помочь пользователям находить ответы самостоятельно, если на вопрос уже отвечали ранее или решение описано в документации.<\/li>\n<li><b>Улучшить UX.<\/b> Накопился список проблем, которые нужно было решать:\n<ul>\n  <li><b>Пользователи выбирают неверный продукт при создании вопроса.<\/b> DevExpress разрабатывает и поддерживает десятки продуктов. У каждого продукта могут быть разные платформы и версии. Иногда важно знать, какая ОС установлена у пользователя, каким IDE он пользуется. Нужно было сделать так, чтобы у пользователя не возникали проблемы при выборе нужных значений. Помочь ему на этом пути.<\/li>\n  <li><b>Возникают проблемы при форматировании текста.<\/b> Пользователи приходят в поддержку с техническими проблемами. Описание проблемы содержит куски кода или целые архивы с проектами. В старой версии сайта пользователи путались в текстовом редакторе и отправляли не отформатированные куски куда, которые сливались с обычным текстом. Также, пользователи не всегда понимали как аттачить файлы. Всё это приводило к дополнительной нагрузке на саппорт-инженеров.<\/li>\n  <li><b>Пользователи не замечают уведомления об ответах в их тикете.<\/b> Проблема касалась как веб-интерфейса, так и уведомлений приходящих пользователю на почту. Пользователи либо не замечали уведомления, либо не понимали к чему они относятся, либо ранее отключали уведомления и забывали об этом. В связи с этим, среднее время на решение таких тикетов значительно увеличивалось.<\/li>\n  <li><b>Клиенты из одной и той же компании не видят вопросы друг друга.<\/b> Большинство клиентов предпочитает оставлять свои вопросы приватно. Чтобы их могли видеть только саппорт-инженеры. Из-за этого возникала проблема, что вопросы становились приватными полностью и их не могли видеть даже сотрудники одной и той же компании с разных аккаунтов.<\/li>\n  <li><b>Неудобные фильтры.<\/b> Пользователи, что на странице со списком публичных тикетов невозможно ничего найти. Фильтров мало, а то, что есть не всегда работает очевидным образом.<\/li>\n<\/ul>\n<\/li>\n<li><b>Переосмыслить встроенный инструмент “Version History”.<\/b><\/li>\n<li><b>Улучшить аналитику.<\/b><\/li>\n<li><b>Освежить внешний вид.<\/b><\/li>\n<\/ul>\n<h3>Подготовка к работе<\/h3>\n<p>Перед началом работы над редизайном была проведена подготовительная работы. Подготовлен общий план работы и проведены встречи со всеми заинтересованными лицами. Был подготовлен итоговый бриф проекта.<\/p>\n<p>Часть работ, которые были проведены на этом этапе:<\/p>\n<ul>\n<li><b>Анализ текущего дизайна.<\/b> UX-тестирование текущего сайта, поиск проблем.<\/li>\n<li><b>Ресёрч конкурентов.<\/b> Изучение как прямых конкурентов, так и решений крупных платформ. Например, Zendesk, Freshdesk, Zoho Desk.<\/li>\n<li><b>Сбор и анализ существующего фидбека.<\/b> За годы работы, накопилось большое количество тикетов, комментарием и другой обратной связи касаемо работы портала. Была проведена большая работу по сбору всей это информации в один документ, её анализу и приоритизации.<\/li>\n<li><b>Сбор информации от саппорт-инженеров.<\/b> Инженеры поддержки активнее всего общаются с пользователями и знают детали и проблемы, которые могут быть неизвестны и неочевидны другим членам команды.<\/li>\n<li><b>Изучение текущих данных аналитики и список того, что хотим собирать ещё в новом дизайне.<\/b> Для работы с данными использовались:  Google Analytics (+Google Tag Manager), Matomo, внутренние инструменты.<\/li>\n<li><b>Сбор требований от заказчиков и всех заинтересованных лиц.<\/b><\/li>\n<li><b>Подготовка брифа.<\/b> Описание проблем, целей и задач. Развёрнутый ответ на вопрос, что мы будем считать успешным редизайном.<\/li>\n<\/ul>\n<h3>Процесс<\/h3>\n<p>Работа над сайтом строилась 2-4 недельными спринтами. В конце каждого спринта проводились синхронизационные встречи с заказчиками.<\/p>\n<p>В начале работы над дизайном была согласована общая концепция. Отрисованы низко детализированные прототипы с решением основных UX проблем. Найден общий подход к внешнему виду.<\/p>\n<p>Чтобы работа над новым дизайном была эффективной и обратная связь поступала как можно быстрее был принят рад мер:<\/p>\n<ul>\n<li>Продукт менеджер продукта показывал прототипы и просто картинки небольшой выборке самых активных и заинтересованных пользователей саппорт-центра. Благодаря этому получалось очень быстро собрать много полезной информации, которая помогала намного быстрее замечать точки роста.<\/li>\n<li>Тесное общение с разработчиками. Так дизайн значительно обгонял разработку, нужно было сразу учитывать технические ограничения. Для этого проводились постоянные встречи между разработчикам, заказчиками и дизайнером. Так мы оценивали техническую сложность каждой фичи и на основе этого принимали решение, будем мы брать её в работу или нет.<\/li>\n<li>На этапе, когда появилась первая работающая версия сайта, его стали тестировать сотрудники. В первую очередь, к тестированию подключались саппорт-инженеры. На этом этапе было собрано большое количество фидбека как по техническим багам, визуальным багам, так и просто по неудачным UX-решениям.<\/li>\n<li>На следующем этапе снова к фидбеку снова были подключены активные клиенты. Которые были готовы дать развёрнутый фидбек.<\/li>\n<li>На одном из финальных этапов сайт стал доступен для всех пользователей, но в виде бета-версии. При этом, каждый пользователь мог вернуться к старой версии сайта. Со временем, пользователей вернувшихся на старый сайт становилось меньше. Также, мы старались собирать фидбек от таких пользователей. Чтобы понять, почему они вернулись на старую версию сайта.<\/li>\n<li>К новой версии сайта была прикручена продвинутая аналитика.<\/li>\n<\/ul>\n<h3>Примеры реализации<\/h3>\n<h4>Релевантные подсказки при создании тикета<\/h4>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/sc-2.png\" srcset=\"\/images\/blog\/1x\/sc-2.png 1x, \/images\/blog\/2x\/sc-2@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h4>Упрощена навигация по дискуссии с ветвистой иерархией<\/h4>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/sc-3.png\" srcset=\"\/images\/blog\/1x\/sc-3.png 1x, \/images\/blog\/2x\/sc-3@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h4>Обновлены инструменты фильтра на странице со списком тикетов<\/h4>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg\" width=\"2560\" height=\"10\" alt=\"\" \/>\n<div class=\"e2-text-caption\"><img src=\"\/images\/blog\/1x\/sc-4.png\" srcset=\"\/images\/blog\/1x\/sc-4.png 1x, \/images\/blog\/2x\/sc-4@2x.png 2x\" class=\"img-fluid\"><\/div>\n<\/div>\n<h4>Сделана мобильная версия под разные размеры<\/h4>\n<h2>Внутренний портал и админ-панель<\/h2>\n<p>Отдельной крупной задачей была необходимость сделать внутренний портал для сотрудников. Главным вызовом было задача учесть флоу саппорт-инженеров из разных команд. Ингода оно сильно отличалось и нужно было найти решения, которые устроят всех.<\/p>\n<p>Для этого проводилось множество сложных встреч с саппорт-инженерами из разных команд и топ-саппортом. По каким-то сценариям приходилось идти на компромиссы, по каким-то — выбирать один вариант и убеждать в правильности этого варианта остальных.<\/p>\n<p>В результате, судя по опросам и личным разговорам, большая часть сотрудников осталась довольна новой системой.<\/p>\n<p>Также, для более гибкой работы и настройки системы под текущие нужды бизнеса была спроектирована админ-панель, где можно точечно настроить различные параметры системы.<\/p>\n<p>Так как решения внутренние, вдаваться в подробности и показывать скриншоты я не могу.<\/p>\n<h2>Результаты<\/h2>\n<p>В итоге, полный переход на новую версию получился безболезненным. На каждой итерации выявлялись проблемные места и не учтённые сценарий. Большая часть из них решалась, от небольшой части осознанно отказывались.<\/p>\n<p>Старая версия сайта постепенно была отключена, когда количество её пользователей стало совсем небольшим.<\/p>\n<p>Общая оценка редизайна была оценена как успешная. Как со стороны клиентов, так и со стороны сотрудников. Поставленные перед редизайном цели были достигнуты:<\/p>\n<ul>\n<li><b>Уменьшилась нагрузка на саппорт-инженеров.<\/b>\n<ul>\n  <li>Пользователи стали чаще находить решения самостоятельно: улучшен движок поиска, предлагаются релевантные ссылки при создании тикета, улучшена фильтрация.<\/li>\n  <li>Пользователи стали реже ошибаться с выбором платформы\/продукта и других деталей при создании тикета.<\/li>\n  <li>Во внутреннем портале появились инструменты, помогающие саппорт-инженерам быстрее отвечать на тикеты, ответ на которые уже давался ранее.<\/li>\n<\/ul>\n<\/li>\n<li><b>Не отформатированные тикеты появляются гораздо реже.<\/b> Решилась проблема с тем, что пользователи не понимали, как отправлять аттачи.<\/li>\n<li><b>Уменьшилось количество проблем, когда пользователи не получают уведомления вовремя.<\/b>\n<ul>\n  <li>В настройках уведомлений появился отдельный чекбокс, для получения уведомлений от саппорт-центра (раньше был единый чекбокс, для всех почтовых рассылок).<\/li>\n  <li>Даже если пользователь отключил уведомления от таких рассылок, то саппорт-инженер будет об этом знать. И, если у пользователя возникают с этим проблемы, подсказать варианты решения.<\/li>\n  <li>Сами почтовые уведомления стали понятнее, появилась возможность подключить браузерные уведомления.<\/li>\n  <li>Появилась возможность подписать на рассылку на любой тикет со страницы этого тикета.<\/li>\n<\/ul>\n<\/li>\n<li><b>Более точечно настроена аналитика.<\/b>\n<ul>\n  <li>Саппорт-инженер теперь может видеть карточку пользователя с историей посещений тикетов и документов в документации. Так инженер поддержки сразу может понять, какие ссылки есть смысл советовать, а какие — нет, так как пользователь их уже посещал.<\/li>\n  <li>Добавлены ивенты на целевые действия.<\/li>\n  <li>Созданный внутренние дашборды с анализом различных данных, необходимых для оценки поступаемого  количества тикетов и оценки эффективности саппорта.<\/li>\n<\/ul>\n<\/li>\n<li><b>Поиск по тикетам стал гибче и проще.<\/b>\n<ul>\n  <li>Были докручены мета-теги, чтобы тикеты лучше искались поисковиками.<\/li>\n  <li>Переосмыслены фильтры, добавлены готовые пресеты и возможность подписаться на созданный фильтр.<\/li>\n  <li>Оптимизирована внутренняя страница поиска.<\/li>\n<\/ul>\n<\/li>\n<li><b>Сделана мобильная версия клиентского портала.<\/b><\/li>\n<\/ul>\n",
            "date_published": "2024-03-25T20:23:20+04:00",
            "date_modified": "2024-04-02T00:38:50+04:00",
            "tags": [
                "Support Center"
            ],
            "image": "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg",
            "_date_published_rfc2822": "Mon, 25 Mar 2024 20:23:20 +0400",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "1",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/maximpetrov.ru\/blog\/pictures\/empty-image.jpg"
                ]
            }
        }
    ],
    "_e2_version": 4116,
    "_e2_ua_string": "Aegea 11.2 (v4116e)"
}