UI-редизайн интерфейса корпоративного портала

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

Вводные

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

Любой проект начинается с обоснования

У «АльфаСтрахования» есть внутренний портал, площадка для корпоративного контента и для HR-сервисов. Личный кабинет — это разводящая страница, с которой и только с которой можно открыть сервисы. Все сервисы объединены на левой панели, сумбурной и неудобной.

Так раньше выглядел личный кабинет

Вот такие сервисы будут когда-нибудь на портале

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

Сервис «Мои отпуска» до перепроектирования

Чтобы понять масштаб проблемы, посмотрите, как выглядели эти сервисы до перепроектирования.

Сервис «Мои заявки» до перепроектирования

Обсуждаем

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

И действительно, этот небольшой проект занял немало времени: любое предложение долго обсуждалось на самом высоком уровне.

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

«АльфаСтрахование»: портрет сотрудника

Анализируем

Мы описали пользовательские роли (их всего две — руководитель и рядовой сотрудник) и сценарии использования.

Use cases — пользовательские сценарии, сценарии взаимодействия, сценарии использования, пользовательские сценарии — последовательное описание поведения человека при взаимодействии с системой и системы, когда с ней взаимодействует человек. У нас есть модуль дизайн-задачника «Сценарии взаимодействия» для тех, кто хочет научиться их использовать в дизайне интерфейсов.

Сценарии использования личного кабинета

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

Сервис «Мои заявки», сценарии руководителя и сотрудника

Рисуем

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

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

Директор по развитию в какой-то момент решил нарисовать кабинет сам — в свободное время, так что это затянулось. А мы тем временем занялись сервисами «Мои отпуска» и «Мои заявки».

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

Проектируем

Нарисовали детализированный прототип, показали заказчику, запустив очередное внутреннее обсуждение.

Вот что у нас получилось.

Вот сюда попадает сотрудник, который хочет на море в апреле и в глушь, в Саратов — в октябре

Сервис «Мои отпуска» дает возможность посмотреть график отпусков, заявить о намерении отдохнуть, перенести отпуск на другие даты.

Формы заявок на отпуск и на перенос отпуска

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

Сервис «Мои заявки», одобренная заявка на отпуск

Руководитель принимает решения по заявкам подчиненных — в «Моих заявках» есть соответствующий раздел («Мне на согласование» с подразделами «Кадровые документы» и «Заявки на отпуск»).

Сервис «Мои заявки», раздел «Мне на согласование»

Дизайн интерфейса

Оформили все в корпоративных цветах «АльфаСтрахования». Компания очень серьезно относится к корпоративному стилю: в огромном, очень подробном style guidу больше сотни страниц.

Корпоративные цвета «АльфаСтрахования»

Библиотека компонентов

Сделали библиотеку компонентов (UI-kit), чтобы в «АльфаСтраховании» дальше могли рисовать самостоятельно — по мере развития портала. Это точно понадобится: пока мы работали над «Заявками» и «Отпусками», появилось несколько новых сервисов.

Итак, мы сделали все, что запланировали. В «АльфаСтраховании» посмотрели на наши прототипы, приняли дизайн…

Внезапный поворот

…Но тут в компании внезапно заметили, что корпоративный портал в целом не очень хорош.

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

Но, возможно, у этого кейса все-таки будет продолжение.