UI-перепроектирование корпоративного портала

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

Переделали интерфейс личного кабинета и двух HR-сервисов корпоративного портала.


Контекст

Результат

Бюджет

2015
Раньше мы уже работали с «АльфаСтрахованием» — проектировали интерфейс внутренней информационной системы. На этот раз нашей задачей было UI-перепроектирование интерфейса для сотрудников компании.
Обоснование проекта Альфастрахование | SobakaPav.ru
Любой проект начинается с обоснования
У «АльфаСтрахования» есть внутренний портал, площадка для корпоративного контента и для HR-сервисов. Личный кабинет — это разводящая страница, с которой и только с которой можно открыть сервисы. Все сервисы объединены на левой панели, сумбурной и неудобной.
Первоначальный вид личного кабинета Альфастрахование | SobakaPav.ru
Так раньше выглядел личный кабинет
Список планируемых сервисов портала Альфастрахование | SobakaPav.ru
Вот такие сервисы будут когда-нибудь на портале
Нам нужно было сделать личный кабинет сотрудника и два сервиса («Мои отпуска» и «Мои заявки») человечнее: проще, удобней и доступней для пользователя.
Первоначальный вид сервиса "Мои отпуска" | SobakaPav.ru
Сервис «Мои отпуска» до перепроектирования
Чтобы понять масштаб проблемы, посмотрите, как выглядели эти сервисы до перепроектирования.
Первоначальный вид сервиса "Мои заявки" | SobakaPav.ru
Сервис «Мои заявки» до перепроектирования
Обсуждаем
Обсудили будущий интерфейс с представителями заказчика. Заподозрили, что быстрого проекта не получится: каждый из них представлял результат по-своему, единого мнения не было ни о чем. Даже о назначении и функциональности кабинета с сервисами.
И действительно, этот небольшой проект занял немало времени: любое предложение долго обсуждалось на самом высоком уровне.
А еще нормально работать мешала секретность. У нас не было доступа к порталу — пришлось ездить в петербургский офис за скриншотами. Переговоры — только по телефону, потому что внешние мессенджеры в компании запрещены.
Портрет сотрудника "АльфаСтрахование" | SobakaPav.ru
«АльфаСтрахование»: портрет сотрудника
Анализируем
Мы описали пользовательские роли (их всего две — руководитель и рядовой сотрудник) и сценарии использования.
Кабинет и сервисы руководителя должны функционально отличаться от кабинета и сервисов рядового сотрудника. В частности, руководитель принимает решения по заявкам подчиненных — в «Моих заявках» должен быть соответствующий раздел.
Рисуем
Утвердили документы и начали рисовать. Работали мелкими итерациями, результаты показывали в виде презентаций.
Со стороны заказчика проектом занимался новый сотрудник, еще не вполне знакомый с внутренними процессами компании. Согласовывал любое изменение со всем начальством — по всей цепочке руководства. А это очень долго.
Директор по развитию в какой-то момент решил нарисовать кабинет сам — в свободное время, так что это затянулось. А мы тем временем занялись сервисами «Мои отпуска» и «Мои заявки».
Предложенный вариант личного кабинета "АльфаСтрахование" | SobakaPav.ru
Пытаясь показать, каким хочется видеть личный кабинет, в «АльфаСтраховании» перерисовали наш вариант. Вот что у них получилось
Проектируем
Нарисовали детализированный прототип, показали заказчику, запустив очередное внутреннее обсуждение.
Вот что у нас получилось.
Прототип страницы "Мои отпуска" | SobakaPav.ru
Вот сюда попадает сотрудник, который хочет на море в апреле и в глушь, в Саратов — в октябре
Сервис «Мои отпуска» дает возможность посмотреть график отпусков, заявить о намерении отдохнуть, перенести отпуск на другие даты.
Формы заявок на отпуск и перенос отпуска | SobakaPav.ru
Формы заявок на отпуск и на перенос отпуска
Отдельный сервис позволяет просматривать эти и другие заявки, следить за их статусом.
Одобренная заявка на отпуск в прототипе "Мои отпуска" | SobakaPav.ru
Сервис «Мои заявки», одобренная заявка на отпуск
Руководитель принимает решения по заявкам подчиненных — в «Моих заявках» есть соответствующий раздел («Мне на согласование» с подразделами «Кадровые документы» и «Заявки на отпуск»).
Виды и статусы заявок в сервисе "Мои заявки" | SobakaPav.ru
Сервис «Мои заявки», раздел «Мне на согласование»
Дизайн
Оформили все в корпоративных цветах «АльфаСтрахования». Компания очень серьезно относится к корпоративному стилю: в огромном, очень подробном style guidу больше сотни страниц.
Элементы гайд-лайна заказчика:корпоративные цвета | SobakaPav.ru
Корпоративные цвета «АльфаСтрахования»
Библиотека компонентов
Сделали библиотеку компонентов (UI kit), чтобы в «АльфаСтраховании» дальше могли рисовать самостоятельно — по мере развития портала. Это точно понадобится: пока мы работали над «Заявками» и «Отпусками», появилось несколько новых сервисов.
Итак, мы сделали все, что запланировали. В «АльфаСтраховании» посмотрели на наши прототипы, приняли дизайн…
Внезапный поворот
…Но тут в компании внезапно заметили, что корпоративный портал в целом не очень хорош.
И взяли паузу, чтоб принять стратегическое решение — переделывать ли портал полностью или поручить нам UI-доработку. А стратегические решения — это надолго. Вот, до сих пор ждем.
Но, возможно, у этого кейса все-таки будет продолжение.
Бюджет
Результат
~ 500 000 ₽

UI-перепроектирование отдельных сервисов показало заказчику, что весь портал нуждается в доработке.

Другие кейсы