Как сделать дружелюбный интерфейс для сложного веб-продукта в режиме одного окна

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

Привет, Я Олег Громов, основатель IT-продакшна Extyl. Мы создаем и поддерживаем сложные веб-проекты вроде интранет-системы для Hoff, сервиса документооборота для Cибур НХТК или дилерского портала для Yokohama. Год назад мы объединили производственные мощности с UX-студией Everest. Они проектируют интерфейсы веб-сервисов и мобильных приложений для Сбера, РСХБ, МТС, Scania и других крупных брендов.

Зачем мы создали альянс? В первую очередь — чтобы предлагать клиентам комплексную услугу без потери качества. Everest проводит UX-аудит, выявляет глубинные потребности клиента и бизнес-цели, занимается продуктовой аналитикой, архитектурным и сценарным проектированием, UI/UX-дизайном. Мы же в Extyl отвечаем за составление технического задания, системную аналитику, проектирование архитектуры будущего ПО, frontend- и backend-разработку.

Как это происходит на практике — покажем на примере работы над корпоративным сайтом «Мособлгаза».

«Мособлгаз» — одна из крупнейших газораспределительных компаний России, которая обслуживает без малого 3 миллиона квартир и домовладений Москвы и области. Кроме подключения газа компания, ремонтирует и устанавливает оборудование, строит котельные и работает с крупными производствами — в общем, решает весь спектр задач, имеющих отношение к газификации.

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

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

Чтобы найти и исправить «узкие места», сделать интерфейс более дружелюбным, мы начали работу с юзабилити-аудита сайта.

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

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

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

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

После этого специалисты Everest перешли к проектированию ключевых сценариев поведения пользователей:

• Хочу подключить газ.
• Меня интересуют взаиморасчеты за газ.
• Хочу установить/заменить счетчик.
• Хочу узнать актуальные цены и тарифы.
• Хочу узнать о программе газификации.
• Хочу узнать, какие решения есть для бизнеса и какие документы нужны.

Проектировщики проходили каждый сценарий и фиксировали, какие возникают сложности по ходу дела.

• На главную страницу вынести топовые услуги компании, а в шапку сайта сделать удобным маршрутизатором по разделам.

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

• Правильно расставить акценты, чтобы избавить сценарии от непонятных развилок.

• Избавиться от визуального мусора — например, баннеров, которые скрывают информацию и сбивают пользователя с пути.

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

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

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

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

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

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

Для валидации номеров телефонов пользователей мы реализовали интеграцию с СМС-сервисом. Сервис генерирует и отправляет на указанный номер код, который пользователь указывает в заявке на газификацию.

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

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

Совместная работа над сайтом «Мособлгаза» стала первым проектом альянса, на котором наши менеджеры потренировали мышцу коллективного управления командами. Специалисты Everest и Extyl работали над разными задачами в рамках своих компетенций и собственных производственных циклов. Но при этом у нас получилось синхронизироваться в плане коммуникаций с клиентом и бесшовно закрыть его потребности в разных экспертизах.

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

Немаловажный факт — все задачи, на которыми мы работали, были собраны в одном тендерном задании. Если бы не наш альянс, ни Everest ни Extyl не смогли бы войти в тендер и выиграть его. Это еще раз доказывает, что клиенту удобно получать весь спектр услуг в режиме одного окна. А мы получили новый опыт и мотивацию оттачивать процессы и фреймворки взаимодействия в рамках альянса. Скоро расскажем о новых совместных кейсах, подписывайтесь на нас в Фейсбуке, чтобы не пропустить :)