Концепция интерфейса раздела B2B услуг сайта Ростелеком

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

Задача:

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

Результат:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Процесс:

Для проектирования интерфейса раздела услуг для B2B за основу была взята экспертная оценка, проведенная на предыдущем этапе исследования B2B сайта Ростелеком. На основе анализа барьеров, выявленных при построении Customer Journey Map (CJM) и оценки удачных решений конкурентов, мы спроектировали wireframes структуры главной страницы и страницы услуги.

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

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

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

Необходимо было сделать шапку сайта более легкой, но это требовало внедрения «Рич-меню» (подробный обзор раздела в интерфейсе меню без перехода внутрь), что усложняло структуру самого меню.

В варианте 2 был сделан акцент на яркий дизайн и легкость при подаче информации.

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

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

В упрощенном варианте был применен стандартная структура навигации, дублирующая меню сайта Ростелеком.

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

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