Интерфейс клиентского портала

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

Переработали дизайн личного кабинета с учетом цифровых привычек новой группы клиентов.

Контекст

2016
~ 950 000 ₽

Результат

Бюджет

Услугами международной хостинговой компании Servers.com пользуется в основном средний и крупный бизнес с нетривиальными задачами и индивидуальными запросами. И с этим все хорошо. Сейчас компания хочет добавить простой и понятный продукт для менее продвинутых клиентов.
Наши задачи
Сделать интерфейс понятным для менее искушенных клиентов и переупаковать продукт для новой целевой аудитории, исходя из ее целей, задач, возможностей и особенностей. Не испортить интерфейс чрезмерным упрощением, чтобы не отпугнуть ключевых клиентов.
Плюсы и минусы
Знакомая тема
Нам не нужно объяснять, что такое хостинг. Мы сами пользуемся услугами хостинга и уже проектировали подобные системы.
Мы создавали дизайн итерациями и после каждой могли проверить интерфейс на реальных пользователях.
Тестирование по итерациям
Интерфейс должен быть удобен и для малого предпринимателя, и для сисадмина корпорации. Это нелегко — они слишком разные.
Разнородная аудитория
Трудно найти респондентов из Европы и США.
Англоязычные пользователи
+
+
Решение
В общем виде процесс улучшения интерфейса выглядит так.
  1. Выяснить, что люди пытаются делать при помощи этого интерфейса. Это не всегда очевидно.
  2. Определить узкие места: что мешает пользователю выполнить ту или иную задачу?
  3. Избавиться от узких мест.
  4. Проверить, стало ли пользователю легче.
В этом проекте у нас была возможность сразу внести изменения в интерфейс и протестировать его на реальных пользователях. Три итерации проектирования прошли по следующему плану.
    1. Просим пользователя выполнить задачу.
    2. Составляем список проблем, предлагаем решения.
    3. Корректируем предложения с учетом ограничений и бизнес-требований заказчика.
    4. Проектируем решение.
    5. Изменяем интерфейс.
    6. Просим пользователя выполнить задачу еще раз.
    PDF, 3 MB
    Самое интересное и сложное, как обычно, в деталях.
      Поиск респондентов
      Заказчик хорошо представлял, с какими клиентами нужно поговорить. И в России респонденты нашлись бы без особого труда — хватает знакомых любой степени технической грамотности в компаниях разного масштаба. Все сложнее, когда нужны респонденты из Америки и Европы. Мы публиковали объявления на форумах, подключали друзей, живущих за границей. Этап поиска затянулся, но в итоге мы нашли подходящих респондентов. Можно было приступать к более понятной работе.
        Подготовка сценариев
        Общее впечатление от интерфейса — это, конечно, тоже важно. Но в первую очередь нас интересовало, может ли пользователь выполнить конкретную задачу — купить услугу. Для интервью мы подготовили сценарии (что пользователь пытается сделать) и вопросы (что он обо всем этом думает).
          Список подготовленных задач и вопросов для тестирования пользователей | Sobakapav.ru
          Перед тестированием нужно подготовить задачи и вопросы пользователю
          Тестирование
          Интервью проводили по скайпу. Респондент показывал свой экран, выполнял задачи модератора и комментировал свои действия.
            Скриншот записи видео тестирования клиента | sobakapav.ru
            Записывали видео, чтобы обработать его в спокойной обстановке и показать заказчику, как себя ведут и что говорят обычные пользователи
            Обработка результатов тестирования
            Вместе с отчетом мы предлагали клиенту варианты улучшения и обсуждали, насколько реально воплотить их в жизнь.
              Результаты пользовательского тестирования | sobakapav.ru
              Даже если пользователь справился с задачей, мы выдаем рекомендации, как сделать интерфейс еще более простым
              Мы обнаружили, что хотя пользователи в целом технически грамотны, сложный интерфейс их отпугивает. Они знают термины, готовы разбираться с настройками и способны добраться до сути — но это слишком утомительно.
                Дизайн интерфейса
                Мы выяснили, что революционных изменений в интерфейсы вносить не нужно, — и выдохнули. Это было бы слишком рискованно, ведь нам следовало помнить про интересы ключевых клиентов.
                  А что нужно? Та же информация и те же настройки, только проще и понятнее. Чтобы владеющий теорией пользователь мог без труда использовать свои знания на практике.
                    Упростили подбор конфигурации. Пользователь видит таблицу с результатами подбора — так удобней сравнивать.
                      Дизайн процесса подбора конфигурации | sobakapav.ru
                      Пользователь указывает конфигурацию и получает список подходящих предложений
                      Строка в таблице разворачивается в детальное описание, а подробную спецификацию можно скачать в pdf.
                        Подробная техническая информация о подобранных конфигурациях | sobakapav.ru
                        По клику открывается полная техническая информация. Есть даже возможность скачать спецификацию
                        Спроектировали дашборд. Раньше его не было вовсе, а сейчас вся важная информация выведена на главный экран.
                          Интерфейс дашборда личного кабинета | sobakapav.ru
                          Дашборд — самое сложное в личных кабинетах. Делать его нужно в последнюю очередь
                          Придумали, как сэкономить клиенту пару минут во время оформления заказа. Когда нужно придумать название сервера — предлагаем автозаполнение. Пусть зовется Сатурном или Дейенерис, если пользователь хочет нескучное название, а что-то придумывать некогда.
                            Оплата выбранного сервера | sobakapav.ru
                            А вы знали, что серверам, как кораблям, дают имена?
                            После изменения интерфейсов просили респондентов выполнить сценарии еще раз. Так мы могли убедиться, что действительно упростили пользователю жизнь.
                              Результат
                              Заказчик принял все наши предложениям по изменению интерфейсов. Что это дало? Будем честны — пока не знаем. И заказчик, скорее всего, тоже. Бизнес-результат будет ясен не раньше, чем завершится рекламная кампания, нацеленная на новый сегмент.
                                Пока же очевидно, что интерфейс стал проще, не потеряв в функциональности.
                                  ~ 950 000 ₽
                                  Бюджет

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

                                  Николай Двас
                                  исполнительный директор

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

                                  Результат
                                  Другие кейсы