---
publishYear: 2016
name: Serverscom
title: Интерфейс клиентского портала
excerpt: Переработали дизайн личного кабинета с учетом цифровых привычек новой группы клиентов.
logo:
src: ~/assets/images/portfolio/serverscom/logo.png
alt: Serverscom logo
link: https://www.servers.com/
image: ~/assets/images/portfolio/serverscom/serverscom.png
imageAlt: Интерфейс клиентского портала
thumbnail:
src: ~/assets/images/portfolio/cards/serverscom.svg
alt: Собака Павлова • Servers.com • Дизайн интерфейса клиентского портала
tags:
- it
- redesign
- prof
- telecom
tags2:
- IT для бизнеса
- Интерфейс клиентского портала
- Дизайн личного кабинета
- UX-дизайн
context: Интерфейс клиентского портала создавался с оглядкой на ключевых клиентов, на первом плане была функциональность и гибкость настроек. Интерфейс понятен системному администратору большой компании, но вызывает оторопь у менее опытного клиента из малого и среднего бизнеса.
result:
-
src: ~/assets/images/portfolio/rp.png
text: Интерактивный прототип
link: https://cmsann.axshare.com/#g=1
budget: ~ 950 000 ₽
review:
text: "«Собака» работает очень прозрачно и логично — в каждый момент времени я понимал, и за что мы платим деньги, и какой результат мы получим, и какие шаги для этого нужно предпринять. Предложенные коллегами макеты отвечали нашей главной задаче — сохранив гибкость, превратить интерфейс в единое целое, обозримое клиентом решение."
photo: ~/assets/images/portfolio/serverscom/person.png
person: Николай Двас
position: исполнительный директор
metadata:
canonical: https://sobakapav.ru/portfolio/serverscom
title: UX • Интерфейс клиентского портала хостинговой компании (практический кейс)
description: "Провели тестирование интерфейса пользователя и переработали дизайн личного кабинета с учетом цифровых привычек новой группы клиентов."
robots:
index: true
follow: true
openGraph:
site_name: Собака Павлова
images:
- url: '~/assets/images/portfolio/serverscom/serverscom.png'
width: 1278
height: 850
type: website
---
Услугами международной хостинговой компании [Servers.com](https://www.servers.com/) пользуется в основном средний и крупный бизнес с нетривиальными задачами и индивидуальными запросами. И с этим все хорошо. Сейчас компания хочет добавить простой и понятный продукт для менее продвинутых клиентов.
### Наши задачи
Сделать интерфейс понятным для менее искушенных клиентов и переупаковать продукт для новой целевой аудитории, исходя из ее целей, задач, возможностей и особенностей. Не испортить интерфейс чрезмерным упрощением, чтобы не отпугнуть ключевых клиентов.
### Плюсы и минусы
>+ **Знакомая тема**
>Нам не нужно объяснять, что такое хостинг. Мы сами пользуемся услугами хостинга и уже проектировали подобные системы.
>+ **Тестирование по итерациям**
>Мы создавали дизайн итерациями и после каждой могли проверить интерфейс на реальных пользователях.
>- **Разнородная аудитория**
>Интерфейс должен быть удобен и для малого предпринимателя, и для сисадмина корпорации. Это нелегко — они слишком разные.
>- **Англоязычные пользователи**
>Трудно найти респондентов из Европы и США.
### Решение
В общем виде процесс улучшения интерфейса выглядит так.
1. Выяснить, что люди пытаются делать при помощи этого интерфейса. Это не всегда очевидно.
2. Определить узкие места: что мешает пользователю выполнить ту или иную задачу?
3. Избавиться от узких мест.
4. Проверить, стало ли пользователю легче.
В этом проекте у нас была возможность сразу внести изменения в интерфейс и протестировать его на реальных пользователях. Три итерации проектирования прошли по следующему плану.
1. Просим пользователя выполнить задачу.
2. Составляем список проблем, предлагаем решения.
3. Корректируем предложения с учетом ограничений и бизнес-требований заказчика.
4. Проектируем решение.
5. Изменяем интерфейс.
6. Просим пользователя выполнить задачу еще раз.
[План-график Servers.com](https://drive.google.com/file/d/1CpB0UbbU0oJXOqUFUV-NjL1V0PA4UJy6/view?usp=sharing)
Самое интересное и сложное, как обычно, в деталях.
#### Поиск респондентов
Заказчик хорошо представлял, с какими клиентами нужно поговорить. И в России респонденты нашлись бы без особого труда — хватает знакомых любой степени технической грамотности в компаниях разного масштаба. Все сложнее, когда нужны респонденты из Америки и Европы. Мы публиковали объявления на форумах, подключали друзей, живущих за границей. Этап поиска затянулся, но в итоге мы нашли подходящих респондентов. Можно было приступать к более понятной работе.
#### Подготовка сценариев
Общее впечатление от интерфейса — это, конечно, тоже важно. Но в первую очередь нас интересовало, может ли пользователь выполнить конкретную задачу — купить услугу. Для интервью мы подготовили сценарии (что пользователь пытается сделать) и вопросы (что он обо всем этом думает).
_Перед тестированием нужно подготовить задачи и вопросы пользователю_
#### Тестирование
Интервью проводили по скайпу. Респондент показывал свой экран, выполнял задачи модератора и комментировал свои действия.
_Записывали видео, чтобы обработать его в спокойной обстановке и показать заказчику, как себя ведут и что говорят обычные пользователи_
#### Обработка результатов тестирования
Вместе с отчетом мы предлагали клиенту варианты улучшения и обсуждали, насколько реально воплотить их в жизнь.
_Даже если пользователь справился с задачей, мы выдаем рекомендации, как сделать интерфейс еще более простым_
Мы обнаружили, что хотя пользователи в целом технически грамотны, сложный интерфейс их отпугивает. Они знают термины, готовы разбираться с настройками и способны добраться до сути — но это слишком утомительно.
### Дизайн интерфейса
Мы выяснили, что революционных изменений в интерфейсы вносить не нужно, — и выдохнули. Это было бы слишком рискованно, ведь нам следовало помнить про интересы ключевых клиентов.
А что нужно? Та же информация и те же настройки, только проще и понятнее. Чтобы владеющий теорией пользователь мог без труда использовать свои знания на практике.
Упростили подбор конфигурации. Пользователь видит таблицу с результатами подбора — так удобней сравнивать.
_Пользователь указывает конфигурацию и получает список подходящих предложений_
Строка в таблице разворачивается в детальное описание, а подробную спецификацию можно скачать в pdf.
_По клику открывается полная техническая информация. Есть даже возможность скачать спецификацию_
Спроектировали дашборд. Раньше его не было вовсе, а сейчас вся важная информация выведена на главный экран.
_Дашборд — самое сложное в личных кабинетах. Делать его нужно в последнюю очередь_
Придумали, как сэкономить клиенту пару минут во время оформления заказа. Когда нужно придумать название сервера — предлагаем автозаполнение. Пусть зовется Сатурном или Дейенерис, если пользователь хочет нескучное название, а что-то придумывать некогда.
_А вы знали, что серверам, как кораблям, дают имена?_
После изменения интерфейсов просили респондентов выполнить сценарии еще раз. Так мы могли убедиться, что действительно упростили пользователю жизнь.
### Результат
Заказчик принял все наши предложениям по изменению интерфейсов. Что это дало? Будем честны — пока не знаем. И заказчик, скорее всего, тоже. Бизнес-результат будет ясен не раньше, чем завершится рекламная кампания, нацеленная на новый сегмент.
Пока же очевидно, что интерфейс стал проще, не потеряв в функциональности.
# Без потери функциональности интерфейс стал понятным для менее продвинутых пользователей.